Question

I am currently working on an application that pulls Google Map locations from an XML file and loads them into the map. Currently the Load() function is attached to the body tag. IOW, body onLoad=”load()” onunload=”GUnload()”.

I’m working in a PHP environment so I’ve created one file that does the mapping and I want to include it in numerous places, pages, and just pass it different params for different maps.

That said, I’m not sure how to initiate the load() function except on the body tag. That, of course, is a problem if I simply include the file in a different page because a second body tag would invalidate my HTML.

Here’s the load function:

function load() {
    if (isCompatible) {
        // Create Map
        map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(40, -90), 3);

        // Add controls
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());

        resetPolygon();

       GDownloadUrl("<?php echo $XML; ?>", function(data) {
 var xml = GXml.parse(data);
 var markers_xml = xml.documentElement.getElementsByTagName("marker");
 var bounds = new GLatLngBounds();
 for (var i = 0; i < markers_xml.length; i++) {
  var listid = markers_xml[i].getAttribute("lid");
   var voterid = markers_xml[i].getAttribute("voterid");
   var contacted = markers_xml[i].getAttribute("contacted");
var name = markers_xml[i].getAttribute("name");
var address = markers_xml[i].getAttribute("address");
var type = markers_xml[i].getAttribute("type");
var iconcolor = markers_xml[i].getAttribute("iconcolor");
var point = new GLatLng(parseFloat(markers_xml[i].getAttribute("lat")),
      parseFloat(markers_xml[i].getAttribute("lng")));
if(contacted == '2'){
 var thecolor = "#CCCCCC"
}else{
 var thecolor = iconcolor
}

var marker = createMarker(point, voterid, name, address, type, thecolor, listid);
map.addOverlay(marker);
bounds.extend(point);
markers.push(marker);
markers[i].voterid = voterid;
markers[i].contacted = contacted;
 }
 map.setZoom(map.getBoundsZoomLevel(bounds));
 map.setCenter(bounds.getCenter()); 

});
updatePoints();

    }
}

If you need more info, let me know. Any help is greatly appreciated.

Answer 1

I figured it out. Run the window.onload=load with Javascript after the element is loaded.

So:

<div id="map" style="width: 98%; height: 525px; float:left; margin: 0 1% 0 1%"></div>
<script type="text/javascript">

window.onload=load;

function load() {
    if (isCompatible) {
        // Create Map
        map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(40, -90), 3);

        // Add controls
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());

        resetPolygon();

       GDownloadUrl("<?php echo $XML; ?>", function(data) {
          var xml = GXml.parse(data);
          var markers_xml = xml.documentElement.getElementsByTagName("marker");
          var bounds = new GLatLngBounds();
          for (var i = 0; i < markers_xml.length; i++) {
            var listid = markers_xml[i].getAttribute("lid");
            var voterid = markers_xml[i].getAttribute("voterid");
            var contacted = markers_xml[i].getAttribute("contacted");
            var name = markers_xml[i].getAttribute("name");
            var address = markers_xml[i].getAttribute("address");
            var type = markers_xml[i].getAttribute("type");
            var iconcolor = markers_xml[i].getAttribute("iconcolor");
            var point = new GLatLng(parseFloat(markers_xml[i].getAttribute("lat")),
                                    parseFloat(markers_xml[i].getAttribute("lng")));
            if(contacted == '2'){
                var thecolor = "#CCCCCC"
            }else{
                var thecolor = iconcolor
            }

            var marker = createMarker(point, voterid, name, address, type, thecolor, listid);
            map.addOverlay(marker);
            bounds.extend(point);
            markers.push(marker);
            markers[i].voterid = voterid;
            markers[i].contacted = contacted;
          }
          map.setZoom(map.getBoundsZoomLevel(bounds));
          map.setCenter(bounds.getCenter()); 
        });
        updatePoints();

    }
}

That was the answer to the issue. Thanks to all who took a look.