Dealing With Google Maps - ASP.NET - Part (1)

In this article, I'll show you how to load Google map in your page. Then, we will move to dealing with markers, how to customize it and apply data which retrieved from SQL database to Google map.

First Step:

create new web application, using visual studio, then register the following reference to web page, or to your master page.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"/>

Second Step:
just copy the following script and put it in your page in order to display Google map.

<script>
function initialize() { var mapOptions = {
       // 28, 47 is saudi arabia coordinates 

       center: new google.maps.LatLng(28, 47), 

       zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP }; 

       var map = new google.maps.Map(document.getElementById("googleMap"), mapOptions); 

 }

// this listener will call the method initialize() when page load
google.maps.event.addDomListener(window, 'load', initialize); 

</script> 

Third Step:
inside your page body, set the following div

<div id="googleMap" style="width:500px;height:380px;"></div>

then run the page, you will see the map in your page.

if you want to change map language to Arabic or another language, just pass Language code via query string like the following:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&Language=SA"/>