I am trying to build a web application that has true multi touch capabilities. For example, I want to be able to drag a container around the screen while also zooming/panning on a google map at the same time. The problem that I am having is that if I am touching somewhere else on the page (not on the map) and then I touch on the map with another finger, the map acts as if both fingers were touching the map. This results in trying to pan on the google map with one finger turning into zooming in/out of the map because I am touching somewhere else on the page.
I am using Hammer.js for my other multi touch events on the page. I have tried putting an overlay over the top of the map and manually calling google maps api functions to move the map, which worked okay, but there are many features of the map that I will be missing if I use an overlay and manually pan and zoom.
I know that there is a list of all the different touch events that occur on the webpage, but I am not sure how to implement that list to solve this issue, if it is even possible.
EDIT: For more reference, you can recreate my problem by going to the google maps documentation. https://developers.google.com/maps/documentation/javascript/examples/map-simple
If you are on a touchscreen device, touch the map to start panning like normal, then touch some white-space on the page with another finger. If you remove your finger that was on the map, you can still control the position with the finger that is not even touching it.
Someone asked for code for reference, this is as close as I got to finding where the issue was. This prints out 'not correct' if I first touch in the map with one finger then off the map with another, but I am not sure where to go from there. Also, it does not print out if I touch outside of the map first, then in the map.
this.map.addListener('mousedown', function(e) {
if(e.va.target.className == 'company-header') {
console.log('not correct')
}
});
Related
I disabled dragging a map with one finger on mobile devices
map.behaviors.disable('drag');
But there was a problem. The problem is as follows:
The map has a large number of clusters (initially (with a small zoom) - 90% of all placemarks on the map - clusters). When dragging a map with two fingers, if one of the fingers touches the cluster with a multitouch, the drag does not occur (the multitouch event on the map does not work - the multitouch event on the cluster is triggered) => the drag happens directly on the page of the site, and not on the map.
How to fix it? Maybe somehow pass the event cluster on the map?
Tried a lot of things, including hide all geoobjects, when a 'touchmove' event fires on the map element (but the multitouch event on the cluster still manages to work).
An example of a problem in a JS sandbox - go in from your mobile phone and try to drag the map where there are no clusters and where there is.
I tried to set the clusterInteractivityModel: 'default#silent' cluster option. Then the map is quietly dragged, but the 'click' event does not work.
I've got a custom tiles overlay setup using Google Maps API v3. But the backend which generates the images for it is not powerfull enough to handle all of the calls when multiple concurrent users are active. So in many way's I've tried to reduce the number of of tiles requested by the map. There's one more optimisation I can't seem to figure out though:
When a user double clicks to zoom, or uses the zoom control, the map retriggers the tiles overlay which requests the new tile images. But if a user triggers the zoom button or double click again before the tiles have even loaded, these are all wasted calls. So what I would like to do is build a delay which waits x seconds before triggering the new tile images.
With the current event listeners (zoom_changed, dbl_click, click) I can't seem to stop google maps from triggering the new image tiles. It looks like by the time the zoom_changed event triggers, the tiles are already being requested. So I'm kind of missing a way to stop the triggering of getTileUrl. I already know how to re-trigger it, I just want to know a way to stop it when a user is using zoom.
Anyone got an idea how to tackle this?
I'm using this implementation as a base:
https://developers.google.com/maps/documentation/javascript/examples/maptype-image-overlay
Someone at Google pointed me to the right direction. And after some research I figured out that:
google.maps.event.addDomListener(map, "zoom_changed", function () {
map.overlayMapTypes.setAt(0, null);
}
solved my problem.
This allows me to stop the overlay trigger, so I can now retrigger it whenever I want to.
Okay so this may sound like a crazy question, but I have a Google Map (API v3) on a website, and at times I have a large number of markers on the map. Are there any plugins that exist, or how difficult would it be to write one, (starter code?) that would allow me to let the user say hit contrl + left mouse click and hold and enable them to "select" a portion of the map. After which when they release the left mouse button, I could fire an off a function that could update my google map to reset the zoom and only include the markers within the users selection area.
I'm really really wanting to try this, does anyone have any pointers or ideas that could help me?
UPDATE
Okay, is it even possible? :)
I believe it is possible however I think there is a better way to solve your problem which is to use clustering.
For the cropping you could:
Use event addDomListener to listen for 'mousedown' on the map. Check the event object passed to the handler to see if the ctrl key is pressed (e.ctrlKey).
Convert the x y coordinates for the mouse click into a lat lng (use fromPointToLatLng on the map projection). Create a rectangle at the position.
Add a addDomListener mousemove handler on the map. In the handler resize the rectangle using setBounds.
Add a addDomListener mouseup handler on the map. In the handler grab the bounds of the rectangle, remove the rectangle and call map.fitBounds.
I haven't tried the above but after all that typing I would recommend trying out clustering first to see if it satisfies your needs.
I have a map application that can be seen here:
http://chrismcaleenan.com/map/?page_id=25
Each of the Malaysian states in the application will have an InfoWindow that displays additional information. You can see an example of this by mousing over 'Kedah' either in the main data table on the right or on the state itself in the map.
The problem, as you can see, is that the map pans in order to position the InfoWindow. Is there a way to fix the map position and set the InfoWindow size or position so that it is fully displayed without panning? In the Kedah example, one could have the InfoWindow positioned directly to the right and/or use a shorter tail.
One option would be to create a custom graphic for each state, but I'd rather avoid this as I will be running into the same issue with add'l data (e.g. click Kedah to zoom - will have InfoWindows on all data points on zoom).
If you're playing around double-clicking the water will zoom back out and reset map.
Thanks!
Yes, and sometimes the pan pulls the mouse outside of the state, which causes the InfoWindow to disappear. I know that's not what you want. The Google Maps demo catalog includes a sample that I think will give you what you want for your map. It's named SmartInfoWindow. Take a look, click on some of the markers, check out how the SmartInfoWindow behaves, and see if that might help you achieve what you want. It's not perfect, but it keeps the pan at the absolute minimum.
In a normal map, if you left-click mostly anywhere and drag, the map pans.
My question is: can you swap left and right buttons to pan the map? That is, left-clicking and dragging does nothing, while panning happens with right-clicking and dragging?
Perhaps there's a JavaScript hack unrelated to Google Maps to accomplish this?
Most other sites solve this by using different modes of using the map. For example when you click a "draw" button you enter "drawing mode" which just disables some Google Maps features like dragging and enables the drawing functionality.
That's the only way I can think of this'll work. Using the right mouse button to draw feels wrong and most users will probably agree i'm afraid.