Google Map Marker Animations with Javascript API - Marker Bounce on click

WP Expert - Wordpress Support 5:03 AM

Dear Developers,
Right now you are at right place if you are looking for add some animation effect on your Google Map with location point marker. in this post i'm trying to show how you can use Google Map with Javascript API version 3 for point your business or official address on your Site or Blog with Google Map.

below is the sample code that you can use to show address on Google Map with add bounce effect on marker while click on Marker using Google Map setAnimation functions.

I hope it helps you Guys. just copy below code, paste in your Blank Html file and run in Browser.

<html>

<head>
<style>#mapCanvas {width: 100%;height: 100%;}</style>
<!--<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> before use  it-->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
var marker;
function initialize()
{
 var mapOptions = {
    center: new google.maps.LatLng(22.2788908867319, 73.1564998626709),
    panControl: false,
    zoomControl: true,
    mapTypeControl: true,
    streetViewControl: false,
    mapTypeControlOptions: {
   style: google.maps.MapTypeControlStyle.DEFAULT,
   position: google.maps.ControlPosition.BOTTOM_CENTER
   },
    zoomControlOptions: {
   style: google.maps.ZoomControlStyle.SMALL,
   position: google.maps.ControlPosition.LEFT_CENTER
    },
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  
 var latLng = new google.maps.LatLng(22.2788908867319, 73.1564998626709);
 var map = new google.maps.Map(document.getElementById("mapCanvas"),mapOptions);
 var image = "http://cdn.elegantthemes.com/preview/Explorable/wp-content/themes/Explorable/images/red-marker.png";
  
 marker = new google.maps.Marker({
   position: latLng,
   title: 'Point A',
   map: map,
   icon: image,
   draggable: true
  });
 var contentString = '<p>Hello World !</p>';
  
 var infowindow = new google.maps.InfoWindow({
   content: contentString, maxWidth: 850
  });
  
 google.maps.event.addListener(marker, 'click', function() {
   infowindow.open(map,marker);
   toggleBounce();
  });
}
function toggleBounce() 
{
  if (marker.getAnimation() != null) {marker.setAnimation(null);} 
  else {marker.setAnimation(google.maps.Animation.BOUNCE);}
}
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>
<div id="mapCanvas"></div>
</body>
</html></pre>

let me know if you have any query. i'm happy to help you :)

Post a Comment

0 Comments