In this article I will explain with an example, how to use Google Map API V3.56 in ASP.Net.
Getting Google Map API Key
In order to use Google Map API, first you need to register and get the API Key using following link.
HTML Markup
The following HTML Markup consists of:
DIV – For displaying Google Map.
<div id="dvMap" style="width: 400px; height: 400px"></div>
Displaying Google Map using Google Maps API V3.56
Inside the window.onload event handler, using the Latitude and Longitude values the Google Maps Geocoding API LatLng object is created.
Then, the Google Map is initialized with mapOptions object.
Next, Marker object is created using AdvancedMarkerElement class.
Finally, a click event handler is assigned to the marker using the addListener with InfoWindow.
C#
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=marker&loading=async"></script>
<script type="text/javascript">
window.onload = function () {
var latLng = new google.maps.LatLng("19.076", "72.8774");
var mapOptions = {
center: latLng,
zoom: 12,
mapId: "65369bea7bc8eb7e"
};
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
// The advanced marker.
var marker = new google.maps.marker.AdvancedMarkerElement({
position: latLng,
map,
title: "<div style='height:60px;width:200px'><b>Your location:</b><br />Latitude: 19.076<br />Longitude: 72.8774"
});
// Add a click listener to marker, and set up the info window.
marker.addListener("click", ({ domEvent, latLng }) => {
// Create an info window.
const infoWindow = new google.maps.InfoWindow();
infoWindow.close();
infoWindow.setContent(marker.title);
infoWindow.open(marker.map, marker);
});
};
</script>
Screenshot
![Using Google Maps API V3.56 in ASP.Net]()
Demo
Download
