Including a Google Map mash up with an Info popup/bubble in your webpage

Here are 4 simple steps to include a Google map in your ASP.Net web page :

Dim Coord As CoordinateCoord = Geocode.GetCoordinates(“1600 Amphitheatre Parkway,Mountain View, CA  94043”)

_LONGITUDE = Coord.Longitude  ‘_LONGITUDE is a class level public variable
_LATITUDE = Coord.Latitude ‘_LONGITUDE is a class level public variable

  • In your ASPX page,
<table> 

<tr align="center"> 

<td colspan="2"> 

<div id="map" style="width: 450px; height: 300px"> 

</div> 

<script src="http://maps.google.com/maps?file=api&v=2&key=XXXXXXXX" type="text/javascript"> 

</script> 

<script type="text/javascript"> 

//<![CDATA[  

function load() { 

if (GBrowserIsCompatible()){ 

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(<%=LATITUDE %>, <%=LONGITUDE %>), 13); 

var point = new GLatLng(<%=LATITUDE %>, <%=LONGITUDE %>);
var marker = new GMarker(point);map.addOverlay(marker); 

marker.openInfoWindowHtml('<b>html content</b>');} 

} 

//]]> 

</script> 

</td> 

</tr> 

</table> 

Just replace the XXXXXXXXXXXXXX with your API key and you are good to go. Happy Mapping !

Advertisements

2 thoughts on “Including a Google Map mash up with an Info popup/bubble in your webpage

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