Saya mencoba menambahkan beberapa penanda, masing-masing dengan jendela masuknya sendiri yang muncul saat diklik. Saya mengalami masalah saat membuat jendela masuk, ketika saya mencobanya, itu hanya muncul satu penanda tanpa jendela masuk.
Terima kasih, beri tahu saya jika Anda memerlukan informasi lebih lanjut
<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>
content
di dalam event listener Anda tidak ditentukan dalam fungsi itu.Jawaban:
Anda bisa menggunakan penutupan. Ubah saja kode Anda seperti ini:
google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ return function() { infowindow.setContent(content); infowindow.open(map,marker); }; })(marker,content,infowindow));
Inilah DEMO tersebut
sumber
infowindow.close()
tidak bekerja.Berikut adalah potongan kode yang pasti akan berfungsi. Anda dapat mengunjungi tautan di bawah ini untuk bekerja jsFiddle dan penjelasan secara rinci. Cara menemukan banyak alamat di peta google dengan zoom sempurna
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));
sumber
Tautan Sumber
Tautan Demo
Kode berikut akan menunjukkan Beberapa Penanda dengan InfoWindow . Anda dapat menghapus kode untuk menampilkan Info di Hover juga
var map; var InforObj = []; var centerCords = { lat: -25.344, lng: 131.036 }; var markersOnMap = [{ placeName: "Australia (Uluru)", LatLng: [{ lat: -25.344, lng: 131.036 }] }, { placeName: "Australia (Melbourne)", LatLng: [{ lat: -37.852086, lng: 504.985963 }] }, { placeName: "Australia (Canberra)", LatLng: [{ lat: -35.299085, lng: 509.109615 }] }, { placeName: "Australia (Gold Coast)", LatLng: [{ lat: -28.013044, lng: 513.425586 }] }, { placeName: "Australia (Perth)", LatLng: [{ lat: -31.951994, lng: 475.858081 }] } ]; window.onload = function () { initMap(); }; function addMarkerInfo() { for (var i = 0; i < markersOnMap.length; i++) { var contentString = '<div id="content"><h1>' + markersOnMap[i].placeName + '</h1><p>Lorem ipsum dolor sit amet, vix mutat posse suscipit id, vel ea tantas omittam detraxit.</p></div>'; const marker = new google.maps.Marker({ position: markersOnMap[i].LatLng[0], map: map }); const infowindow = new google.maps.InfoWindow({ content: contentString, maxWidth: 200 }); marker.addListener('click', function () { closeOtherInfo(); infowindow.open(marker.get('map'), marker); InforObj[0] = infowindow; }); // marker.addListener('mouseover', function () { // closeOtherInfo(); // infowindow.open(marker.get('map'), marker); // InforObj[0] = infowindow; // }); // marker.addListener('mouseout', function () { // closeOtherInfo(); // infowindow.close(); // InforObj[0] = infowindow; // }); } } function closeOtherInfo() { if (InforObj.length > 0) { InforObj[0].set("marker", null); InforObj[0].close(); InforObj.length = 0; } } function initMap() { map = new google.maps.Map(document.getElementById('map'), { zoom: 4, center: centerCords }); addMarkerInfo(); }
sumber
Jika Anda juga ingin mengikat penutupan jendela masuk ke suatu acara, cobalah sesuatu seperti ini
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));
sumber
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); }); } }
Kemudian pindah
var infowindow = new google.maps.InfoWindow()
keinitialize()
fungsi: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) }
sumber
google.maps.events.AddListener
seharusnyagoogle.maps.event.addListener
TypeError: map.infowindow is undefined
jika saya menyertakanvar infowindow = new google.maps.InfoWindow();
di dalam fungsi initialize () saya