Menu
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.
275
addListener(marker, 'click', (function(marker, i) { return function() { infowindow. setContent(locations[i][0]); infowindow. open(map, marker); } })(marker, i)); iconCounter++; } function AutoCenter() { // Create a new viewpoint bound var bounds = new google. maps.
To add an event, head to Google Maps on Android, tap on Contribute >Events > Add a public event. You can add an event name, tag the location, and add the time and date of the event as well. There's an option to add an image, write more event details, and add description as well.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
