Google将多个标记infowindow从外部链接打开 [英] Google map multiple markers infowindow open from external link

问题描述

创建Google标记图并在地图旁边列出地点名称 - 其工作正常

演示

目标 -
如何打开相应的 infowindow 当我点击列出每个位置的名称？

代码

  var markers = [
 ['Bondi Beach'，-33.890542,151.274856]，
 ['Coogee Beach'，-33.923036,151.259052]，
 ['Cronulla Beach'， 
 ['Manly Beach'，-33.80010128657071,151.28747820854187]，
 ['Maroubra Beach'，-33.950198,151.259302] 
]; 
 
函数initializeMaps（）{
 var myOptions = {
 mapTypeId：google.maps.MapTypeId.ROADMAP，
 mapTypeControl：false 
}; 
 var map = new google.maps.Map（document.getElementById（map_canvas），myOptions）; 
 var infowindow = new google.maps.InfoWindow（）; 
 var marker，i; 
 var bounds = new google.maps.LatLngBounds（）; （i = 0; i  var pos = new google.maps.LatLng（markers [i] [1]，markers [i]）的
 
， [2]）; 
 bounds.extend（pos）; 
 marker = new google.maps.Marker（{
 position：pos，
 map：map 
}）; 
 google.maps.event.addListener（marker，'click'，（function（marker，i）{
 return function（）{
 infowindow.setContent（markers [i] [0] ）; 
 infowindow.open（map，marker）; 
} 
}）（marker，i））; 
} 
 map.fitBounds（bounds）; 
 
 $ b initializeMaps（）
  

解决方案在创建标记的循环中，创建链接并附加触发标记的点击侦听器 - 单击：

 （function（marker）{
 google.maps.event 
 .addDomListener（$（'< li />'）
 .text（markers [i] [0 ]）
 .appendTo（'＃list'）[0]，
'click'，
 function（）{
 google.maps.event.trigger（marker，'click '，{}）; 
}）; 
}）（marker）; 
  

演示： http://jsfiddle.net/doktormolle/HNd6H/

Created a Google markers map and also listed locations name next to map - Its working fine

Demo

Target- How can I open corresponding infowindow when I click on listed each location's name ?

Code

var markers = [
    ['Bondi Beach', -33.890542, 151.274856],
    ['Coogee Beach', -33.923036, 151.259052],
    ['Cronulla Beach', -34.028249, 151.157507],
    ['Manly Beach', -33.80010128657071, 151.28747820854187],
    ['Maroubra Beach', -33.950198, 151.259302]
];

function initializeMaps() {
    var myOptions = {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
    var infowindow = new google.maps.InfoWindow(); 
    var marker, i;
    var bounds = new google.maps.LatLngBounds();

    for (i = 0; i < markers.length; i++) { 
        var pos = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(pos);
        marker = new google.maps.Marker({
            position: pos,
            map: map
        });
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(markers[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }
    map.fitBounds(bounds);

}
initializeMaps()

解决方案

In the loop where you create the markers also create the links and attach a click-listener that triggers the marker-click:

(function(marker){
            google.maps.event
              .addDomListener($('<li/>')
                              .text(markers[i][0])
                               .appendTo('#list')[0],
                              'click',
                               function(){
                                google.maps.event.trigger(marker,'click',{});
                               });
 })(marker);

Demo: http://jsfiddle.net/doktormolle/HNd6H/

这篇关于Google将多个标记infowindow从外部链接打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！