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.

<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 the 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.

<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 the MVC Core application, first, we need to create an MVC Core application. Open the Index view and put the following code in it.

<html>
<head>
    <script src="https://maps.googleapis.com/maps/api/js?"></script>
</head>
<body>
    <input type="button" value="Click to Display Map" onclick="DisplayGoogleMap()" />
    <div id="myDiv" style="width:100%;height:400px;"></div>
    
    <script type="text/javascript">
        function DisplayGoogleMap() {
            // Set the Latitude and Longitude of the Map
            var myAddress = new google.maps.LatLng(24.466807, 54.384297);
            
            // Create Options or set different Characteristics of Google Map
            var mapOptions = {
                center: myAddress,
                zoom: 15,
                minZoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            // Display the Google map in the div control with the defined Options
            var map = new google.maps.Map(document.getElementById("myDiv"), mapOptions);
            // Set Marker on the Map
            var marker = new google.maps.Marker({
                position: myAddress,
                animation: google.maps.Animation.BOUNCE,
            });
            marker.setMap(map);
        }
    </script>
</body>
</html>

Here, mapOptions is a user-defined variable that joins or wraps up different properties of 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,

google.maps.MapTypeId.ROADMAP
google.maps.MapTypeId.SATELLITE
google.maps.MapTypeId.HYBRID
google.maps.MapTypeId.TERRAIN

The Map() constructor of the google. maps.Map() class is used to display Google Maps. The Map() constructor takes two parameters. The first parameter is an HTML element that is usually a div element and the second parameter is map options as described above. The LatLng is a property of 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 the Latitude value and the second parameter is the Longitude value.


Similar Articles