0

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.

2
  • Take a look at the documentation for information on manipulating the map view. Jan 31, 2016 at 8:42
  • @magreenberg Thanks for the tip but I've worked with Google Maps API in whole past month or so and I've read it many, many, many times. Unfortunately I haven't found anything that could help me to achieve my goal.
    – Solo
    Jan 31, 2016 at 10:09

1 Answer 1

1

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

9
  • That looks awesome however is there's a way to do this without sacrificing dragging? It seems that draggable: true doesn't have any effect.
    – Solo
    Jan 31, 2016 at 10:04
  • You could. Just remove the map-cover anyplace the mousemove listener on the map-div. But there's going to be some weird affect on the map when you drag and move the map...
    – Tah
    Jan 31, 2016 at 10:09
  • Then Im afraid I need to find other solution because dragging is very important.. I also stumbled on a similar effect when I tried to find a solution, take a look at this.
    – Solo
    Jan 31, 2016 at 10:11
  • Ok... so you need the parallax, but still need to allow for dragging instead of your original question.
    – Tah
    Jan 31, 2016 at 10:19
  • I never mentioned anything about disallowing dragging.. Im looking for the effect from my previous comment's link, parallax effect on map that has same funtionality as normal map..
    – Solo
    Jan 31, 2016 at 10:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.