Google maps and jquery

Google maps and jquery

Yep, your worst nightmare - another newbie :)

Ok, I've attached an html file (won't let me attach a js file so I'll add that end the end of this post).

Currently the map opens ok in the html file at the proper location.  If you look below the map you will see a button that says "show markers".  This pulls data from an xml file and this also works great.  When I add more coordinates to the xml file it expands the map to show all markers when I press the "show markers" button.

The html for the button is:  <input type="button" id="showmarkers" value="Show Markers" />

Here now is my question / request:

I would like to get rid of the button altogether and have the markers load when the page loads.  So, on page load, the xml file is read and the map zooms to encompass all the markers I had in the xml file.  Any help would be appreciated.  I tried palying around with "<body onload>" but no luck.  Please reply with specifics as to what code to put where in the html if any and in the js file.

Here is the xml file:

<?xml version="1.0"?>

<markers>
<marker>
<name>3 Bedroom Condo</name>
<address>1604 Morey Road</address>
<lat>49.177342</lat>
<lng>-123.97345</lng>
</marker>

<marker>
<name>Newly Renovated Two Level Home</name>
<address>264 Machlreary</address>
<lat>49.164681</lat>
<lng>-123.94876</lng>
</marker>

</markers>

And here is the js file:

$(document).ready(function() {
  $("#map").css({
        height: 500,
        width: 600
    });
    var myLatLng = new google.maps.LatLng(49.177342, -123.97345);
  MYMAP.init('#map', myLatLng, 15);
 
  $("#showmarkers").click(function(e){
        MYMAP.placeMarkers('markers.xml');
  });
});

var MYMAP = {
  map: null,
    bounds: null
}

MYMAP.init = function(selector, latLng, zoom) {
  var myOptions = {
    zoom:zoom,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  this.map = new google.maps.Map($(selector)[0], myOptions);
    this.bounds = new google.maps.LatLngBounds();
}

MYMAP.placeMarkers = function(filename) {
    $.get(filename, function(xml){
        $(xml).find("marker").each(function(){
            var name = $(this).find('name').text();
            var address = $(this).find('address').text();
           
            // create a new LatLng point for the marker
            var lat = $(this).find('lat').text();
            var lng = $(this).find('lng').text();
            var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
           
            // extend the bounds to include the new point
            MYMAP.bounds.extend(point);

           
            var marker = new google.maps.Marker({
                position: point,
                map: MYMAP.map
            });
           
            var infoWindow = new google.maps.InfoWindow();
            var html='<strong>'+name+'</strong.><br />'+address;
            google.maps.event.addListener(marker, 'click', function() {
                infoWindow.setContent(html);
                infoWindow.open(MYMAP.map, marker);
            });
            MYMAP.map.fitBounds(MYMAP.bounds);
        });
    });
}

Thanks again,

Abe