Google map : PHP - Map marker bounce when clicking on button - google-maps

Question

Stuck on the map marker bounce.I am showing a multiple location using marker on map dynamically. When i click on event button(Map icon), on map same location bounce.
Sharing my code:
Here is my view
What i want that, When i am clicking on map icon in Activity same marker on map with lat-long will bounce.Same for all.
Here is my a href link for map
<i class="fa fa-map-marker" aria-hidden="true"></i>
// here i gt latitude and longitude
Google map script:
<script>
function initMap() {
window.map = new google.maps.Map(document.getElementById('googleMap'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
<?php
if($listactivity !="" && count($listactivity)>0){
foreach($listactivity as $location){ ?>
var location = new google.maps.LatLng({{ $location->latitude }}, {{ $location->longitude }});
var marker = new google.maps.Marker({
position: location,
map: map
});
bounds.extend(marker.position);
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
}));
<?php }} ?>
map.fitBounds(bounds);
var listener = google.maps.event.addListener(map, "idle", function () {
if (map.getZoom() > 16) map.setZoom(16);
google.maps.event.removeListener(listener);
});
}
</script>
How can i do it dynamically.

Answer 1

This is how I do:
// Pushing all markers to an object with an ID, after the end of your php for loop, with the current loop variable, in this case use for cycle instead of foreach
<script>
var markers = [];
function initMap() {
window.map = new google.maps.Map(document.getElementById('googleMap'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
<?php
if($listactivity !="" && count($listactivity)>0){
for ($i = 0; $i < count($listactivity); $i++){ ?>
var currentIndex = {{ $i }}
var location = new google.maps.LatLng({{ $listactivity[$i]->latitude }}, {{ $listactivity[$i]->longitude }});
var marker = new google.maps.Marker({
position: location,
map: map
});
markers.push({id: currentIndex, marker: marker});
bounds.extend(marker.position);
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
}));
<?php }} ?>
map.fitBounds(bounds);
var listener = google.maps.event.addListener(map, "idle", function () {
if (map.getZoom() > 16) map.setZoom(16);
google.maps.event.removeListener(listener);
});
}
// Setting up click event
$('.markericon').on('click', function () {
var markerId = $(this).attr('data-id');
var result = $.grep(markers, function (e) {
if (e.id == markerId) {
return e;
}
});
// Trigger marker click event, or bounce effect.
google.maps.event.trigger(result[0].marker, 'click');
});
</script>
// Adding a markericon class, and storing the location's marker id in a data attribute
// e.g <a href="#" class="markericon" data-id="1">