I am using Google Map API v3 anf jQuery 1.11.0.

I have a Google Map in the following div-

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

The map has 4 markers and it's click event is added by this way in 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));

Now I have a button in another part of the html (outside map) like this-

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

Now I want to add a on click event which will trigger click event of a map marker with index of 3.

So, I have JavaScript in HTML like this-

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

But it is not working. I think it can't select the marker with jQuery. Because I have previously selected the map with jQuery like this-

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

To re-size the map.

So, can anyone help me to have the Selector script of a Google Map Marker in jQuery.

Thanks in advance for helping.

I am using Google Map API v3 anf jQuery 1.11.0.

I have a Google Map in the following div-

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

The map has 4 markers and it's click event is added by this way in 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));

Now I have a button in another part of the html (outside map) like this-

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

Now I want to add a on click event which will trigger click event of a map marker with index of 3.

So, I have JavaScript in HTML like this-

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

But it is not working. I think it can't select the marker with jQuery. Because I have previously selected the map with jQuery like this-

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

To re-size the map.

So, can anyone help me to have the Selector script of a Google Map Marker in jQuery.

Thanks in advance for helping.

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

1 Answer 1

It's what you mean?? flow my examples: I have use google.maps.event.trigger(markers[2], 'click');

and it worked. I thing wrong from your event click of marker. My examples

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>