Google Maps API Multiple Markers z Infowindows

Próbuję dodać wiele znaczników, każdy z własnym infomatem, który pojawia się po kliknięciu. Mam kłopot z uzyskaniem infowindów, kiedy spróbuję albo pokazuje tylko jeden znacznik bez infomatu.Google Maps API Multiple Markers z Infowindows

Dzięki, daj mi znać, jeśli potrzebujesz trochę informacji

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
<style type="text/css"> 
html { 
    height: 100% 
} 

body { 
    height: 100%; 
    margin: 0; 
    padding: 0 
} 

#map_canvas { 
    height: 100% 
} 
</style> 
<script type="text/javascript" 
    src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB1tbIAqN0XqcgTR1-FxYoVTVq6Is6lD98&sensor=false"> 
</script> 
<script type="text/javascript"> 

var locations = [ 
    ['loan 1', 33.890542, 151.274856, 'address 1'], 
    ['loan 2', 33.923036, 151.259052, 'address 2'], 
    ['loan 3', 34.028249, 151.157507, 'address 3'], 
    ['loan 4', 33.80010128657071, 151.28747820854187, 'address 4'], 
    ['loan 5', 33.950198, 151.259302, 'address 5'] 
]; 

function initialize() { 

    var myOptions = { 
     center: new google.maps.LatLng(33.890542, 151.274856), 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 

    }; 
    var map = new google.maps.Map(document.getElementById("default"), 
     myOptions); 

    setMarkers(map, locations) 
} 


function setMarkers(map, locations) { 

    var marker, i 
    for (i = 0; i < locations.length; i++) { 

     var loan = locations[i][0] 
     var lat = locations[i][1] 
     var long = locations[i][2] 
     var add = locations[i][3] 

     latlngset = new google.maps.LatLng(lat, long); 

     var marker = new google.maps.Marker({ 
      map: map, title: loan, position: latlngset 
     }); 
     map.setCenter(marker.getPosition()) 

     var content = "Loan Number: " + loan + '</h3>' + "Address: " + add 

     var infowindow = new google.maps.InfoWindow() 

     google.maps.AddListener(marker, 'click', function (map, marker) { 
      infowindow.setContent(content) 
      infowindow.open(map, marker) 
     }); 
    } 
} 


</script> 
</head> 
<body onload="initialize()"> 
<div id="default" style="width:100%; height:100%"></div> 
</body> 
</html>

Źródło

2012-06-19 StackTraceYo

używać tylko jednej infowindow który jest tworzony przed znacznikami. Wtedy zdarzenie kliknięcia dla każdego znacznika będzie działało poprawnie. Zmienna 'content' wewnątrz detektora zdarzeń nie jest zdefiniowana w ramach tej funkcji. – js1568

dziękuję za dużo informacji – StackTraceYo

Blog ze szczegółami: http://sforsuresh.in/display-google-map-locations-using-latitude-longitude/ –

163

Można użyć zamknięcia. Wystarczy zmodyfikować kod tak:

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

Oto DEMO

Źródło

2012-06-19 18:09:23 Engineer

dziękuję, naprawdę to doceniam – StackTraceYo

Mam to działa, ale jak mogę zmienić kod tak, że kiedy kliknę na inny znacznik otwiera infomat, który zastępuje wcześniej otwierane okno informacyjne, zamiast ciągle otwierać kolejne okna informacyjne za każdym razem, gdy kliknę na inny znacznik? – railsy

+11

zaktualizowano wersję demonstracyjną za pomocą kilku rozwiązań - http://jsfiddle.net/ZFvDV/ –

-1

function setMarkers(map,locations){ 

for (var i = 0; i < locations.length; i++) 
{ 

var loan = locations[i][0]; 
var lat = locations[i][1]; 
var long = locations[i][2]; 
var add = locations[i][3]; 

latlngset = new google.maps.LatLng(lat, long); 

var marker = new google.maps.Marker({ 
      map: map, title: loan , position: latlngset 
}); 
map.setCenter(marker.getPosition()); 


marker.content = "<h3>Loan Number: " + loan + '</h3>' + "Address: " + add; 


google.maps.events.addListener(marker,'click', function(map,marker){ 
      map.infowindow.setContent(marker.content); 
      map.infowindow.open(map,marker); 

}); 

} 
}

Następnie przesuń var infowindow = new google.maps.InfoWindow() do initialize() funkcję:

function initialize() { 

    var myOptions = { 
     center: new google.maps.LatLng(33.890542, 151.274856), 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 

    }; 
    var map = new google.maps.Map(document.getElementById("default"), 
     myOptions); 
    map.infowindow = new google.maps.InfoWindow(); 

    setMarkers(map,locations) 

    }

Źródło

2012-06-19 18:11:33 js1568

"google.maps.events.AddListener" powinno być 'google.maps.event.addListener' –

Otrzymuję' TypeError: map .infowindow jest niezdefiniowana' jeśli dołączę 'var infowindow = new google.maps.InfoWindow();' wewnątrz mojej funkcji initialize() – invot

Oto fragment kodu, który będzie działał na pewno . Możesz odwiedzić poniżej link do pracy jsFiddle i wyjaśnienia w szczegółach. How to locate multiple addresses on google maps with perfect zoom

var infowindow = new google.maps.InfoWindow(); 
google.maps.event.addListener(marker, 'mouseover', (function(marker) { 
      return function() { 
       var content = address; 
       infowindow.setContent(content); 
       infowindow.open(map, marker); 
      } 
     })(marker));

Źródło

2014-03-09 17:28:04 evaipar

Jeśli też chcesz związać zamykanie infowindow do jakiegoś zdarzenia, spróbować czegoś jak ten

google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
    return function() { 
     infowindow.setContent(content); 
     infowindow.open(map,marker); 
     windows.push(infowindow) 
     google.maps.event.addListener(map,'click', function(){ 
      infowindow.close(); 
     }); 
    }; 
})(marker,content,infowindow));

Źródło

2016-07-18 14:32:53

Google Maps API Multiple Markers z Infowindows

Odpowiedz

Powiązane problemy