Question

I was quite familiar with the V2 api, but it’s been a while since I delved into any javascript.

I’m using an XML example found here: http://gmaps-samples-v3.googlecode.com/svn/trunk/xmlparsing/ to load markers I generate with PHP onto a map. The file is jqueryget.html and so far so good.

The problem arises when I want to refresh the markers.

The section of code is here:

google.load("maps", "3",  {other_params:"sensor=false"});
google.load("jquery", "1.3.2");

function initialize() {
var myLatlng = new google.maps.LatLng(37.4419, -122.1419);
var myOptions = {
  zoom: 13,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

jQuery.get("data.xml", {}, function(data) {
  jQuery(data).find("marker").each(function() {
    var marker = jQuery(this);
    var latlng = new google.maps.LatLng(parseFloat(marker.attr("lat")),
                                parseFloat(marker.attr("lng")));
    var marker = new google.maps.Marker({position: latlng, map: map});
 });
});
}

google.setOnLoadCallback(initialize);

I want to isolate the section that loads the markers from the initialize function, into a function I can call on click, however I can’t seem to work out how to do it.

Any advice greatly appreciated

Answer 1

Set the map variable as a global variable. Move the jQuery get method call to a separate function:

var map;

function initialize() {
  ...

  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

}

//Call this function from the click event
function createMarkers() {

  jQuery.get("data.xml", {}, function(data) {
    jQuery(data).find("marker").each(function() {
      var marker = jQuery(this);
      var latlng = new google.maps.LatLng(parseFloat(marker.attr("lat")),
                                parseFloat(marker.attr("lng")));
      var marker = new google.maps.Marker({position: latlng, map: map});
   });
  });

}

google.setOnLoadCallback(initialize);