I have some code that does this, there are several parts here.
First I have an include file that contains the bulk of the code to load the data from the XML file and populate the map on screen. That file listed below. This is in an older page I have so its an ASP file accessed through a standard <!--#include file="inc/GoogleCalJScript.asp"--> This is in my page just above the /Head statement.
<script type="text/javascript"
src="http://www.google.com/jsapi?key=YOUR GOOGLE GENERATED KEY GOES HERE"></script>
<script type="text/javascript">
google.load("maps", "2");
google.load("search", "1");
// Call this function when the page has been loaded
// Old Center of US was 37.649034, -96.855469
function initialize() {
var map = new google.maps.Map2(document.getElementById("map"));
map.setCenter(new google.maps.LatLng(40.7704255, -111.8912400), 3);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl());
function createPoint(Lat, Lng, mName, mAddress, mCity, mState, mPhone) {
var point = new GLatLng(Lat,Lng);
map.addOverlay(createMarker(point, mName, mAddress, mCity, mState, mPhone));
}
// Creates a marker at the given point with the given number label
function createMarker(point, mName, mAddress, mCity, mState, mPhone) {
var marker = new GMarker(point);
GEvent.addListener(marker, "mouseover", function() {
marker.openInfoWindowHtml("<b>" + mName + "</b>" + "<br />" + mAddress + "<br />" + mCity + "<br />" + mState + "<br />" + mPhone );
});
GEvent.addListener(marker, "click", function() {
marker.showMapBlowup();
});
return marker;
}
// Load points from XML file
GDownloadUrl("Dealers.xml", function(data, responseCode) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("point");
for (var i = 0; i < markers.length; i++) {
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
map.addOverlay(createMarker(point, markers[i].getAttribute("dealer"), markers[i].getAttribute("address"), markers[i].getAttribute("city"), markers[i].getAttribute("state"), markers[i].getAttribute("phone")));
}
});
// Add 5 markers to the map at random locations For testing only, currently set to not place any markers.
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 5; i < 5; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(createMarker(point, i + 1));
}
}
google.setOnLoadCallback(initialize);
</script>
Please submit any questions or comments through my website.
http://www.qualitysoftwaredesign.com