In this article I will explain with an example, how to use Google Map API 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
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 the Map object.
Finally, a click event handler is assigned to the marker with InfoWindow.
C#
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<API_KEY>"></script>
<script type="text/javascript">
window.onload = function () {
var latLng = new google.maps.LatLng("19.076", "72.8774");
var mapOptions = {
center: latLng,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: "<div style='height:60px;width:200px'><b>Your location:</b><br />Latitude: 19.076<br />Longitude: 72.8774"
});
google.maps.event.addListener(marker, "click", function (e) {
var infoWindow = new google.maps.InfoWindow();
infoWindow.setContent(marker.title);
infoWindow.open(map, marker);
});
};
</script>
Screenshot
![Using Google Maps API in ASP.Net]()
Demo
Download
