I have multiple markers in an bounds. I want to animate or highlight particular marker in an onclick event from html.

Map code:

var map = new google.maps.Map(document.getElementById('map-canvas'), {
  mapTypeId: google.maps.MapTypeId.ROADMAP
});
list = [
    [51.503454,-0.119562],
    [51.499633,-0.124755]
];
var bounds = new google.maps.LatLngBounds();
list.forEach(function(data, index, array){

  var marker = new google.maps.Marker({
   position: new google.maps.LatLng(list[index][0],list[index][1]),
   map: map
  });

bounds.extend(marker.position);
});
map.fitBounds(bounds);

I want to animate a particular marker in an map from a html onclick.

<button onclick="showme(0)">London Eye</button>
<button onclick="showme(1)">Palace of Westminster</button>

Js:

showme = function(index){
   //How to animate a particular marker by an index?
}

I have multiple markers in an bounds. I want to animate or highlight particular marker in an onclick event from html.

Map code:

var map = new google.maps.Map(document.getElementById('map-canvas'), {
  mapTypeId: google.maps.MapTypeId.ROADMAP
});
list = [
    [51.503454,-0.119562],
    [51.499633,-0.124755]
];
var bounds = new google.maps.LatLngBounds();
list.forEach(function(data, index, array){

  var marker = new google.maps.Marker({
   position: new google.maps.LatLng(list[index][0],list[index][1]),
   map: map
  });

bounds.extend(marker.position);
});
map.fitBounds(bounds);

I want to animate a particular marker in an map from a html onclick.

<button onclick="showme(0)">London Eye</button>
<button onclick="showme(1)">Palace of Westminster</button>

Js:

showme = function(index){
   //How to animate a particular marker by an index?
}

• javascript
• google-maps
• google-maps-api-3
• google-maps-markers
• google-maps-api-2

1 Answer 1

1. keep references to the markers:

    var markers = []; // in the global scope
   

2. use that reference to set the animation (or the icon) of the marker.

    showme = function (index) {
        if (markers[index].getAnimation() != google.maps.Animation.BOUNCE) {
            markers[index].setAnimation(google.maps.Animation.BOUNCE);
        } else {
            markers[index].setAnimation(null);
        }
    }
   

working fiddle

code snippet:

var geocoder;
var map;
var markers = [];

function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  list = [
    [51.503454, -0.119562],
    [51.499633, -0.124755]
  ];
  var bounds = new google.maps.LatLngBounds();
  list.forEach(function(data, index, array) {

    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(list[index][0], list[index][1]),
      map: map
    });
    markers.push(marker);

    bounds.extend(marker.position);
  });
  map.fitBounds(bounds);

}
google.maps.event.addDomListener(window, "load", initialize);

showme = function(index) {
  if (markers[index].getAnimation() != google.maps.Animation.BOUNCE) {
    markers[index].setAnimation(google.maps.Animation.BOUNCE);
  } else {
    markers[index].setAnimation(null);
  }
}

html,
body,
#map-canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<button onclick="showme(0)">London Eye</button>
<button onclick="showme(1)">Palace of Westminster</button>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>