google

Newest Post

Showing posts with label Google Maps. Show all posts
Showing posts with label Google Maps. Show all posts

Google Maps in asp.net website with dynamic addresses from database.

| Monday, February 18, 2013
Read more »
Add following javascript in the head section of the page to access the google maps API.
 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>  

Add following javascript code in the head section of the page to access the google api functions to display the map on the page.

 <script>  
     var geocoder;  
     var map;  
     function initialize() {  
       geocoder = new google.maps.Geocoder();  
       var latlng = new google.maps.LatLng(-34.397, 150.644);  
       var mapOptions = {  
         zoom: 8,  
         center: latlng,  
         mapTypeId: google.maps.MapTypeId.ROADMAP  
       }  
       map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);  
     }  
     function codeAddress() {  
       var address = document.getElementById('<%= hdnAddress.ClientID %>').value;  
       //alert(address);  
       geocoder.geocode({ 'address': address }, function (results, status) {  
         if (status == google.maps.GeocoderStatus.OK) {  
           map.setCenter(results[0].geometry.location);  
           var marker = new google.maps.Marker({  
             map: map,  
             position: results[0].geometry.location  
           });  
         } else {  
           alert("Geocode was not successful for the following reason: " + status);  
         }  
       });  
     }  
   </script>  

Above functions can be called "onload" by adding the "onload" attribute to the body tag as follows

 <body onload='initialize();'>  

Also this javascript can be called from the server side by registering the script in "Page_Load" event of the class.

 ClientScript.RegisterStartupScript(GetType(), "show", "initialize();", true);  
 ClientScript.RegisterStartupScript(GetType(), "show1", "codeAddress();", true);  

An ASP.NET hidden control is used to store the address of the location obtained from the database. Value to "hdnAddress" can be assigned from server side or client side as per the functionality of the page.

Following "div" element is added on the page to display the map on the webpage.

 <div id="map_canvas" style="width: 285px; height: 275px;"></div>  
  </div>  

The output on the browser will be
Size of the div with id "map_canvas" can be altered by changing the "height" and "width" attributes of the div element.

Try and Enjoy Coding!

Note - Please provide your feedback and let me know if there is any problem with above code.

Google Maps in asp.net website with dynamic addresses from database.

Posted by : Stranger
Date :Monday, February 18, 2013
With 3comments
Prev
▲Top▲