Google Maps API Nhiều Điểm đánh dấu với Infowindows

Tôi đang cố gắng thêm nhiều điểm đánh dấu với mỗi điểm đánh dấu riêng của nó xuất hiện khi được nhấp vào. Tôi đang gặp rắc rối với việc nhận được infowindows sắp tới, khi tôi thử nó hoặc chỉ hiển thị một điểm đánh dấu mà không có một infowindow.Google Maps API Nhiều Điểm đánh dấu với Infowindows

Cảm ơn, cho tôi biết nếu bạn cần một số thông tin

<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>

Nguồn

2012-06-19 StackTraceYo

này chỉ sử dụng một infowindow được tạo ra trước khi đánh dấu. Sau đó, sự kiện nhấp chuột của bạn cho mỗi điểm đánh dấu sẽ hoạt động chính xác. Biến 'nội dung' bên trong trình lắng nghe sự kiện của bạn không được định nghĩa trong hàm đó. – js1568

cảm ơn rất nhiều người đàn ông – StackTraceYo

Một blog chi tiết: http://sforsuresh.in/display-google-map-locations-using-latitude-longitude/ –

163

Bạn có thể sử dụng một đóng cửa. Chỉ cần thay đổi mã của bạn như thế này:

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

Đây là DEMO

Nguồn

2012-06-19 18:09:23 Engineer

cảm ơn, tôi thực sự đánh giá cao nó – StackTraceYo

Tôi đã làm việc này nhưng làm cách nào để thay đổi mã để khi tôi nhấp vào đánh dấu khác nó sẽ mở ra một infowindow mà thay thế infowindow mà trước đó đã được mở, thay vì liên tục mở infowindows nhiều hơn mỗi khi tôi bấm vào một điểm đánh dấu? – railsy

+11

bản trình diễn được cập nhật bằng một số giải pháp - 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); 

}); 

} 
}

Sau đó di chuyển var infowindow = new google.maps.InfoWindow() đến initialize() chức năng:

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) 

    }

Nguồn

2012-06-19 18:11:33 js1568

'google.maps.events.AddListener' phải là' google.maps.event.addListener' –

Tôi nhận được 'TypeError: map .infowindow là undefined' nếu tôi bao gồm 'var infowindow = new google.maps.InfoWindow();' bên trong hàm initialize() của tôi – invot

Dưới đây là đoạn mã mà sẽ làm việc cho chắc chắn . Bạn có thể truy cập dưới đây link để làm việc jsFiddle và giải thích chi tiết. 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));

Nguồn

2014-03-09 17:28:04 evaipar

Nếu bạn cũng muốn để ràng buộc đóng cửa của infowindow tới một số sự kiện, hãy thử một cái gì đó giống như

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

Nguồn

2016-07-18 14:32:53

Google Maps API Nhiều Điểm đánh dấu với Infowindows

Trả lời

Các vấn đề liên quan