Post
Ask Question

Display Google Maps In MVC Core

We use Google API to display Google Maps in an application. Google API was free some time back but since last year, Google API is not available for free. To use Google API, first, we have to get our KEY from Google Maps Platform. The Google Maps Platform allows us to purchase a key from Google and then use it in the application. However, Google also provides free access to Google Maps just for development purposes. The free Google Maps uses watermarks on the surface of the maps and they are not valid for commercial use.

To display a Google Map, the following link must be used at the body or head section of the page or at the top of the page.

  1. <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>  

In the above link, the API_KEY is a Google API key which you have to purchase from Google using Google Maps platform. If you want to use Google Maps just for development purposes, then you have to skip the key portion of the above link and the above link, as below.

  1. <script src="https://maps.googleapis.com/maps/api/js?"></script>  

The above link will display Google Maps with watermarks on the map surface and it is used only for development and programming practice purposes.

Now, to display a Google Map in MVC Core application, first, we need to create an MVC Core application. Open the Index view and put the following code in it.

  1. <html>  
  2. <head>  
  3.     <script src="https://maps.googleapis.com/maps/api/js?"></script>  
  4. </head>  
  5. <body>  
  6.     <input type="button" value="Click to Display Map" onclick="DisplayGoogleMap()" />  
  7.     <div id="myDiv" style="width:100%;height:400px;"></div>  
  8.       
  9.     <script type="text/javascript">  
  10.         function DisplayGoogleMap() {  
  11.   
  12.             //Set the Latitude and Longitude of the Map  
  13.             var myAddress = new google.maps.LatLng(24.466807, 54.384297);  
  14.   
  15.             //Create Options or set different Characteristics of Google Map  
  16.             var mapOptions = {  
  17.                 center: myAddress,  
  18.                 zoom: 15,  
  19.                 minZoom: 15,  
  20.                 mapTypeId: google.maps.MapTypeId.ROADMAP  
  21.             };  
  22.   
  23.             //Display the Google map in the div control with the defined Options  
  24.             var map = new google.maps.Map(document.getElementById("myDiv"), mapOptions);  
  25.   
  26.             //Set Marker on the Map  
  27.             var marker = new google.maps.Marker({  
  28.                 position: myAddress,  
  29.                 animation: google.maps.Animation.BOUNCE,  
  30.             });  
  31.   
  32.             marker.setMap(map);  
  33.            }      
  34.     </script>  
  35. </body>  
  36. </html>  

Here, mapOptions is a user-defined variable that joins or wraps up different properties of the google.maps.Map() class. There are various properties of google.maps.Map() class. In the above example, we just used center, zoom, minZoom, and mapTypeId properties. The center property is used to locate a point or geometric location on the map using Latitude and Longitude values. The Latitude and Longitude are the geometric coordinates of the map, that point to a specific location on the map. The zoom property is used to set the initial zoom level of the map. The minZoom property is used to set the minimum zoom level of the map. The minimum zoom level is a zoom level from which we cannot zoom out further. The mapTypeId property is used to set the type of the Google map. The Google map API provides the following four types of maps,

  1. google.maps.MapTypeId.ROADMAP
  2. google.maps.MapTypeId.SATELLITE
  3. google.maps.MapTypeId.HYBRID
  4. google.maps.MapTypeId.TERRAIN

The Map() constructor of the google.maps.Map() class is used to display Google map. The Map() constructor takes two parameters. The first parameter is HTML element that is usually a div element and the second parameter is map options as described above. The LatLng is a property of the google.maps.Map() class which is used to locate the geometric coordinates of the Google Map. The LatLng property takes two parameters. The first parameter is Latitude value and the second parameter is Longitude value.

Similar Articles