Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to Google Maps marker blink for time interval?

I am new at Google Maps technologies.I want to blink or bounce google maps marker for a time interval for example one minute.Is it possible to do it? Could you please show me a way to succeed it?

like image 718
user6493966 Avatar asked Feb 07 '23 07:02

user6493966


1 Answers

The google.maps.Marker class supports setAnimation(animation:Animation) method, which according to the docs:

Start an animation. Any ongoing animation will be cancelled. Currently supported animations are: BOUNCE, DROP. Passing in null will cause any animation to stop.

So you can just call

marker.setAnimation(google.maps.Animation.BOUNCE);

to start bouncing animation and

marker.setAnimation(null);

to stop it. Working example:

function initMap() {
        var myLatLng = {lat: -25.363, lng: 131.044};

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: myLatLng
        });

        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: 'Hello World!'
        });
  
        marker.setAnimation(google.maps.Animation.BOUNCE);
      }
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("maps", "3",{other_params:"sensor=false"});
</script>
<body onload="initMap();" style="margin:0px; padding:0px;" >
	<div id="map" style="height:400px; width:500px;"></div>
</body>

Blinking animation is not supported out of the box, but you can create it yourself, the example is already included in other answers.

like image 156
Matej P. Avatar answered Feb 12 '23 14:02

Matej P.