Friday, September 20, 2013

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

In this article, I will show you how to store and retrieve data from SQL Server DB to Google map and vise versa.

Save data from Google map to SQL table:
Create table to store the following information:
  - Latitude
  - Logitude
  - Description of the location


our interface should be like the following:



After click SAVE button, information in text boxes should be saved to our table.




Retrieve data from SQL table to Google map:

Retrieve the data from SQL table by your own way, and define three public properties and assign value to them, those properties will called in HTML.

public string Longitude{get; set;}
public string Latitude{get; set;}
public string Desc{get; set;}

To change marker position to be like values stored in table, just change location properties from:
myCoordinates = new google.maps.LatLng( 24, 47);
to
myCoordinates = new google.maps.LatLng('<%= Latitude %>', '<%= Logitude %>');

now, we want to display location description if user click to the marker.
First change draggable property of the marker from true to false, to be read only.
Then, add the following to script:

// define new info window and assign location description
var infoWindow = new google.maps.InfoWindow({
            content: '<%= Desc %>'
        });

// add click listener to marker
google.maps.event.addListener(marker, 'click', function () {
            infoWindow.open(map, marker);
        });

and if you run the page, and click to marker, you will get the following result:


Enjoy ..

No comments:

Post a Comment