Wie erstellt man mehrere Infofenster in Google Map api

Ich erstelle 3 Marker in der Karte, deren Daten von einem JSON stammt. aber wenn ich auf eine Markierung klicken und versuchen, das Info-Fenster öffnen nur die letzte Markierung wird Antwort richtig .. bitte helfen Sie mir .... dies der Code ....Wie erstellt man mehrere Infofenster in Google Map 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>

Quelle

2013-05-17 Anonymous

Das Problem ist, wenn Sie versuchen, und weisen Sie dem Infowindow Inhalt innerhalb einer Schleife zu. Wenn Sie dann auf die Markierung klicken, kennt sie nur den Inhalt der letzten Iteration der Schleife. Sie brauchen stattdessen eine Schließung. Es gibt ein paar verschiedene Möglichkeiten, dies zu umgehen, ist hier, wie ich es normalerweise tun:

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); 
    }); 
}

Quelle

2013-05-17 10:05:28 duncan

thanx DUNCAN viel, seine adaequat –

Jede Idee, warum das Infofenster würde überhaupt nicht in diesem Beispiel Pop-up? Die Markierungen erscheinen alle korrekt auf meiner Karte, aber die Daten in 'infowindow.setContent (strDescription); 'werden nicht angezeigt, wenn ich auf einen Marker klicke. – gjw80

@ gjw80 Sie müssen wahrscheinlich Ihre eigene Frage stellen, damit wir Ihren ganzen Code sehen können, um das Problem zu diagnostizieren – duncan

Wie erstellt man mehrere Infofenster in Google Map api

Antwort

Verwandte Themen