Passing XML Marker Google Map

Question

Ich habe allerdings eine V3 Google-Karte zu schaffen, basierend auf diesem Beispiel von Mike Williams http://www.geocodezip.com/v3_MW_example_linktomap.html

Ich habe in ein bisschen ein Problem laufen. Wenn ich keine Parameter in meiner URL habe, bekomme ich den Fehler "id is undefined idmarkers [id.toLowerCase()] = marker;" in Firebug und nur ein Marker wird angezeigt. Wenn ich einen Parameter (? Id = 105 zum Beispiel) habe, sagen alle Sidebar-Links 105 (oder was auch immer der Parameter in der URL war) statt ihrer jeweiligen Bezeichnung, wie in der XML-Datei aufgelistet, und ein zufälliges Infowindow wird statt geöffnet das Fenster für die ID in der URL. Hier ist mein javascript:

 var map = null; 
     var lastmarker = null; 
       // ========== Read paramaters that have been passed in ========== 

       // Before we go looking for the passed parameters, set some defaults 
       // in case there are no parameters 
     var id; 
     var index = -1; 

       // these set the initial center, zoom and maptype for the map 
       // if it is not specified in the query string 
     var lat = 42.194741; 
     var lng = -121.700301; 
     var zoom = 18; 
     var maptype = google.maps.MapTypeId.HYBRID; 

     function MapTypeId2UrlValue(maptype) { 
      var urlValue = 'm'; 
      switch (maptype) { 
      case google.maps.MapTypeId.HYBRID: urlValue = 'h'; 
       break; 
      case google.maps.MapTypeId.SATELLITE: urlValue = 'k'; 
       break; 
      case google.maps.MapTypeId.TERRAIN: urlValue = 't'; 
       break; 
      default: 
      case google.maps.MapTypeId.ROADMAP: urlValue = 'm'; 
       break; 
      } 
      return urlValue; 
     } 
       // If there are any parameters at eh end of the URL, they will be in location.search 
       // looking something like "?marker=3" 

       // skip the first character, we are not interested in the "?" 
     var query = location.search.substring(1); 

       // split the rest at each "&" character to give a list of "argname=value" pairs 
     var pairs = query.split("&"); 
     for (var i = 0; i < pairs.length; i++) { 
      // break each pair at the first "=" to obtain the argname and value 
      var pos = pairs[i].indexOf("="); 
      var argname = pairs[i].substring(0, pos).toLowerCase(); 
      var value = pairs[i].substring(pos + 1).toLowerCase(); 

      // process each possible argname - use unescape() if theres any chance of spaces 
      if (argname == "id") { id = unescape(value); } 
      if (argname == "marker") { index = parseFloat(value); } 
      if (argname == "lat") { lat = parseFloat(value); } 
      if (argname == "lng") { lng = parseFloat(value); } 
      if (argname == "zoom") { zoom = parseInt(value); } 
      if (argname == "type") { 
       // from the v3 documentation 8/24/2010 
       // HYBRID This map type displays a transparent layer of major streets on satellite images. 
       // ROADMAP This map type displays a normal street map. 
       // SATELLITE This map type displays satellite images. 
       // TERRAIN This map type displays maps with physical features such as terrain and vegetation. 
       if (value == "m") { maptype = google.maps.MapTypeId.ROADMAP; } 
       if (value == "k") { maptype = google.maps.MapTypeId.SATELLITE; } 
       if (value == "h") { maptype = google.maps.MapTypeId.HYBRID; } 
       if (value == "t") { maptype = google.maps.MapTypeId.TERRAIN; } 

      } 
     } 

       // this variable will collect the html which will eventually be placed in the side_bar 
     var side_bar_html = ""; 

       // arrays to hold copies of the markers and html used by the side_bar 
       // because the function closure trick doesnt work there 
     var gmarkers = []; 
     var idmarkers = []; 

       // global "map" variable 
     var map = null; 
     // A function to create the marker and set up the event window function 
     function createMarker(point, icon, label, html) { 
      var contentString = html; 
      var marker = new google.maps.Marker({ 
       position: point, 
       map: map, 
       title: label, 
       icon: icon, 
       zIndex: Math.round(point.lat() * -100000) << 5 
      }); 
      marker.id = id; 
      marker.index = gmarkers.length; 
      google.maps.event.addListener(marker, 'click', function() { 
       lastmarker = new Object; 
       lastmarker.id = marker.id; 
       lastmarker.index = marker.index; 
       infowindow.setContent(contentString); 
       infowindow.open(map, marker); 
      }); 
      // save the info we need to use later for the side_bar 
      gmarkers.push(marker); 
      idmarkers[id.toLowerCase()] = marker; 
      // add a line to the side_bar html 
      side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length - 1) + ')">' + id + '<\/a><br>'; 
     } 

       // This function picks up the click and opens the corresponding info window 
     function myclick(i) { 
      google.maps.event.trigger(gmarkers[i], "click"); 
     } 

     function makeLink() { 
      var mapinfo = "lat=" + map.getCenter().lat().toFixed(6) 
       + "&lng=" + map.getCenter().lng().toFixed(6) 
        + "&zoom=" + map.getZoom() 
         + "&type=" + MapTypeId2UrlValue(map.getMapTypeId()); 
      if (lastmarker) { 
       var a = "/about/map/default.aspx?id=" + lastmarker.id + "&" + mapinfo; 
       var b = "/about/map/default.aspx?marker=" + lastmarker.index + "&" + mapinfo; 
      } else { 
       var a = "/about/map/default.aspx?" + mapinfo; 
       var b = a; 
      } 

      document.getElementById("idlink").innerHTML = '<a href="' + a + '" id=url target=_new>- Link directly to this page by id</a> (id in xml file also entry &quot;name&quot; in sidebar menu)'; 
      document.getElementById("indexlink").innerHTML = '<a href="' + b + '" id=url target=_new>- Link directly to this page by index</a> (position in gmarkers array)'; 
     } 


     function initialize() { 
      // create the map 
      var myOptions = { 
       zoom: zoom, 
       center: new google.maps.LatLng(lat, lng), 
       mapTypeId: maptype, 
       mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU }, 
       navigationControl: true, 
       mapTypeId: google.maps.MapTypeId.HYBRID 
      }; 
      map = new google.maps.Map(document.getElementById("map_canvas"), 
       myOptions); 
      var stylesarray = [ 
       { 
        featureType: "poi", 
        elementType: "labels", 
        stylers: [ 
         { visibility: "off" } 
        ] 
       }, 
       { 
        featureType: "landscape.man_made", 
        elementType: "labels", 
        stylers: [ 
         { visibility: "off" } 
        ] 
       } 
      ]; 
      var options = map.setOptions({ styles: stylesarray }); 
      // Make the link the first time when the page opens 
      makeLink(); 

      // Make the link again whenever the map changes 
      google.maps.event.addListener(map, 'maptypeid_changed', makeLink); 
      google.maps.event.addListener(map, 'center_changed', makeLink); 
      google.maps.event.addListener(map, 'bounds_changed', makeLink); 
      google.maps.event.addListener(map, 'zoom_changed', makeLink); 

      google.maps.event.addListener(map, 'click', function() { 
       lastmarker = null; 
       makeLink(); 
       infowindow.close(); 
      }); 
      // Read the data from example.xml 
      downloadUrl("example.xml", function (doc) { 
       var xmlDoc = xmlParse(doc); 
       var markers = xmlDoc.documentElement.getElementsByTagName("marker"); 
       for (var i = 0; i < markers.length; i++) { 
        // obtain the attribues of each marker 
        var lat = parseFloat(markers[i].getAttribute("lat")); 
        var lng = parseFloat(markers[i].getAttribute("lng")); 
        var point = new google.maps.LatLng(lat, lng); 
        var html = markers[i].getAttribute("html"); 
        var label = markers[i].getAttribute("label"); 
        var icon = markers[i].getAttribute("icon"); 
        // create the marker 
        var marker = createMarker(point, icon, label, html); 
       } 
       // put the assembled side_bar_html contents into the side_bar div 
       document.getElementById("side_bar").innerHTML = side_bar_html; 
       // ========= If a parameter was passed, open the info window ========== 
       if (id) { 
        if (idmarkers[id]) { 
         google.maps.event.trigger(idmarkers[id], "click"); 
        } else { 
         alert("id " + id + " does not match any marker"); 
        } 
       } 
       if (index > -1) { 
        if (index < gmarkers.length) { 
         google.maps.event.trigger(gmarkers[index], "click"); 
        } else { 
         alert("marker " + index + " does not exist"); 
        } 
       } 
      }); 
     } 

     var infowindow = new google.maps.InfoWindow(
      { 
       size: new google.maps.Size(150, 50) 
      }); 

     google.maps.event.addDomListener(window, "load", initialize); 

Und hier ist ein Beispiel für meine XML-Formatierung

<marker lat="42.196175" 
     lng="-121.699224" 
     html="This is the information about 104" 
     iconimage="/about/map/images/104.png" 
     label="104" /> 

UPDATE: Ich habe eine Basiskarte arbeiten hatte. Was ich hier erreichen möchte, ist, dass ich den Markern IDs zuweisen kann, damit beim Laden der Seite von einer externen URL aus bestimmte Markierungen ausgelöst werden können. Es funktioniert auf der Beispielseite. Ich habe es tatsächlich paritally arbeiten auf meiner Seite (solange ich nicht versuchen, benutzerdefinierte Symbole zu integrieren).

Answer 1

Wie ich versuchte zu sagen. Sie haben eine globale:

var id; 

Und der einzige Ort scheint es gesetzt werden (oder nicht) ist aus der Abfragezeichenfolge. Doch wenn Sie durch Ihre XML-Eingabe durchlaufen, rufen Sie createMarker() auf, die diese globale ID verwendet.

function createMarker(point, icon, label, html) { 
     var contentString = html; 
     var marker = new google.maps.Marker({ 
      position: point, 
      map: map, 
      title: label, 
      icon: icon, 
      zIndex: Math.round(point.lat() * -100000) << 5 
     }); 
     marker.id = id; 


.... 

So erhält jeder Marker die gleiche ID. Wenn ich Sie wäre, würde ich die "ID" als ein anderes Attribut der XML-Datei hinzufügen und es von dort setzen und die Abfragezeichenfolgen-ID verwenden, um nur Ihre Auswahllogik auszuführen.