The Google Map API provides a number of options for manipulating maps and adding content to the map through a variety of services, allowing you to create maps applications on your website.

Here I  explored the google map’s  Info Window method a bit and demonstrated how to add dynamic content to it.

Suppose in a contact page we have a list company branch information and when clicking each branch, an info window should popup with the corresponding address  in a google map placed in the same page.

First of all we need to create an HTML <ul> list with all branch information

The information under each heading either you can make it hidden completely or make it as an accordion.

The html block should look like

<ul id="BranchList">
<li><a rel="25.096803,55.157306" href="#"> Head Office</a> <div class="<span style="color: #ffffff;">Hidden</span>" >
<p><span>Corniche Road, <br/>
Golden Beach Tower, <br/>
Penthouse Level,<br/>
P.O. Box 8206, Abu Dhabi, U.A.E.</span><br/>
Tel: +971 2 409 0700 <br/>
Fax: +971 2 622 1707<br/>
Email: <a href="mailto:info@noreply.com">info@noreply.com</a> </p> </div>
</li>
</ul>
<div id="GoogleMap"></div>

add the latitude and longitude values as a coma separated list as highlighted.

now you need to invoke the javascript function to read the information from the html and place it in the Google Map at the right location.

<script type="text/javascript"><!--
InitiateGoogleMap("GoogleMap","BranchList");
// --></script>

and the javascript function is below

function InitiateGoogleMap(GoogleMapDivId,AddressListElementId){
/*
- To display info window on google map on click of a particular link or button -
GoogleMapDiv : The Id of the div where the map is to be displayed
AddressListElementId : the Id of a UL list where the information displayed.
*/
 if (GBrowserIsCompatible()) {
  var Map = new GMap2(document.getElementById(GoogleMapDiv)); // Initializing the map
  var Coordinates={}; // lat/long values
  var Address = $(this).parent().find(".Hidden").html(); // getting the info to be displayed
  var point = new GLatLng(parseFloat(Coordinates[0]), parseFloat(Coordinates[1])); //Creating a marker point
  var Location = new GMarker(point); initializing a marker

  Map.setCenter(new GLatLng(25.096803, 55.157306), 13); // centering the map in a default location
  Map.setMapType(G_SATELLITE_MAP); // Setting the Map type
  $("#" + AddressListElementId + " li a:first").click(function(){ //Click function

  Coordinates = $(this).attr("rel").split(","); lat/long values
  Map.addOverlay(Location); //Creating a marker
  Map.openInfoWindow(point, $("#"+AddressListElementId +" li:first").find(".Hidden").html()); //Opening the first Item Description in the Map Info Window when the page load

  GEvent.addListener(Location, "click",
  function() {
   Map.openInfoWindow(point, Address);
  });
  return false;
 });
 Map.addControl(new GSmallMapControl());
 Map.addControl(new GMapTypeControl());
 }
}

Note: Jquery plugin and googlemap API references are required to make this work.

You can use Google Map plugins to skin the info window

Tags: C#, google map, html, javascript