Google Maps API V3, infoWindow를 클릭하여 엽니 다.

Question

Google Maps API에서 작업하고 있습니다.

내가 얻으려고하는 것은 InfoWindow가 표시되도록 트리거하는 하단의 html 버튼을 클릭하는 것입니다. 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> 

Answer 1

• 는 ("gmarkers")

var gmarkers = []; 

• 글로벌 배열을 생성을

  이

  은 내가 지금까지 가지고 무엇을 너의 마르을 밀어 라. 그것에 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