Jak utworzyć wiele infowindow na mapie google api

Tworzę 3 znaczniki na mapie, których dane pochodzą z json. ale gdy kliknę znacznik i spróbuję otworzyć okno informacyjne, tylko ostatni znacznik odpowie poprawnie. pomóż mi .... ten kod ...Jak utworzyć wiele infowindow na mapie google api

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> 
    <script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js" type="text/javascript"></script> 
</head> 
<body> 
    <script> 
     var json = [ 
      { 
       "title": "Stockholm", 
       "lat": 59.3, 
       "lng": 18.1, 
       "description": "Stockholm is the capital and the largest city of Sweden and constitutes the most populated urban area in Scandinavia with a population of 2.1 million in the metropolitan area (2010)" 
      }, 
      { 
       "title": "Oslo", 
       "lat": 59.9, 
       "lng": 10.8, 
       "description": "Oslo is a municipality, and the capital and most populous city of Norway with a metropolitan population of 1,442,318 (as of 2010)." 
      }, 
      { 
       "title": "Copenhagen", 
       "lat": 55.7, 
       "lng": 12.6, 
       "description": "Copenhagen is the capital of Denmark and its most populous city, with a metropolitan population of 1,931,467 (as of 1 January 2012)." 
      } 
     ] 
     var myCenter=new google.maps.LatLng(51.508742,-0.120850); 
     function initialize() 
     { 
      var mapProp = { 
       center:myCenter, 
       zoom:5, 
       mapTypeId:google.maps.MapTypeId.ROADMAP 
      }; 
      var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); 
      for (var i = 0, length = json.length; i < length; i++) { 
       var data=json[i]; 
       var latLng = new google.maps.LatLng(data.lat, data.lng); 
       // Creating a marker and putting it on the map 
       var marker = new google.maps.Marker({ 
        position: latLng, 
        map: map, 
        title: data.title 
       }); 
      } 
       var infowindow = new google.maps.InfoWindow({ 
        content: data.description 
       }); 

      google.maps.event.addListener(marker, 'click', function() {  
       infowindow.open(map,marker); 
      }); 

     } 
     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    <div id="googleMap" style="width:100%;height:100%;"></div> 
</body> 

</html>

Źródło

2013-05-17 Anonymous

Problem polega na tym, że spróbujesz i przypisz treść do infowindow w pętli. Następnie, gdy klikniesz znacznik, będzie on wiedział tylko o zawartości od ostatniej iteracji pętli. Potrzebujesz zamiast tego zamknięcia. Istnieje kilka różnych sposobów, aby sobie z tym poradzić, oto jak zwykle zrobić:

function initialize() { 
    var mapProp = { 
     center:myCenter, 
     zoom:5, 
     mapTypeId:google.maps.MapTypeId.ROADMAP 
    }; 
    var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); 

    var infowindow = new google.maps.InfoWindow({ 
     content: "" 
    }); 

    for (var i = 0, length = json.length; i < length; i++) { 
     var data=json[i]; 
     var latLng = new google.maps.LatLng(data.lat, data.lng); 
     // Creating a marker and putting it on the map 
     var marker = new google.maps.Marker({ 
      position: latLng, 
      map: map, 
      title: data.title 
     }); 

     bindInfoWindow(marker, map, infowindow, data.description); 
    } 
} 

function bindInfoWindow(marker, map, infowindow, description) { 
    marker.addListener('click', function() { 
     infowindow.setContent(description); 
     infowindow.open(map, this); 
    }); 
}

Źródło

2013-05-17 10:05:28 duncan

thanx Duncan dużo, jego działa poprawnie –

Wszelkie pojęcia, dlaczego infowindow nie pop w ogóle w tym przykładzie? Wszystkie znaczniki pojawiają się na mojej mapie, ale dane ustawione w "infowindow.setContent (strDescription);" nie są wyświetlane po kliknięciu znacznika. – gjw80

@ gjw80 prawdopodobnie musisz zadać własne pytanie, abyśmy mogli zobaczyć cały twój kod, aby pomóc zdiagnozować problem. – duncan

Jak utworzyć wiele infowindow na mapie google api

Odpowiedz

Powiązane problemy