Smooth scroll when click a map marker

Question

I have a map where i display multiple markers and if a marker is clicked, you go to a div on the bottom of the page (classic anchor link)

Can someone tell me why i don't have smooth scroll when i click on marker, but i do have if i just create a link and a div with an ID?

This is the js:

  jQuery(function($) {
    // Asynchronously Load the map API 
    var script = document.createElement('script');
    script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);
});

function initialize() {
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap'
    };

    // Display a map on the page
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    map.setTilt(45);

    // Multiple Markers
    var markers = [
        ['London Eye, London', 51.503454,-0.119562, '#1'],
        ['Palace of Westminster, London', 51.499633,-0.124755, '#2']
    ];



    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow(), marker, i;

    // Loop through our array of markers & place each one on the map  
    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0],
            url: markers[i][3]
        });



       google.maps.event.addListener(marker, 'click', function() { 
       window.location.hash = this.url;
    }); 
            $(document).ready(function(){
                $('a[href^="#"]').on('click',function (e) {
                    e.preventDefault();

                    var target = this.hash,
                    $target = $(target);

                    $('html, body').stop().animate({
                        'scrollTop': $target.offset().top
                    }, 900, 'swing', function () {
                        window.location.hash = target;
                    });
                });
            });



        // Automatically center the map fitting all markers on the screen
        map.fitBounds(bounds);
    }

    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(14);
        google.maps.event.removeListener(boundsListener);
    });

}

score 4 · Accepted Answer · edited May 23 '17 at 12:23

I guess 'juping' is caused by this piece of code:

google.maps.event.addListener(marker, 'click', function() { 
   window.location.hash = this.url;
});

Remove your event listeners:

google.maps.event.addListener(marker, 'click', function() {

and this one:

$(document).ready(function(){
   $('a[href^="#"]').on('click',function (e) {

And add this piece of code which will get html tags by marker.url data and animate scrolling to them:

google.maps.event.addListener(marker, 'click', function() {
    var elem = $(marker.url);
    $('html, body').animate({
              scrollTop: elem.offset().top
      }, 1000 );
});

It will smoothly scroll to your divs:

<div id='1'>1</div>
<div id='2'>2</div>

Demo fiddle: http://jsfiddle.net/o8u13whg/

EDIT: Closure fix

The issue described in comment: I've just noticed that now it will always scroll down to the last ID... no matter what marker you click. is caused by closures not being handled properly, causing always last marker.url to be scrolled to.

To fix it, pull attaching the click event out of the for loop:

for( i = 0; i < markers.length; i++ ) {
    var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
    bounds.extend(position);
    marker = new google.maps.Marker({
        position: position,
        map: map,
        title: markers[i][0],
        url: markers[i][3]
    });
    attachClickHandler(marker);
    .....

and then inside attachClickHandler(marker) function do the scroll magic:

function attachClickHandler(marker){
     google.maps.event.addListener(marker, 'click', function() {

     var elem = $(marker.url);
    $('html, body').animate({
              scrollTop: elem.offset().top
      }, 1000 );

});
}

Demo fiddle: http://jsfiddle.net/o8u13whg/3/

Closures can be a tricky thing :)

I've just noticed that now it will always scroll down to the last ID... no matter what marker you click. http://jsfiddle.net/o8u13whg/2/ — Florin Simion, Sep 04 '15 at 12:18
@FlorinSimion: Sorry, see my edit in response. `Closures` are still a bit tricky concept for me :) — Ivan Jovović, Sep 04 '15 at 13:22
I have heard that `let` keyword resolves the closure handling. By that I mean `for(let i = 0; i < markers.length; i++ )` — mehmet.ali.anil, Jun 29 '17 at 17:39

Smooth scroll when click a map marker

1 Answers1

EDIT: Closure fix