Welcome to Help center

We are here to help

Google map

Follow

Map with individual and animation marker

map-simple-1.jpg

HTML map placeholder

<div class="overlay" onClick="style.pointerEvents='none'"></div>

HTML map


<div id="map"></div>

Before </body> tag ends

<script>
        var marker;

        function initMap() {

            var myLatlng = {lat: 28.43465, lng: -80.69415};

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

            var iconBase = 'assets/images/location.png';

            marker = new google.maps.Marker({
                map: map,
                draggable: true,
                animation: google.maps.Animation.DROP,
                position: myLatlng,
                icon: iconBase
            });
            marker.addListener('click', toggleBounce);

            map.addListener('center_changed', function () {
                window.setTimeout(function () {
                    map.panTo(marker.getPosition());
                }, 3000);
            });

            marker.addListener('click', function () {
                map.setCenter(marker.getPosition());
            });

        }

        function toggleBounce() {
            if (marker.getAnimation() !== null) {
                marker.setAnimation(null);
            } else {
                marker.setAnimation(google.maps.Animation.BOUNCE);
            }
        }

 </script>

 <script async defer
 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD4ppPTHXCpBSoOkLESSfwMlD1zojoMxBc&callback=initMap">
 </script>











 

Top
Powered by Zendesk