Get the last node of a Google maps XML file

Question

I have been playing around with Google maps API v3 because v2 is depricated and no longer works for my site

Instead of displaying every pointer in the xml file on the map, i want to display the current marker that would be relevant to that page. I have an events page so i want to show info about the event and display a map just for that event taken from the xml file.

I have it all working except i need to specify an id in the url which is what i need to do but what if there is no id set in the url.

Say my url would be www.mysite.com/events.php that won't show a map because there is no id but if i use www.mysite.com/events.php?id=1 the map will show

what i need is to determine if an id is in the url and if not, find the last marker of the xml file and show that instead as it will be the most current

Here is the google code along with my additions that check if the id in the url is present

   function load() {
          var map = new google.maps.Map(document.getElementById("map"), {
            center: new google.maps.LatLng(50.618438, -3.420304),
            zoom: 13,
            mapTypeId: 'roadmap'
          });
          var infoWindow = new google.maps.InfoWindow;

          // Change this depending on the name of your PHP file
          downloadUrl("results.xml", function(data) {
            var xml = data.responseXML;
            var the_id = gup('id');

            var markers = xml.documentElement.getElementsByTagName("marker");
            var last = markers.length-1;

            for (var i = 0; i < markers.length; i++) {
                if (markers[i].hasAttribute('id')) {
                    //if there is, test its value
                    if (markers[i].getAttribute('id') == the_id) {
                          var name = markers[i].getAttribute("name");
                          var address = markers[i].getAttribute("address");
                          var type = markers[i].getAttribute("type");
                          var point = new google.maps.LatLng(
                              parseFloat(markers[i].getAttribute("lat")),
                              parseFloat(markers[i].getAttribute("lng")));
                          var html = "<b>" + name + "</b> <br/>" + address;
                          var icon = customIcons[type] || {};
                          var marker = new google.maps.Marker({
                            map: map,
                            position: point,
                            icon: icon.icon,
                            shadow: icon.shadow
                          });

                        bindInfoWindow(marker, map, infoWindow, html);
                     }
                     else {
                         var name = markers[last].getAttribute("name");
                          var address = markers[last].getAttribute("address");
                          var type = markers[last].getAttribute("type");
                          var point = new google.maps.LatLng(
                              parseFloat(markers[last].getAttribute("lat")),
                              parseFloat(markers[last].getAttribute("lng")));
                          var html = "<b>" + name + "</b> <br/>" + address;
                          var icon = customIcons[type] || {};
                          var marker = new google.maps.Marker({
                            map: map,
                            position: point,
                            icon: icon.icon,
                            shadow: icon.shadow
                          });

                        bindInfoWindow(marker, map, infoWindow, html);
                     }

                }
            }
          });
        }

I have added an else so it should replace the i in the for-loop with the last xml marker but it doesn't work

and here is the function which gets the id from the url

function gup( name ) {
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}

I think i need to check if the id is present, if not, get the last marker

Answer 1

Ah... for one thing, your "else" clause is at the wrong level (and attached to the wrong if). It's getting exercised once for every marker that has an id, because it's inside the for loop. At the minimum, you should move the else out of the for loop.

But the for loop is unnecessary too. Instead of looping through the marker elements checking which one has the right id, use getElementById(id):

 var the_id = gup('id');
 var respDoc = data.responseXML.documentElement
 var the_marker = respDoc.getElementById(the_id);
 // If the_id is '' then there will be no such marker, and the_marker will be
 // null, which is "falsy".
 if (!the_marker) {
   var markers = respDoc.getElementsByTagName("marker");
   // check whether there are any markers.
   if (markers.length < 1) return; // avoid errors
   the_marker = markers[markers.length - 1];
 }
 // Now do what you need to with the_marker.getAttribute("name") etc.
 // This is just your code, with markers[i] replaced by the_marker:
 var name = the_marker.getAttribute("name");
 var address = the_marker.getAttribute("address");
 var type = the_marker.getAttribute("type");
 var point = new google.maps.LatLng(
   parseFloat(the_marker.getAttribute("lat")),
   parseFloat(the_marker.getAttribute("lng")));
 var html = "<b>" + name + "</b> <br/>" + address;
 var icon = customIcons[type] || {};
 var marker = new google.maps.Marker({
    map: map,
    position: point,
    icon: icon.icon,
    shadow: icon.shadow
 });

 bindInfoWindow(marker, map, infoWindow, html);

(Untested.)

Finally, I noticed that the gup() you're using is looking at window.location.href, the URL of the current web page. That is what you want, right? OK, just checking...