Google maps yardımcı kitaplığı v3 ile döngü için dinleyicilerin tıklatılması için InfoBox'lar nasıl bağlanır?

Question

Haritaya birden çok tıklanabilir işaretçi koymak için Google Maps Utility Library v3 kullanıyorum. Bir Marker tıklandığında, ilgili Marker'a özgü bir InfoBox açmalıdır.

onlardan her birine bir 'click' olay dinleyicisiyle harita üzerinde doldurulan işaretleri almak mümkün ama sorun kendi ilgili Marker için her özel InfoBox bağlama yaşıyorum. Tıkladığım her simge, döngüde oluşturduğum son InfoBox'u açar. Ben yanlış gidiyorum

<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> 

bilen var mı yoksa farklı nasıl yapabileceğini: Burada

benim kodudur?

Answer 1

Ben bazı üstlenmeden yaptım ve sihirli doğru çalışmaya başladı:

<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>