谷歌地图API V3，infoWindow点击打开

我一直在试图让谷歌地图API工作。谷歌地图API V3，infoWindow点击打开

我想实现的是当你点击底部的html按钮时，他们触发infoWindow来显示。我有点不确定把infowindow的开放函数放在哪里，我看过其他的例子，但他们似乎没有在我下面的代码中工作。

这是我这么远：的jsfiddle：http://jsfiddle.net/7jJZK/4/

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


    // iniitial location + settings 
    var map; 
    function initialize() { 
     var myOptions = { 
      disableDefaultUI: true, 
      zoom: 16, 
      center: new google.maps.LatLng(45.376187, -0.525799), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); 
    } 


    // locations 
    initialize(); 
    var locations = [ 
     ['hello', 45.376187, -0.525799], 
     ['2', 56.376187, -0.525799], 
     ['3', 53.376187, -0.525799], 
     ['4', 54.176187, -0.525799], 
     ['5', 52.376187, -0.525799] 
    ]; 

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

    // panTo 
    $("#location-menu").on("click", "#location1", function() { 
     var laLatLng = new google.maps.LatLng(45.376187, -0.525799); 
     map.panTo(laLatLng); 
    }); 
    $("#location-menu").on("click", "#location2", function() { 
     var laLatLng = new google.maps.LatLng(56.376187, -0.525799); 
     map.panTo(laLatLng); 
    }); 
    $("#location-menu").on("click", "#location3", function() { 
     var laLatLng = new google.maps.LatLng(53.376187, -0.525799); 
     map.panTo(laLatLng); 
    }); 
    $("#location-menu").on("click", "#location4", function() { 
     var laLatLng = new google.maps.LatLng(54.176187, -0.525799); 
     map.panTo(laLatLng); 
    }); 
    $("#location-menu").on("click", "#location5", function() { 
     var laLatLng = new google.maps.LatLng(52.376187, -0.525799); 
     map.panTo(laLatLng); 
    }); 

}); 

<div id="map_canvas" style="width: 990px; height: 330px"></div> 
<div id="location-menu"> 
<input type="button" id="location1" value="location 1" /> 
<input type="button" id="location2" value="location 2"/> 
<input type="button" id="location3" value="location 3" /> 
<input type="button" id="location4" value="location 4"/> 
<input type="button" id="location5" value="location 5"/> 
</div>

来源

2014-04-03 lukeliasi

创建一个全局数组（ “gmarkers”）

var gmarkers = [];

推你的mar KERS进去

gmarkers.push(marker);

使用google.maps.event.trigger（ “点击”）来打开信息窗口

$("#location-menu").on("click", "#location1", function() { 
    google.maps.event.trigger(gmarkers[0], "click"); 
    var laLatLng = new google.maps.LatLng(45.376187, -0.525799); 
    map.panTo(laLatLng); 
});

working fiddle

来源

2014-04-03 21:57:38 geocodezip

谷歌地图API V3，infoWindow点击打开

回答

相关问题