Wie bindet man InfoBoxen an Listener in for-Schleife mit Google Maps Utility-Bibliothek v3?

Question

Ich verwende die Google Maps Utility-Bibliothek v3, um mehrere anklickbare Markierungen auf einer Karte zu platzieren. Wenn ein Marker angeklickt wird, sollte es einen InfoBox öffnen, der für diesen spezifischen Marker einzigartig ist.

Ich bin in der Lage, die Markierungen auf der Karte mit einem 'click' Ereignis-Listener auf jeden von ihnen bevölkern zu bekommen, aber ich habe Probleme jeden spezifischen InfoBox an seinen jeweiligen Marker binden. Jedes Symbol, auf das ich klicke, öffnet die letzte InfoBox, die ich in der Schleife erstellt habe.

Hier ist mein Code:

<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js"></script> 

<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script> 


<script> 
     function initialize() { 
      var crimes = <?php echo json_encode($crimes); ?>; 
      var count = crimes.length; 

      var myCoordinates = new google.maps.LatLng(40.7127837, -74.00594130000002); 
      var myOptions = { 
           zoom: 14, 
           center: myCoordinates, 
           mapTypeId: google.maps.MapTypeId.ROADMAP 
          }; 

      var marker, infobox; 

      var map = new google.maps.Map(document.getElementById('map-canvas'), myOptions); 

      for(x = 0; x < count; x++) 
      { 
       var coordinates = new google.maps.LatLng(parseFloat(crimes[x].lat), parseFloat(crimes[x].lng)); 
       marker = new MarkerWithLabel({ 
        title: crimes[x].type, 
        clickable: true, 
        position: coordinates, 
        icon: ' ', 
        map: map, 
        labelContent: '<a type="button" class="btn btn-transparent fa fa-ambulance" style="color:rgba(144,15,15,0.8);"></a>', 
        labelClass: "labels" 
       }); 


       infobox = new InfoBox({ 
        content: crimes[x].details, 
        disableAutoPan: true, 
        isHidden: false, 
        maxWidth: 150, 
        pane: "floatPane", 
        enableEventPropagation: true, 
        pixelOffset: new google.maps.Size(-140, 0), 
        zIndex: null, 
        boxStyle: { 
         border: "2px solid black", 
         background: "#333", 
         color: "#FFF", 
         opacity: 0.85, 
         padding: ".5em 1em", 
         width: "200px", 
        }, 
        closeBoxMargin: "2px 2px 2px 2px", 
        closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif", 
        infoBoxClearance: new google.maps.Size(1, 1) 
       }); 


       listener = new google.maps.event.addListener(marker, 'click', function() { 
        infobox.open(map, this);//I think this is where I'm doing it wrong. How do I tie each specific infobox to its respective click listener? 
        map.panTo(coordinates); 
       }); 

       marker.setMap(map); 
      } 
     } 


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

</script> 

Weiß jemand, wo ich falsch werde oder wie ich das anders machen könnte?

Answer 1

habe ich einige Refactoring und es begann magisch richtig funktioniert:

<script> 
     function initialize() 
     { 
      var crimes = <?php echo json_encode($crimes); ?>; 
      var count = crimes.length; 

      var uaCampusCoordinates = new google.maps.LatLng(40.7127837, -74.00594130000002); 
      var myOptions = { 
           zoom: 14, 
           center: uaCampusCoordinates, 
           mapTypeId: google.maps.MapTypeId.ROADMAP 
          }; 

      var map = new google.maps.Map(document.getElementById('map-canvas'), myOptions); 

      for(x = 0; x < count; x++) 
      { 
       var coordinates = new google.maps.LatLng(parseFloat(crimes[x].lat), parseFloat(crimes[x].lng)); 
       var markerTitle = crimes[x].type; 
       var infoBoxContent = crimes[x].details; 

       marker = createMarker(map, coordinates, markerTitle); 
       infobox = createInfoBox(infoBoxContent, coordinates); 
       listener = createListener(map, marker, infobox, coordinates); 
      } 
     } 

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

     function createMarker(map, coordinates, markerTitle) 
     { 
      marker = new MarkerWithLabel({ 
       title: markerTitle, 
       clickable: true, 
       position: coordinates, 
       icon: ' ', 
       map: map, 
       labelContent: '<a type="button" class="btn btn-transparent fa fa-ambulance" style="color:rgba(144,15,15,0.8);"></a>', 
       labelClass: "labels" 
      }); 

      marker.setMap(map); 

      return marker; 
     } 

     function createInfoBox(infoBoxContent, coordinates) 
     { 
      //need to make sure this infobox doesnt get overwritten 
      infobox = new InfoBox({ 
       content: infoBoxContent, 
       position: coordinates, 
       disableAutoPan: true, 
       isHidden: false, 
       maxWidth: 150, 
       pane: "floatPane", 
       enableEventPropagation: true, 
       pixelOffset: new google.maps.Size(-140, 0), 
       //could do a counter for z index to make more relevant markers show up on top, just remember to sort according to relevancy first 
       zIndex: null, 
       boxStyle: { 
        border: "2px solid black", 
        background: "#333", 
        color: "#FFF", 
        opacity: 0.85, 
        padding: ".5em 1em", 
        width: "200px", 
       }, 
       closeBoxMargin: "2px 2px 2px 2px", 
       closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif", 
       infoBoxClearance: new google.maps.Size(1, 1) 
      }); 

      return infobox; 
     } 

     function createListener(map, marker, infobox, coordinates) 
     { 
      listener = marker.addListener('click', function() { 
       infobox.open(map, this); 
       map.panTo(coordinates); 
      }); 

      return listener; 
     } 

</script>