Search code examples
javascriptjquerygoogle-mapsgoogle-maps-api-3parallax

Mouse movement parallax on Google Map?


Is it possible to add something like this to Google Maps? This demo has parallax with multiple layers, I would need only one for map itself.

I don't nessessarily need the code because there are few tutorials how to achieve mouse movement parallax. Im more interested how to apply this to Google Maps.

My current ideas / questions?

  • Would it be somehow possible to move map tiles in the background without moving Google logo?
  • If not, how to make map bigger (out of browser viewport) without messing up tiles so that I could move whole map and use overflow { hidden; }?

Don't worry about hiding Google's credentials or messing up controls, I could add all the divs, controls and logo myself via JS.

I would be very grateful if you used my provided jsFiddle example to make your point.


Solution

  • You can do this using the panTo() function. I gave it some default numbers for the scroll effect that you can change to meet your needs.

    $( "#map-cover" ).on( "mousemove", function( event ) {
      var newLatlng = new google.maps.LatLng(
                        myLatlng.lat() + event.pageY / 1000, 
                        myLatlng.lng() + event.pageX / 1000)
      map.panTo(newLatlng);
    });
    

    Make sure to add a div above the map and disable the controls on the map

    Updated JSFiddle

    Upon, getting additional clarification, you can add a listener to check if the map is being dragged.

    map.addListener("drag", function() {
        dragging = true;
    });
    
    map.addListener("dragend", function() {
        dragging = false;
    });
    

    Draggable map with mouse scroll