In my google maps application I have a follow method which follows a moving marker. When it is following I want to allow zooming through all the usual methods (dblclick, dblleftclick, mousewheel and touch events) and I want to disable panning of any kind. The problem is that on zoom with mousewheel and dblclick the map gets panned to the position of the mouse. I can disable everything just fine but I want to allow zooming. I have solved the mousewheel problem by using the jquery mousewheel plugin and using the delta to change the zoom.
Is there some easy way to do this or do I have to write a listener for all the different touch and mouse events?
EDIT
I have already disable double click, mousewheel zooming and dragging but I want to have the double click functionality still there. I also want the touch events there but I want to have them zoom from the centre rather than from where the event happened. The real problem is replicating the events which google already handle but change the functionality a bit
var options = {
disableDoubleClickZoom: true,
draggable: false,
scrollwheel: false,
panControl: false
};
this.map = new google.maps.Map(document.getElementById('map'), options);
My ideal solution would be if there was a disableDoubleClickPan
and disableScrollwheelPan
or the draggable
option actual prevents all dragging of any kind
EDIT
This is for all devices, desktop and mobile.
Click the "My Places" button just beneath the search bar. Click "Maps" and wait for the list of maps to appear down the left side of the screen. When they do, click the title of the map containing the marker that you want to remove.
setOptions({streetViewControl: false}); removes the pegman control box in the upper left, but still ends up leaving the pegman on the map. If you want to HIDE the Street View control you need to place streetViewControl option before mapTypeId . Otherwise, you end up with the Street View control showing disabled.
Panning allows the user to scroll the map in any direction. This is useful when you wish to view the area immediately adjacent to the area currently shown on the screen. To pan the map, perform the following steps: 1. Using the pointer, click the map and drag the pointer in the direction you wish to pan the map.
You can change the zoom level of the map using simple steps. Step 1 Go to Add or Edit Map page . Step 2 Select 'Default zoom level' in the 'Map Information section'. Step 3 click save map and see the changes.
Here is how I did it:
var options = { draggable: false, scrollwheel: false, panControl: false, maxZoom: Zoom, minZoom: Zoom, zoom: Zoom, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
As you can see, setting maxZoom and minZoom to the same value helps block user's double click event.
I have ended up going with a combination of options. Firstly I had to override desktop events which occurred to get my achieved result (touch, double click, double left click, and mouse wheel).
On a touch screen devise I paused all updates to the markers when there were more than two touches. this meant that any pinch event was not jumping around when the zoom operating.
On a normal web desktop device I disabled the zoom and double click events on the map and rewrote my own event handlers.
To distinquish between them I checked for the ontouchstart event in the window object.
function setDraggable(draggable) { if ("ontouchend" in document) { return; } var options = { draggable: draggable, panControl: draggable, scrollwheel: draggable }; this.map.setOptions(options); },
The zoom_changed
or idle
events where not really an option for a few reasons:
idle
event only gets called when the map is idle and with the amount of animation I was doing this never got called.zoom_changed
event would be recalling the recenter before an animation frame.While it's possible to argue that double-clicking the map or wheel-zooming the map need not take account of the mouse location (because you are acting on the map object rather than a location on the map), pinch-to-zoom is always location-dependent because you physically stretch or squash the map around a location. To alter that behaviour would be distinctly unintuitive.
In this case you should listen for zoom_changed
or idle
and then pan the map to recentre it, so the user can see what's going on.
You could even use those events to handle the default double-click or mousewheel behaviour so that it's obvious you are changing the level of control the user normally has.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With