Вызвать событие click на маркере Карты Google, нажав на кнопку и отдельный файл JS с jQuery

я использую Google Map API v3 anf jQuery 1.11.0.

у меня есть карта Google в следующем div -

<div  id="googleMap" class="map_div"></div>

карта имеет 4 маркера, и это событие click добавляется таким образом в JS -

google.maps.event.addListener(marker, 'click',
    (function(marker, i)                        //Adding Click Function
    {
        return function()
        {
            //Add Your Customized Click Code Here
                alert(locations[i][3]);
            //End Add Your Customized Click Code Here
        }
    })(marker, i));

теперь у меня есть кнопка в другой части html (за пределами карты) вот так-

<button id="3">Click Me</button>

теперь я хочу добавить событие on click, которое вызовет событие click маркера карты с индексом 3.

так, я JavaScript в HTML, как это -

<script>
$(document).ready(function()
{
    $("#3").click(function(){
        google.maps.event.trigger(markers[3], 'click');
    });
});
</script>

но это не работает. Я думаю, что он не может выбрать маркер с помощью jQuery. Потому что я ранее выбрал карту с jQuery, как это -

google.maps.event.trigger($("#googleMap")[0], 'resize');

изменить размер карты.

Итак, может ли кто-нибудь помочь мне иметь скрипт селектора маркера Карты Google в jQuery.

заранее спасибо за помощь.

7
google-maps google-maps-api-3 html javascript jquery

1 ответов

Это то, что вы имеете в виду?? flow my examples: Я использую google.maps.event.trigger(markers[2], 'click');

и это сработало. Я что-то не так с вашим событием щелчком маркера. мои примеры

в JavaScript

    var tam = [16.3,108];
    var toado = [[16.5,108.5,"https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQxFoh469eOsZQkuPOLpZn3R6yyIExkZCxOxf4ywfeY3v330EwP3Q"],
                [16.3,108,"https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQxFoh469eOsZQkuPOLpZn3R6yyIExkZCxOxf4ywfeY3v330EwP3Q"],
                [16,107,"https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQxFoh469eOsZQkuPOLpZn3R6yyIExkZCxOxf4ywfeY3v330EwP3Q"],
                [23,105,"https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQxFoh469eOsZQkuPOLpZn3R6yyIExkZCxOxf4ywfeY3v330EwP3Q"]]; 
    var markers = [];

    function initialize() {
    var myOptions = {   
      center: new google.maps.LatLng(tam[0], tam[1]),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 


        for (var i = 0; i < toado.length; i++) {
            var beach = toado[i];
            urlimg =  beach[2];
            var image = new google.maps.MarkerImage(
                        urlimg,
                        null,
                        null,
                        null,
                        new google.maps.Size(15, 15));                              

            var myLatLng = new google.maps.LatLng(beach[0], beach[1]);

            markers[i] = new google.maps.Marker({
                position: myLatLng,
                map: map,
                icon: image,
                draggable : true,
                animation : google.maps.Animation.DROP
            });
            var ismove = true;
            (function(marker,i){
                google.maps.event.addListener(marker, 'click', function(){ 
                alert(toado[i][2]);
                //infowindow.open(map,this);
                }); 
            }(markers[i],i));

        }
        //setMarkers(map, beaches); 
    }
    window.onload = initialize;

/ / Html

  <body>
    <input type="button" id="btn-click" value="Click"/>
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
  <script>
    $(document).ready(function(){
        $("#btn-click").click(function(){
            google.maps.event.trigger(markers[2], 'click');
        });
    });
  </script>
12