Smooth Scroll - Google maps marker to anchor

Question

I have a google maps with two markers and would like to make the scroll smooth, right now it just jumps, but I'm having trouble figuring out how and where to place anything ? My php page is quite similar(exact same layout) to this one - ( https://www.airbnb.com.au/things-to-do/san-francisco )

<script type="text/javascript">
      google.maps.event.addDomListener( window, 'load', gmaps_results_initialize );


      /* Renders a Google Maps centered on Melbourne Aus. */


      function scrollToView (eleID) {
          var e = document.getElementById(eleID);
          if (!!e && e.scrollIntoView) {
            e.scrollIntoView();
          }
        }

      function gmaps_results_initialize() {

        if ( null === document.getElementById( 'map' ) ) {
                return;
            }

        var map, marker,scroll, i;

        map = new google.maps.Map( document.getElementById( 'map' ), {
                    zoom:           11,
                    center:         new google.maps.LatLng( -37.863, 145.000 ),
                        disableDefaultUI: true,

       });



       /* Place a marker - Smiths and Duaghters */

       var iconsmith = {
           url: 'http://i63.tinypic.com/jgr3hx.png'
       };

        marker = new google.maps.Marker({
            position: new google.maps.LatLng( -37.802201, 144.977592 ),
            icon: iconsmith,
            map: map,
            url: 'mapcontent1'
               });

                   // Add scroll url??(not sure here)
                    scroll = new google.maps.InfoWindow();
                       google.maps.event.addListener( marker, 'click', ( function( marker ) {

                        return function() {
                            scrollToView(marker.url);
                        }
                  })( marker ));



       /* Place a marker - matcha maiden */

       var iconmatcha = {
           url: 'http://i65.tinypic.com/efsbp1.png'
       };
       marker = new google.maps.Marker({
         position: new google.maps.LatLng( -37.866789, 144.978319 ),
         icon: iconmatcha,
         map:      map,
         url: 'mapcontent2'


        });
                   //add scroll url??(also not sure here)
                    scroll = new google.maps.InfoWindow();
                      google.maps.event.addListener( marker, 'click', ( function( marker ) {

                        return function() {
                          scrollToView(marker.url);
                        }
                    })( marker ));


            }
      </script>

          ```

Answer 1 · 2017-06-10T13:44:34Z

June 10, 2017 1:44pm

https://www.w3schools.com/js/js_htmldom_animate.asp

Try this it might help but it involves using the JavaScript animate method and think of the div they use as the place you are going to and the container as the page (document).

If you know the number of pixels each google maps info blocks takes up just set the click of a button to animate the movement of a certain amount of pixels from the top of the page or the other info blocks.

An easier way would be to look up a frame work that makes it easier. Jquery also does this well with just setting the animation speed and distance.

Answer 2 · 2017-06-10T12:09:08Z

June 10, 2017 12:09pm

Could it be a problem of passing the marker parameter into the return functions you have?

Welcome to the Treehouse Community

Looking to learn something new?

cleo inacio

cleo inacio

Smooth Scroll - Google maps marker to anchor

2 Answers

Ellis Briggs

Ellis Briggs

Ellis Briggs

Ellis Briggs

cleo inacio

cleo inacio