InfoWindow

Additional information about the population at a specific marker can be supplied in a popup information window. This is accomplished by adding a click listener to each marker and supplying appropriate information for the popup.

Try it here as a Google Gadget:

HTML and JavaScript Google Gadget xml

HTML and JavaScript for a server. This data file is needed for this example: Universities and graduate counts

<html>

<head>

<title>Economist Map</title>

// declare global variables, infowindow must be explicitly declared global

var xhr = false;

var infowindow;

function initialize() {

// set center of map to chosen location -- 40, -90 is central North America

var myLatlng = new google.maps.LatLng(40, -90);

// choose zoom level, center, map type and create a Map instance (global since var keyword not used)

var myOptions = {zoom: 4, center: myLatlng, mapTypeId: google.maps.MapTypeId.HYBRID };

map = new google.maps.Map(document.getElementById("center"), myOptions);

// issue the AJAX request which will create markers with infowindows

makeRequest("http://sites.google.com/site/stephaniesmullen/files/mapexamples/Schools1985.xml");

}

// issue AJAX request

function makeRequest(url) {

if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); }

else if (window.ActiveXObject) {xhr = new ActiveXObject("Microsoft.XMLHTTP");}

if (xhr) {

xhr.onreadystatechange = response;

xhr.open("GET", url, true);

xhr.send(null);

}

else document.write("ERROR - could not create XMLHttpRequest");

}

// process AJAX request when ready, expecting an XML document

function response() {

var xmldoc = '';

if (xhr.readyState == 4) {

if (xhr.status == 200) {xmldoc = xhr.responseXML; makeMarkers(xmldoc); }

else document.write("ERROR - " + xhr.status);

}

// parse the information in the xml file to extract data to pass to create a marker

function makeMarkers(xmldoc) {

var markers=xmldoc.documentElement.getElementsByTagName("school");

for (var i = 0; i < markers.length; i++) {

var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),

parseFloat(markers[i].getAttribute("lng")));

var name = markers[i].getAttribute("name");

var address = markers[i].getAttribute("address");

var region = markers[i].getAttribute("region");

var tier = markers[i].getAttribute("tier");

var count = markers[i].getAttribute("count");

var size = markers[i].getAttribute("size");

if (count>0)

var marker = createMarker(latlng, name, address, tier, size, count);

}

// create a marker using the information provided, note that tier = 1 to 4

function createMarker(latlng, name, address, tier, size, count) {

var pics=["http://labs.google.com/ridefinder/images/mm_20_red.png",

"http://labs.google.com/ridefinder/images/mm_20_yellow.png",

"http://labs.google.com/ridefinder/images/mm_20_green.png",

"http://labs.google.com/ridefinder/images/mm_20_blue.png"];

var picSizeX = size*3+12;

var picSizeY = size*5+20;

var pic = new google.maps.MarkerImage(pics[tier-1], new google.maps.Size(picSizeX, picSizeY),

new google.maps.Point(0,0), new google.maps.Point(picSizeX/2, picSizeY),

new google.maps.Size(picSizeX, picSizeY) );

// create a shadow for the markers

var shadow = new google.maps.MarkerImage('http://labs.google.com/ridefinder/images/mm_20_shadow.png',

new google.maps.Size(picSizeX+10, picSizeY),

new google.maps.Point(0,0), new google.maps.Point(picSizeX/2, picSizeY) );

var marker = new google.maps.Marker({position: latlng, map: map, title: '1985', icon: pic, shadow: shadow});

// set ZIndex so that smaller icons appear on top of larger icons

marker.setZIndex(5-size);

// add a listener for the click on the marker event -- the function define what will happen on click --

// display an infowindow with the data for the particular marker

google.maps.event.addListener(marker,"click", function() {

if (infowindow) infowindow.close();

infowindow = new google.maps.InfoWindow({content:

'<div id="content">'+

'<div id="siteNotice">'+ '</div>'+

'<p id="firstHeading" class="firstHeading"><b>'+name+'</b></p>'+

'<div id="bodyContent">'+

'<p>'+address+'<br/> tier = '+tier+'<br/> 1985 graduates = ' + count+'<br/>'+'</p>'+

'</div>'+

'</div>'});

infowindow.open(map, marker);

});

return marker;

}

</script>

</head>

<div id="header"><h4>PhD Economist's Schools</h4></div>

<div id="footer">Stephanie Smullen, 2011 </div>

</div>

</body>

</html>

Google Gadget xml This data file is needed for this example: Universities and graduate counts

The functions makeRequest and response are replaced with the Google Gadgets AJAX interface. The functions makeMarker and createMarker have been omitted since they are the same as in the previous code.

<?xml version="1.0" encoding="UTF-8" ?>

<ModulePrefs title="Simple Google Maps InfoWindow Example" height="300"

description="Simple Google Maps InfoWindow Example"

author="Stephanie Smullen" author_email="stephanie.smullen@gmail.com">

</ModulePrefs>

<![CDATA[

<div id="header"><h4>PhD Economist's Schools</h4></div>

<div id="footer">Stephanie Smullen, 2011 </div>

</div>

// declare global variables, infowindow must be explicitly declared global

var infowindow;

function initialize() {

// set center of map to chosen location -- 40, -90 is central North America

var myLatlng = new google.maps.LatLng(40, -90);

// choose zoom level, center, map type and create a Map instance (global since var keyword not used)

var myOptions = {zoom: 4, center: myLatlng, mapTypeId: google.maps.MapTypeId.HYBRID };

map = new google.maps.Map(document.getElementById("center"), myOptions);

// issue the AJAX request which will create markers with infowindows

makeRequest("http://sites.google.com/site/stephaniesmullen/files/mapexamples/Schools1985.xml");

}

function makeRequest (url) {

var params = {};

params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.DOM;

gadgets.io.makeRequest(url, response, params);

}

function response (obj) {

makeMarkers(obj.data);

}

// ..... makeMarkers and createMarkers as before ....

gadgets.util.registerOnLoadHandler(initialize);

</script>

]]>

</Content>

</Module>

Page updated

Google Sites

Report abuse