[Google Maps API v3] InfoBox and Map Labels

[Douglas]

I've been trying the  "using PHP/MySQL with Google Maps" example code
(http://code.google.com/apis/maps/articles/phpsqlajax_v3.html) example
- although I've skipped the MySQL part and just used a static xml
file. So far I've gotten it working just fine.

However, I'm having problems adding an InfoBox to create map labels,
as in the InfoBox examples page (http://google-maps-utility-library-
v3.googlecode.com/svn/tags/infobox/1.0/docs/examples.html).

Basically, I'm trying to modify and slot in one piece of code from one
example map in to another but don't really know how.

My current map code look like this:

var customIcon = {
icon: 'maps/mm_20_yellow.png',
shadow: 'maps/mm_20_shadow.png'
};

function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(<?php echo $lat;?>, <?php echo $long;?
>),
zoom: <?php echo $zoom;?>,
mapTypeId: '<?php echo $map_style;?>'
});
var infoWindow = new google.maps.InfoWindow;
downloadUrl("map/data/<?php echo $xml;?>.xml", function(data) {
var xml = parseXml(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var isl = markers[i].getAttribute("isl");
var inf = markers[i].getAttribute("inf");
var lat = markers[i].getAttribute("lat");
var lng = markers[i].getAttribute("lng");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + isl + "</b>" + "<div class='line'>" + "<br>" + lat
+", " + lng + "<br>" + inf + "</div>";
var icon = customIcon || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}

function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}

function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;

request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request.responseText, request.status);
}
};

request.open('GET', url, true);
request.send(null);
}

function parseXml(str) {
if (window.ActiveXObject) {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
} else if (window.DOMParser) {
return (new DOMParser).parseFromString(str, 'text/xml');
}
}

function doNothing() {}


While the InfoBox map label code looks like this:

        var myOptions = {
                         content: labelText
                        ,boxStyle: {
                           border: "1px solid black"
                          ,textAlign: "center"
                          ,fontSize: "8pt"
                          ,width: "50px"
                         }
                        ,disableAutoPan: true
                        ,pixelOffset: new google.maps.Size(-25, 0)
                        ,position: secheltLoc
                        ,closeBoxURL: ""
                        ,isHidden: false
                        ,pane: "mapPane"
                        ,enableEventPropagation: true
                };

                var ibLabel = new InfoBox(myOptions);
                ibLabel.open(map);


Thanks in advance for any help offered.

-- 
You received this message because you are subscribed to the Google Groups 
"Google Maps JavaScript API v3" group.
To post to this group, send email to google-maps-js-api...@googlegroups.com.
To unsubscribe from this group, send email to 
google-maps-js-api-v3+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/google-maps-js-api-v3?hl=en.