Drop Google map marker only when in view

Question

I'm trying to animate my Google map marker. I've managed to style my map, set a custom marker and get the animation working but there's a couple of things that are stopping it from working the way I want.

The first thing is I use pace.js to add a loading bar to the page. Once the page is loaded CSS fades the content into view with a basic CSS transition. As this transition has a duration of 0.5 seconds, the animation runs before the page is fully loaded. So basically I need a way of adding a delay to the map marker animation.

Secondary, I'm thinking of putting my map nearer the footer of the website. Which means no one will see the animation. I thought it would be nice if it only animates once the map is in view (and page loaded).

Is there a way of achieving this?

Here's my currently code:

/* 
 * When the window has finished loading create our google map below.
 */

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

/* 
 * Basic options for a simple Google Map. For more options see:
 * https://developers.google.com/maps/documentation/javascript/reference#MapOptions
 *
 * 1. How zoomed in you want the map to start at (always required)
 * 2. The latitude and longitude to center the map (always required).
 * 3. How you would like to style the map. This is where you would paste any
 *    style found on Snazzy Maps.
 * 4. Prevent map from being draggable.
 * 5. Hide map/satellite toggle.
 * 6. Hide "Street View" button.
 */

function init() {

    var mapOptions = {
        zoom: 15, /* [1] */ 
        center: new google.maps.LatLng(LATVALUE, LONGVALUE), /* [2] */ 
        draggable: false, /* [4] */
        mapTypeControl: false, /* [5] */
        streetViewControl: false, /* [6] */
        styles: /* [3] */
            [{"stylers":[{"saturation":-100},{"gamma":1}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"all","elementType":"geometry.fill","stylers":[{"weight":"2.00"}]},{"featureType":"all","elementType":"geometry.stroke","stylers":[{"color":"#9c9c9c"}]},{"featureType":"all","elementType":"labels.text","stylers":[{"visibility":"on"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"landscape","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"color":"#eeeeee"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#7b7b7b"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"fill","stylers":[{"weight":"1.00"}]},{"featureType":"transit","elementType":"labels.icon","stylers":[{"visibility":"on"},{"hue":"#a3cd39"},{"gamma":1},{"saturation":"50"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#46bcec"},{"visibility":"on"}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"color":"#c8d7d4"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#070707"}]},{"featureType":"water","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"}]}]
    };

    /* 
     * Get the HTML DOM element that will contain your map. We are using a div with
     * id="map" seen below in the <body>
     */

     var mapElement = document.getElementById('map');

    /* 
     * Create the Google Map using our element and options defined above.
     *
     * 1. Map varible.
     * 2. Marker variable so we can specify a retina image and resize.
     */

    var map = new google.maps.Map(mapElement, mapOptions); /* [1] */
    var mapIcon = new google.maps.MarkerImage("img/interface/map-marker@2x.png", null, null, null, new google.maps.Size(100,78)); /* [2] */

    /* 
     * Let's also add a marker while we're at it.
     */

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(LATVALUE, LONGVALUE),
        map: map,
        flat: true,
        title: 'COMPANY NAME',
        icon: mapIcon,
        animation: google.maps.Animation.DROP
    });
}

Thanks for taking the time to read and hopefully someone can help me with this! :)

score 1 · Answer 1 · edited May 23 '17 at 11:46

1

Have a look at this answer. Using Waypoints you can trigger a function when the footer comes into view. The function once triggered will select the marker and add a class to it which contains the css transition.

var waypoint = new Waypoint({
  element: $([selector for footer]),
  handler: function() {
    $([selector for marker]).addClass([class containing css transition]);
  }
});

The element tells Waypoints which DOM element's position to observe during scroll, and handler is the function that will trigger when the top of that element hits the top of the viewport.

edited May 23 '17 at 11:46

Community

1
1

answered Feb 16 '17 at 14:56

Oliver Orchard

562
1
4
15

I was thinking of using waypoints but I'm not sure how you'd go about giving the marker an id. you can specify what image to use in the javascript but it looks like the Google map API injects all the markup. – user1406440 Feb 16 '17 at 18:21
In terms of adding an ID to google map marker. Check out this [Answer](http://stackoverflow.com/a/3265918/7172409). – Oliver Orchard Feb 17 '17 at 14:15

Drop Google map marker only when in view

1 Answers1