CODEWITHSUNDEEP
javascriptjquerygoogle-mapsgoogle-maps-api-3
Goran
Goran

Reputation: 748

animate google maps markers when the map scrolls into view

so I have google map on the bottom of a page with animated markers. Markers have drop animation but I want for animation to start when map scrolls into view - without that animation is over when user eventually scrolls down to see the map. I'm using google maps api.

My code:

var marker;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 59.325, lng: 18.070}
  });

  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {lat: 59.327, lng: 18.067}
  });
  marker.addListener('click', toggleBounce);
}

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

Upvotes: 3

Views: 1639

Answers (1)

Tim
Tim

Reputation: 1826

You can use jquery visible to check if the map element on your view is visible by the user. Then if the view is visible start the animation.

jquery visible tutorial

jquery visible github

//set an interval that keeps checking if the user can see the map
//the interval will keep calling your initMap()
var myVar = setInterval(function () { initMap() }, 10);

function initMap() {
// check if the user can see the map using $('#map').visible()
    if ($('#map').visible()) {
        //if the user can see the map stop checking
        clearInterval(myVar);

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

        marker = new google.maps.Marker({
            map: map,
            draggable: true,
            animation: google.maps.Animation.DROP,
            position: { lat: 59.327, lng: 18.067 }
        });
        marker.addListener('click', toggleBounce);
    }
}



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

If you want you can edit this code to load the map first and then add the marker once the user can see the map.

//set an interval that keeps checking if the user can see the map
//the interval will keep calling your initMap()
var myVar = setInterval(function () { addMarker() }, 100);

function initMap() {

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

    function addMarker() {
        // check if the user can see the map using $('#map').visible()
        if ($('#map').visible()) {
            //if the user can see the map stop checking
            clearInterval(myVar);

            marker = new google.maps.Marker({
                map: map,
                draggable: true,
                animation: google.maps.Animation.DROP,
                position: { lat: 59.327, lng: 18.067 }
            });
            marker.addListener('click', toggleBounce);
        }
    }
}

Hope this helps!

Quick note you can change the interval time if you want... I have it checking every 10 milliseconds.

Upvotes: 2

Related Questions