Join Dotnetcodes DotnetCodes.com is online Discussion Forum for Software professionals . It lets you find friends around the world and Create professional network that share similar interests as you. Get help on ur projects by industry specialists. Also get answers to all ur technical/placement related querries.Get an edge over others.
Already MemberClick here to login
ASP.net MVC Interview Questions Answers Interview Questions
Get Started Developing for Android Apps with Eclipse Articles
Whats New in ASP.NET 4.0 Part 2 Articles
.Net framework 4.0 Interview Questions Answers Interview Questions
SQL server reporting services Interview Questions (SSRS) part 1 Articles
SharePoint 2010 interview Questions Answers Interview Questions
Html5 interview questions and answers Interview Questions
Serial Number in SSRS Articles
How to Print a Crystal Report direct to printer Articles
Explaining SDLC -System Development Life Cycle Articles
Populate or bind Dropdownlist in Asp.net using Jquery and Json Articles
Sql Server Database Backup and Restore through C# Source Codes
ASP .Net Page Life cycle Articles
Benefits of Generics in .net Articles
.Net framework 4.0 major improvements Articles
Submit Articles | More Articles..

Embedding Google Map in website with dynamic address

Posted By: rakesh On:2/8/2013 11:37:28 PM in:Source Codes Category:ASP.NET Hits:2749
In this article you can learn how you can embed Google Maps in your website with dynamic Longitude and Latitude

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&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("canvas_maps"), 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);  

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

 <div id="canvas_maps" style="width: 300px; height: 300px;"></div>

An ASP.NET hidden control "hdnAddress"  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.

The output on the browser will be
comments powered by Disqus
User Profile
Rakesh Sinha
Team Lead
Delhi , INDIA
Email :You must Log In to access the contact details.
Latest Post from :rakesh
How to Calculate sum of a column in a dataset
View: 231 | Submitted on: 9/17/2014 6:48:19 AM
ASP.NET MVC 4 Interview Questions and Answers
View: 371 | Submitted on: 9/1/2014 10:10:25 PM
What New in ASP.NET MVC 5
View: 739 | Submitted on: 6/6/2014 12:52:30 AM
What is view state in .Net?
View: 919 | Submitted on: 4/21/2014 9:44:52 PM
Rename database in sql server
View: 344 | Submitted on: 2/6/2014 9:57:16 PM
Submit Articles | All Post of This User..

All rights reserved to dotnetcodes. Logos, company names used here if any are only for reference purposes and they may be respective owner's right or trademarks.
Best viewed at 1024 x 768 resolution with Internet Explorer 5.0 or Mozila Firefox 3.5 or Google Crome and higher