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?
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.
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
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;
});