Google Map Version 3 API is especially designed to be faster and more applicable to mobile devices, as well as traditional desktop browser applications ….read more from google map api document.
Click here to download the article
If you find the Google Map 3 code library useful, please consider donating
(No more API registration key needed for Version 3.0)
In this article I am going to explain how we can show multiple locations binding from code behind dynamically (database or any data source). Couple of moths ago in Asp.Net forum I have posted an article using Google Map Version 2.0
(http://forums.asp.net/p/1507845/3584193.aspx#3584193). Version two was kind of messy Java Script code but now in Version 3.0 Google made it very simple.
Create a ASPX page and copy paste the following markup code..
<html>
<head runat=”server”>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″ />
<title>Google Map 3.0</title>
<style type=”text/css”>
.formatText{color:Green;font-size:11px;font-family:Arial;font-weight:bold;}
</style>
<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false“></script>
<script type=”text/javascript”>
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(40.764015, -73.982797);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions);
for (var i = 0; i < locationList.length; i++) {
var args = locationList[i].split(“,”);
var location = new google.maps.LatLng(args[0], args[1])
var marker = new google.maps.Marker({
position: location,
map: map
});
var j = i + 1;
marker.setTitle(message[i].replace(/(<([^>]+)>)/ig,””));
attachSecretMessage(marker, i);
}
}
function attachSecretMessage(marker, number) {
var infowindow = new google.maps.InfoWindow(
{ content: message[number],
size: new google.maps.Size(50, 50)
});
google.maps.event.addListener(marker, ‘click’, function() {
infowindow.open(map, marker);
});
}
</script>
</head>
<body style=”margin: 0px; padding: 0px;” onload=”initialize()”>
<form runat=”server”>
<div style=”padding-top: 10%;padding-left:20%”>
<div id=”map_canvas” style=”width: 50%; height: 50%”>
</div>
</div>
</form>
</body>
</html>
I have highlighted some of the lines from the above code
1) The class formatText, simple css class for formating the info window text. You can replace your own css style here
.formatText{color:Green;font-size:11px;font-family:Arial;font-weight:bold;}
2) In the Java Script include statement I have mention sensor=false (because the sample app is targeting on web page if you are using from Mobile application you should set sensor=false. Read more about mobile app)
3) In the for loop I’ m using locationList.Length. Here locationList is Java Script array object which is getting generated from an Aspx code behind page and basically the locationList object has array of Geo code information like Latitude and Longitude. In one my previous article I have explained how we can get the Geo-code location from an address using Yahoo API.
HTML out put
var args = locationList[i].split(“,”);
var location = new google.maps.LatLng(args[0], args[1])
In marker we can able to set the title value and since I am using html tags and css class I’m replacing the html tags using the following syntax
protected void Page_Load(object sender, EventArgs e)
{
List<String> oGeocodeList = new List<String>
{
" '40.756012, -73.972614' ",
" '40.456012, -73.796087' ",
" '40.456012, -73.456807' "
};
var geocodevalues = string.Join(",", oGeocodeList.ToArray());
List<String> oMessageList = new List<String>
{
" '<span class=formatText >Google Map 3 Awesome !!!</span>' ",
" '<span class=formatText>Made it very simple</span>' ",
" '<span class=formatText>Google Rocks</span>' "
};
String message = string.Join(",", oMessageList.ToArray());
ClientScript.RegisterArrayDeclaration("locationList", geocodevalues);
ClientScript.RegisterArrayDeclaration("message", message);
}
The above code List<String> oGeocodeList which creates a list of Geo-Code collection object. I have hard coded latitude and longitude (you can replace with your db procedure). Once you have created the list object we should convert in to Java Script array format like below
var geocodevalues = string.Join(“,”, oGeocodeList.ToArray()); and finally register the array
ClientScript.RegisterArrayDeclaration(“locationList”, geocodevalues); here locationList is the JS array object name.
Similarly I am creating the message array for the pop window (InfoWindow)
List oMessageList = new List
{
” ‘Google Map 3 Awesome !!!‘ “,
” ‘Made it very simple‘ “,
” ‘Google Rocks‘ ”
};
String message = string.Join(“,”, oMessageList.ToArray()); //convert list object to JS array format.
ClientScript.RegisterArrayDeclaration(“message“, message); //message = JS array object name.
Please refer the following links if you need to learn more about Map API 3.0
http://code.google.com/apis/maps/documentation/v3/introduction.html
http://code.google.com/apis/maps/documentation/v3/
http://code.google.com/apis/maps/documentation/v3/reference.html
Hope this help and If you have any comments, please feel free to write your feedback.
You can download the entire article from here or copy paste the URL
http://www.4shared.com/file/251039814/3e491cfc/GoogleMap3.html
If you find the Google Map 3 code library useful, please consider donating
Thanks
Deepu
Deepu Madhusoodanan's Blog 
