Adding Marker On Map Click and Marker Animations











Introduction

We have seen how to add a marker on Google Maps in the previous post. Now in this post, we will see how we can add marker animations. We will see different examples of how to:
  • adding marker on the Map click
  • adding animation to a marker
  • adding listeners on the marker

Adding Marker On Map Click

In this example, we will see how to add the listener to the Google Map. We will add a click event listener with the map using the addListener() method. The arguments of this method are: first is the reference of the map on which this listener needs to be attached, a second argument is an event such as 'click' here and the third argument is the callback function which needs to be executed when the event gets fired. We will get the latitude and longitude from the event object which gets fired on click. If we console.log(event) then it looks the below. It has latLng object that contains both latitude and longitude. We will pass this object to the addMarker() function which will execute on the user click on the map. 



Now we will see an example where we will add click event on Google Map and markers will be added on user click. The syntax for adding the event listener on the map is as follows:

  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng, map);
  });

Now we will see the full example where marker gets added on user click:

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>Marker On Map</title>
  <style>
    #Gmap {
      height: 600px;
      width: 100%;
    }

    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <div id="Gmap"></div>
  <script>
    function initMap() {
      var mapOptions = {
        streetViewControl: false,
        center: { lat: -45.67677, lng: -90.253456 },
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.HYBRID,
      };
      var map = new google.maps.Map(document.getElementById('Gmap'), mapOptions);
      google.maps.event.addListener(map, 'click', function (event) {
        console.log(event);
        addMarker(event.latLng, map);
      });

      function addMarker(pos, map) {
        var marker = new google.maps.Marker({
          position: pos,
          map: map,
          title: "Marker added on the location!"
        });
        //console.log(pos);
        //console.log(map);
      }
    }
  </script>
  <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
    </script>
</body>
</html>

Adding Animation To Marker

We can add animation to markers using the animation property of the marker constructor. The value of this property will be of the type google.maps.Animation.  We can specify this property as a marker property. The animation value can be:
  • DROP-In this animation, the marker will drop from the top of the map to its location defined. This animation will stop once the marker reaches its location. Or we can say that the animation is set to null implicitly after reaching the marker's location. This type of animation looks good when the user clicks on the map and a marker gets created. It is written as google.maps.Animation.DROP
  • BOUNCE - In this animation, the marker will bounce on its position. It will continue to bounce unless we explicitly set it to null. It is written as google.maps.Animation.BOUNCE
The syntax of defining animation on the marker is as follows:

 var marker = new google.maps.Marker({
          position: pos,
          map: map,
          animation: google.maps.Animation.DROP || google.maps.Animation.BOUNCE
        });

In the example below when we click on the map a marker gets added with the DROP animation. We have specified it in the marker constructor.

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>Marker On Map</title>
  <style>
    #Gmap {
      height: 600px;
      width: 100%;
    }

    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <div id="Gmap"></div>
  <script>
    function initMap() {
      var mapOptions = {
        streetViewControl: false,
        center: { lat: -45.67677, lng: -90.253456 },
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.HYBRID,
      };
      var map = new google.maps.Map(document.getElementById('Gmap'), mapOptions);
      google.maps.event.addListener(map, 'click', function (event) {
        console.log(event);
        addMarker(event.latLng, map);
      });

      function addMarker(pos, map) {
        var marker = new google.maps.Marker({
          position: pos,
          map: map,
          animation: google.maps.Animation.DROP
        });
        //console.log(pos);
        //console.log(map);
      }
    }
  </script>
  <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
    </script>
</body>
</html>

Setting Animation Using the setAnimation() Method

We can even set the animation on the marker using the setAnimation() method as follows. We even have getAnimation() method to get the animation on the marker.

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

Now we will add the animation on the map using setAnimation() method. We will add a BOUNCE animation now as follows:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>Marker On Map</title>
  <style>
    #Gmap {
      height: 600px;
      width: 100%;
    }

    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="Gmap"></div>
  <script>
    function initMap() {
      var mapOptions = {
        streetViewControl: false,
        center: { lat: -45.67677, lng: -90.253456 },
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.HYBRID,
      };
      var map = new google.maps.Map(document.getElementById('Gmap'), mapOptions);
      google.maps.event.addListener(map, 'click', function (event) {
        console.log(event);
        addMarker(event.latLng, map);
      });

      function addMarker(pos, map) {
        var marker = new google.maps.Marker({
          position: pos,
          map: map,
        });
        marker.setAnimation(google.maps.Animation.BOUNCE);
      }
    }
  </script>
  <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
    </script>
</body>
</html>

Adding Listener To Marker

We can add a listener to the marker using addListener method only. The arguments are the event such as 'click' and the callback function to handle the event. The syntax is as follows:

  marker.addListener('click', Function Name);

Now we will see how an animation will trigger when the user clicks on the marker.

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>Marker On Map</title>
  <style>
    #Gmap {
      height: 600px;
      width: 100%;
    }

    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="Gmap"></div>
  <script>
    var marker;
    function initMap() {
      var mapOptions = {
        streetViewControl: false,
        center: { lat: -45.67677, lng: -90.253456 },
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.HYBRID,
      };
      var map = new google.maps.Map(document.getElementById('Gmap'), mapOptions);
      marker = new google.maps.Marker({
        position: { lat: -45.67677, lng: -90.253456 },
        map: map,
      });
      marker.addListener('click', onMarkerClick);
    }
    function onMarkerClick() {
      marker.setAnimation(google.maps.Animation.BOUNCE);
    }
  </script>
  <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
    </script>
</body>

</html>

Comments