[英]Google Map info window not loading
I have used google-maps Api V3 map and markers are loading perfectly but the info window is not loading, Neither it doesn't shows any error, when i place an alert in the info-window it doesn't show any alert but the data is loaded into the map Let me know where i have done the mistake, Is this the correct way of loading the map using the function which i have written for Thanks in advance 我使用过Google-maps Api V3地图,标记已完美加载,但信息窗口未加载,也未显示任何错误,当我在信息窗口中放置警报时,它未显示任何警报,但数据已加载到地图中让我知道我在哪里做错了,这是使用我事先写的函数加载地图的正确方法吗?
function initMap() {
// Create the map.
// var map;
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById('mapView'), {
zoom: 6,
center: {lat: 20.5937, lng: 78.9629},
mapTypeId: 'roadmap'
});
$.getJSON('data.php', function(data){
// alert(data);
// alert(JSON.stringify(data));
var marker = [];
var infoWindow = [];
var contentString = [];
var bounds = new google.maps.LatLngBounds();
for(var sd in data){
contentString[sd] = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">'+data[sd].hqname+'</h1>'+
'<div id="bodyContent">'+
'<p><b>Division: </b>'+data[sd].division+'</p>'+
'<p><b>From: </b>'+data[sd].fromareaname+'</p>'+
'<p><b>To: </b>'+data[sd].toareaname+'</p>'+
'<p><b>Category: </b>'+data[sd].ta+'</p>'+
'<p><b>Distance: </b>'+data[sd].dist+'</p>'+
'<p><b>Calculated Distance: </b>'+data[sd].distance+'</p>'+
'</div>'+
'</div>';
infoWindow[sd] = new google.maps.InfoWindow({
content: contentString[sd]
// alert(contentString)
});
if(data[sd].type == 1){
marker[sd] = new google.maps.Marker({
icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
position: {lat : parseFloat(data[sd].center.latitude),lng : parseFloat(data[sd].center.longitude)},
map: map,
infowindow: infowindow[sd]
});
}
if(data[sd].type == 2){
marker[sd] = new google.maps.Marker({
icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
position: {lat : parseFloat(data[sd].center.latitude),lng : parseFloat(data[sd].center.longitude)},
map: map,
infowindow: infowindow[sd]
});
}
if(data[sd].type == 3){
marker[sd] = new google.maps.Marker({
icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
position: {lat : parseFloat(data[sd].center.latitude),lng : parseFloat(data[sd].center.longitude)},
map: map,
infowindow: infowindow[sd]
});
}
bounds.extend(marker[sd].position);
}
map.fitBounds(bounds);
});
}
Edited Code 编辑代码
function initMap() {
// Create the map.
<!-- // var map; -->
//alert("map ");
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById('mapView'), {
zoom: 6,
center: {lat: 20.5937, lng: 78.9629},
mapTypeId: 'roadmap'
});
$.getJSON('data.php', function(data){
// alert(data);
// alert(JSON.stringify(data));
var marker = [];
var infowindow = [];
var contentString = [];
var bounds = new google.maps.LatLngBounds();
for(var sd in data){
// alert(sd);
contentString[sd] = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">'+data[sd].shopname+'</h1>'+
'<div id="bodyContent">'+
'<p><b>Subarea: </b>'+data[sd].subarea+'</p>'+
'<p><b>Mobile: </b>'+data[sd].mobile+'</p>'+
'<p><b>Category: </b>'+data[sd].category+'</p>'+
'</div>'+
'</div>';
infowindow[sd] = new google.maps.InfoWindow({
content: contentString[sd]
});
if(data[sd].type == 1){
marker[sd] = new google.maps.Marker({
icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
position: {lat : parseFloat(data[sd].center.latitude),lng : parseFloat(data[sd].center.longitude)},
map: map,
infowindow: infowindow[sd]
});
}
if(data[sd].type == 2){
marker[sd] = new google.maps.Marker({
icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
position: {lat : parseFloat(data[sd].center.latitude),lng : parseFloat(data[sd].center.longitude)},
map: map,
infowindow: infowindow[sd]
});
}
if(data[sd].type == 3){
marker[sd] = new google.maps.Marker({
icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
position: {lat : parseFloat(data[sd].center.latitude),lng : parseFloat(data[sd].center.longitude)},
map: map,
infowindow: infowindow[sd]
});
}
bounds.extend(marker[sd].position);
google.maps.event.addListener(marker[sd], 'click', function() { infowindow[sd].open(map,marker[sd]); });
}
map.fitBounds(bounds);
});
}
Similar question: Google Maps JS API v3 - Simple Multiple Marker Example 相似的问题: Google Maps JS API v3-简单多个标记示例
You need function closure on sd
in the marker click listener. 您需要在标记Click监听器中的
sd
上关闭函数。
example from the documentation (using a named function) 文档中的示例(使用命名函数)
Using an Immediately Invoked Function Expression (IIEF) : 使用立即调用的函数表达式(IIEF) :
google.maps.event.addListener(marker[sd], 'click', (function(sd) {
return function() {
infowindow[sd].open(map, marker[sd]);
}}(sd)));
code snippet: 代码段:
function initMap() { var infoWindow = new google.maps.InfoWindow(); var map = new google.maps.Map(document.getElementById('mapView'), { zoom: 6, center: { lat: 20.5937, lng: 78.9629 }, mapTypeId: 'roadmap' }); google.maps.event.addListener(map, "click", function(evt) { console.log(evt.latLng.toUrlValue(6)); }) // $.getJSON('data.php', function(data){ var marker = []; var infowindow = []; var contentString = []; var bounds = new google.maps.LatLngBounds(); for (var sd in data) { // alert(sd); contentString[sd] = '<div id="content">' + '<div id="siteNotice">' + '</div>' + '<h1 id="firstHeading" class="firstHeading">' + data[sd].shopname + '</h1>' + '<div id="bodyContent">' + '<p><b>Subarea: </b>' + data[sd].subarea + '</p>' + '<p><b>Mobile: </b>' + data[sd].mobile + '</p>' + '<p><b>Category: </b>' + data[sd].category + '</p>' + '</div>' + '</div>'; infowindow[sd] = new google.maps.InfoWindow({ content: contentString[sd] }); if (data[sd].type == 1) { marker[sd] = new google.maps.Marker({ icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png', position: { lat: parseFloat(data[sd].center.latitude), lng: parseFloat(data[sd].center.longitude) }, map: map, infowindow: infowindow[sd] }); } if (data[sd].type == 2) { marker[sd] = new google.maps.Marker({ icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png', position: { lat: parseFloat(data[sd].center.latitude), lng: parseFloat(data[sd].center.longitude) }, map: map, infowindow: infowindow[sd] }); } if (data[sd].type == 3) { marker[sd] = new google.maps.Marker({ icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png', position: { lat: parseFloat(data[sd].center.latitude), lng: parseFloat(data[sd].center.longitude) }, map: map, infowindow: infowindow[sd] }); } bounds.extend(marker[sd].position); google.maps.event.addListener(marker[sd], 'click', (function(sd) { return function() { infowindow[sd].open(map, marker[sd]); } }(sd))); } map.fitBounds(bounds); // }); } google.maps.event.addDomListener(window, "load", initMap); // test data var data = [{ shopname: "fred", subarea: "area 1", mobile: "yes", category: "cat 1", center: { latitude: 23.644524, longitude: 74.487305 }, type: 1 }, { shopname: "george", subarea: "area 2", mobile: "yes", category: "cat 2", center: { latitude: 21.943046, longitude: 81.936035 }, type: 2 }, { shopname: "frank", subarea: "area 3", mobile: "yes", category: "cat 3", center: { latitude: 20.179724, longitude: 77.189941 }, type: 3 } ];
html, body, #mapView { height: 100%; width: 100%; margin: 0px; padding: 0px }
<script src="https://maps.googleapis.com/maps/api/js"></script> <div id="mapView"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.