Google Maps API V3，infoWindow点击打开 [英] Google Maps API V3, infoWindow open on click

问题描述

我一直在尝试在Google Maps API上开展工作。

我试图实现的是当你点击底部的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; 
函数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）; 
 } 
 
 $ b //位置
初始化（）; 
 var locations = [
 ['hello'，45.376187，-0.525799]，
 ['2'，56.376187，-0.525799]，
 ['3'，53.376187，-0.525799]，
 ['4'，54.176187，-0.5 25799]，
 ['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]，地点[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））; 
 $ pan 
 $（＃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_canvasstyle =width：990px​​; height：330px>< / div> 
< div id =location-menu> 
< input type =buttonid =location1value =location 1/> 
< input type =buttonid =location2value =location 2/> 
< input type =buttonid =location3value =location 3/> 
< input type =buttonid =location4value =location 4/> 
< input type =buttonid =location5value =location 5/> 
< / div> 
  

解决方案

• 创建全局数组（gmarkkers）

  var gmarkers = []; 
  

• / li>
  

  gmarkers.push（marker）; 
  

• 使用google。 maps.event.trigger（，click）打开infowindow

    $（＃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）; 
  }）; 
    

工作小提琴

I have been trying to get something working on the Google Maps API.

What I am trying to achieve is when you click on the html buttons at the bottom they trigger the infoWindow to display. I am a bit unsure where to put the infowindow open function, I have looked at other examples but they didn't seem to work in the code I have got below.

This is what I have got so far: 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>

解决方案

• create a global array ("gmarkers")

   var gmarkers = [];

• push your markers into it

   gmarkers.push(marker);

• use google.maps.event.trigger(, "click") to open the infowindow

  $("#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

这篇关于Google Maps API V3，infoWindow点击打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！