How to load Google Map dynamically with custom marker link, map center, zoom level and size


Abstract:

This document specifies the way of generating Google map dynamically with custom marker link, map center, zoom level and map size.

Table of Content:

1.  Generate Google Map

2.  Customize the marker link, map center, Zoom level and size

3.  Google Map API reference/Key

1. Generate Google Map: Please see the codes below for achieving this.

Default.aspx(Design Page)

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head id=”Head1″ runat=”server”>

<title>Your Data on Google Map </title>

<%–Google API reference/key–%>

<script src=”http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false

&amp;key=abcdefg” type=”text/javascript”>

</script>

</head>

<body onload=”initialize()” onunload=”GUnload()”>

<form id=”form1″ runat=”server”>

<%–Place holder to fill with javascript by server side code–%>

<asp:Literal ID=”js” runat=”server”></asp:Literal>

<%–Place for google to show your MAP–%>

<div id=”map_canvas” style=”width: 100%; height: 728px; margin-bottom: 2px;”>

</div>

</form>

</body>

</html>

Default.aspx.cs(Code Behind)

private void BuildScript(DataTable tbl)

{

String Locations = “”;

foreach (DataRow r in tbl.Rows)

{

// bypass empty rows

if (r[“Latitude”].ToString().Trim().Length == 0)

continue;

string Latitude = r[“Latitude”].ToString();

string Longitude = r[“Longitude”].ToString();

// create a line of JavaScript for marker on map for this record

Locations += Environment.NewLine + ” map.addOverlay(new GMarker(new GLatLng(” + Latitude + “,” + Longitude + “)));”;

}

// construct the final script

js.Text = @”<script type=’text/javascript’>

function initialize() {

if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById(‘map_canvas’));

map.setCenter(new GLatLng(45.05,7.6667), 2); ” + Locations + @”

map.setUIToDefault();

}

}

</script> “;

}

If you want to invoke the body onload and onunload functions, then you need to include the attributes at proper event as below.

body.Attributes.Add(“onload”, “javascript:initialize()”);

body.Attributes.Add(“onunload”, “javascript:GUnload()”);

Now your Map should look like this

2. Customize the marker link, map center, zoom level and size: Please see the codes below for achieving this.

Design:

<td style=”width: 282px; height: 278px;” align=”center” valign=”top”>

<%–Place holder to fill with javascript by server side code–%>

<asp:Literal ID=”js” runat=”server”>

</asp:Literal>

<%–Place for google to show your MAP–%>

<div id=”map_canvas” style=”width: 290px; height: 500px; margin-bottom: 2px;”>

</div>

</td>

Here you can set the size.

Code Behind:

//here I have used the master page body to render in specific page, you can use directly  the particular body ID

HtmlGenericControl body = (HtmlGenericControl)Master.FindControl(“mainBody”);

body.Attributes.Add(“onload”, “javascript:initialize()”); body.Attributes.Add(“onunload”, “javascript:GUnload()”); String Locations = “”;

string latitude = string.Empty;

string longitude = string.Empty;

string mapCenterLatitude = string.Empty; string mapCenterLongitude = string.Empty; foreach (var result in carResults)

{

latitude = Convert.ToString(result.gpsData.latitude);

longitude = Convert.ToString(result.gpsData.longitude);

if (result.gpsData.latitude != 0 && result.gpsData.longitude != 0)

{

mapCenterLatitude = latitude;

mapCenterLongitude = longitude;

}

//prepare point

string point = @”var point = new GLatLng(

” + latitude + @” ,

” + longitude + “);”;

//prepare marker with custom link and HTML

string marker = @”var marker = createMarker(point,'<div>Car Name: ” + result.Name +

@”<br/><a href=””search-car-details.aspx?locale=”+Request.QueryString[“locale”]+”&zip=” + result.zip

+ @” “”>Click here to get the details</a><div>’)”;

//add to overlay(map)

string addOverlay = “map.addOverlay(marker);”;

//prepare complete script for all locations

Locations += Environment.NewLine + point + Environment.NewLine + marker + Environment.NewLine + addOverlay;

}

// construct the final script

js.Text = @” <script type=’text/javascript’>

function initialize()

{

function createMarker(point,html)

{

var marker = new GMarker(point); GEvent.addListener(marker, “”click””, function() {

marker.openInfoWindowHtml(html);

});

return marker;

}

var map = new GMap2(document.getElementById(“”map_canvas””));

map.addControl(new GLargeMapControl());

map.setCenter(new GLatLng( ” + mapCenterLatitude + @”,

” + mapCenterLongitude + @”),12); // set zoom level

” + Locations + @” map.setUIToDefault();}

</script> “;

Now your Map should look like below screen shots


3. Google Map API Key: Please see the codes below for achieving this.

For generating API key please visit http://code.google.com/apis/base/signup.html


For more details please find the link below

http://code.google.com/apis/maps/documentation/javascript/basics.html

Note: This API V3 version of the Google Maps JavaScript API no longer needs API keys!.

Thanks for reading this article.

Enjoy


With personal regards

Swagat Parida

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s