I need help displaying labels or tooltips on polygons in Google Maps.
I'm generating an XML file from MySQL and passing the result to Google Maps. The label text should be taken from the "name" attribute in the "subdivision" tag of the XML file (For example, 42033, 44001, etc. from the XML example in the code). Below is my working code, as well as a sample of XML that can be used to test it. Any help would be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<title>map.php</title>
<!-- EXAMPLE XML
<subdivisions>
<subdivision name="42033">
<coord lat="40.64611090684065" lng="-73.97076976149259"/>
<coord lat="40.645316667618836" lng="-73.97054554390671"/>
<coord lat="40.64516421854578" lng="-73.9719467951965"/>
<coord lat="40.645862324545774" lng="-73.97208574769395"/>
<coord lat="40.64600111018018" lng="-73.97174398166794"/>
<coord lat="40.64637857107249" lng="-73.97084113795663"/>
<coord lat="40.64611090684065" lng="-73.97076976149259"/>
</subdivision>
<subdivision name="44001">
<coord lat="40.6397169858144" lng="-73.99082364793345"/>
<coord lat="40.639155386804205" lng="-73.99140800923699"/>
<coord lat="40.64077040176035" lng="-73.99407692009133"/>
<coord lat="40.64124779897801" lng="-73.99336253671026"/>
<coord lat="40.641728290946446" lng="-73.9926445605762"/>
<coord lat="40.6422049040861" lng="-73.99192812375553"/>
<coord lat="40.64268589050536" lng="-73.99121277446031"/>
<coord lat="40.64139006146806" lng="-73.98906715919247"/>
<coord lat="40.64083622307287" lng="-73.98966136464998"/>
<coord lat="40.64027520619966" lng="-73.99024413671366"/>
<coord lat="40.6397169858144" lng="-73.99082364793345"/>
</subdivision>
</subdivisions>
-->
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'/>
<script src="https://maps.googleapis.com/maps/api/js?key=[API_KEY]"></script> <!-- API KEY REMOVED FOR PRIVACY -->
<script type="text/javascript">
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(40.7,-74),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var arr = new Array();
var polygons = [];
var bounds = new google.maps.LatLngBounds();
downloadUrl("phpsqlajax.php", function(data) { // OUTPUT LOOKS IDENTICAL TO EXAMPLE XML ABOVE, FIRST ARGUMENT CAN BE SUBSTITUTED WITH AN XML FILE
var xml = data.responseXML;
var subdivision = xml.getElementsByTagName("subdivision");
for (var i = 0; i < subdivision.length; i++)
{
arr = [];
var coordinates = xml.documentElement.getElementsByTagName("subdivision")[i].getElementsByTagName("coord");
for (var j=0; j < coordinates.length; j++) {
arr.push( new google.maps.LatLng(
parseFloat(coordinates[j].getAttribute("lat")),
parseFloat(coordinates[j].getAttribute("lng"))
));
bounds.extend(arr[arr.length-1])
}
polygons.push(new google.maps.Polygon({
paths: arr,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: '#FF0000',
fillOpacity: 0.25
}));
polygons[polygons.length-1].setMap(map);
}
});
// map.fitBounds(bounds); // DOES NOT WORK FOR LARGE XML FILES
map.setCenter(new google.maps.LatLng(40.7,-74));
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
callback(request);
}
};
request.open('GET', url, true);
request.send(null);
}
/**
* Parses the given XML string and returns the parsed document in a
* DOM data structure. This function will return an empty DOM node if
* XML parsing is not supported in this browser.
* @param {string} str XML string.
* @return {Element|Document} DOM.
*/
function xmlParse(str) {
if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
}
if (typeof DOMParser != 'undefined') {
return (new DOMParser()).parseFromString(str, 'text/xml');
}
return createElement('div', null);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#map-canvas { position: absolute; top: 0px; right: 0; bottom: 0px; left: 0; }
</style>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
