How to Trigger Google Maps Marker From Outside of Map
10,078
Solution 1
Ref: How to trigger the onclick event of a marker on a Google Maps V3?
//using the index provided by jquery.each()
$('.google-map__trigger-item').each(function(i){
$(this).on('click', function(){
google.maps.event.trigger(markers[i], 'click');
});
});
or, if they are in no particular order
//using your id data attribute
$('.google-map__trigger-item').each(function(){
$(this).on('click', function(){
var id = parseInt($(this).data('id').split('-')[1]) -1;
google.maps.event.trigger(markers[id], 'click');
});
});
UPDATE 2019: Here's a vanilla version with some ES6 syntactic sugar.
[...document.querySelectorAll('.google-map__trigger-item')].map((el, i) => {
el.addEventListener('click', () => {
google.maps.event.trigger(markers[i], 'click');
});
});
Solution 2
Like so (no external library required):
HTML
<ul class="google-map__trigger">
<li data-id="marker-1" class="google-map__trigger-item">
<a onclick="OpenInfowindowForMarker(1)">Trigger Marker 1</a></li>
Javascript
function OpenInfowindowForMarker(index) {
google.maps.event.trigger(markers[index], 'click');
}
Related videos on Youtube
Comments
-
Axel Ferdinand over 1 year
I have this HTML:
<ul class="google-map__trigger"> <li data-id="marker-1" class="google-map__trigger-item">Trigger Marker 1</li> <li data-id="marker-2" class="google-map__trigger-item">Trigger Marker 2</li> </ul> <div id="google-map" class="google-map"></div>
I have this JS:
// Infowindow, latitude, longitude var locations = [ ['<div class="google-map__infowindow"><h4>Lervig Brygge</h4><p>Her ligger Lervig Brygge.</p></div>', 58.96746,5.765269], ['<div class="google-map__infowindow"><h4>Regn</h4><p>I denne rundkjøringen regner det. Det regner alltid i denne rundkjøringen. Det er litt av et naturfenomen!</p></div>', 58.96579,5.759518] ]; // Icons are located in this folder var iconURLPrefix = '/_themes/prototype/graphics/icons/'; // Icons are named var icons = [ iconURLPrefix + 'location.svg', iconURLPrefix + 'weather-rain.svg', ] // Map options var map = new google.maps.Map(document.getElementById('google-map'), { zoom: 16, center: new google.maps.LatLng(58.966222, 5.762930), mapTypeControl: false, streetViewControl: false, panControl: false, scrollwheel: false, navigationControl: false, scaleControl: false, zoomControlOptions: { position: google.maps.ControlPosition.LEFT_BOTTOM } }); var infowindow = new google.maps.InfoWindow({ maxWidth: 200 }); var marker; var markers = new Array(); var iconCounter = 0; // Add the markers and infowindows to the map for (var i = 0; i < locations.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map, icon : icons[iconCounter] }); markers.push(marker); google.maps.event.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.LatLngBounds(); // Go through each... $.each(markers, function (index, marker) { bounds.extend(marker.position); }); // Fit these bounds to the map map.fitBounds(bounds); } AutoCenter();
How can I trigger my map markers from outside of the Google Map, using the list in the HTML above? I have seen different ways of solving this, but I haven't managed to make it work with my code...
Appreciate any help!
-
geocodezip over 10 yearsThis solution requires JQuery.
-
Axel Ferdinand over 10 yearsThank you so much! Works like a charm :)