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
