Live Code Editor Version 2.0

Demo google map marker animate a marker RUN

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Marker Animations</title>
        <style>
            html, body, #map-canvas {
                height: 100%;
                margin: 0px;
                padding: 0px
            }
        </style>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfNk5eVWmQB9e6ApnWzICLNIY5lUXpOBw&language=vi"></script>
        <script>
            
            // Tạo 2 vị trí
            var stockholm = new google.maps.LatLng(59.32522, 18.07002);
            var parliament = new google.maps.LatLng(59.327383, 18.06747);
            
            // Marker
            var marker;
            
            // Bản đồ
            var map;

function initialize() 
            {
                //bản đồ options
                var mapOptions = {
                    zoom: 13,
                    center: stockholm
                };

// Tạo bản đồ
                map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
                
                // Tạo marker ban đầu
                marker = new google.maps.Marker({
                    map: map,
                    draggable: true,
                    animation: google.maps.Animation.DROP,
                    position: parliament
                });
                
                // Khi click vào marker thì gọi hàm toogleBounce
                google.maps.event.addListener(marker, 'click', toggleBounce);
            }

function toggleBounce() {
                // Nếu có sử dụng animate
                if (marker.getAnimation() != null) {
                    marker.setAnimation(null);
                } else {
                    marker.setAnimation(google.maps.Animation.BOUNCE);
                }
            }

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

</script>
    </head>
    <body>
        <div id="map-canvas"></div>
    </body>
</html>