Geek Answers Handbook

Run the click event on the Google Map market by clicking on the button and a separate JS file with jQuery

I am using the Google Maps 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 this click event is added 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 ( external map ), like this -

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

Now I want to add an on click event that triggers a map marker click event with index 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 does not work. I think he cannot select a marker using jQuery. Since I previously selected a map using jQuery, for example:

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

To resize the map.

So can anyone help me have a google map marker script selector in jQuery .

Thanks in advance for your help.

+7
javascript jquery html google-maps google-maps-api-3
source share
1 answer

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

and it worked. I am mistaken from your click 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>
+11
source share

More articles:


All Articles