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.
Related
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')
}
});
My current implementation is, when I open the html via browser it zooms to North America map with 4 markers. On click of the markers, the maps is zoomed to that location with few more markers added. Now I would like to add a back button so when the button is clicked it should take me to the initial maps page with 4 markers.
Your help is much appreciated.
Thanks,
Chitra
The features of Google Maps API that you will need to use are bounds. For a rough understanding, imagine providing a top left corner point and a bottom right corner point and just telling the viewport to zoom and track to fit them in. There is a good answer here: Google Map API v3 — set bounds and center
As for how you implement the actual button to trigger the feature, that is a separate question and there are many potential solutions. Again, it has already been discussed here: Put a button on top of a google map
I am using Overlay Shapes with Google Maps API V3 using Google’s Drawing Manager. I basically allow the user to draw a polygon and save it to a database. They can then edit these polygons at will or create new ones.
The issue I am having is that often new polygons will completely cover existing polygons. Then the user cannot select the polygon beneath the latest one.
I wondered if anyone had managed to devise a script that enabled a user to cycle through the selection of every polygon in a potential stack under the mouse cursor (or pointer/finger...)
The attached image illustrates the predicament. Ideally I'd like something like CTRL+Click to select the polygon beneath the currently selected polygon.
No idea how to even approach this and I could not fine any examples in existence.
Thanks in advance.
You can try using control click to change the z order.
I am using the following google map and everything looks perfect:
Google map
The only problem is that when a person zoom in to the street level and wants to zoom out he needs to have a mouse and use mouse wheel and if he does not have mouse working with this map is a pain.
So I need to put zooming bar for example at left side of my map like this:
Is it possible to do that and how can I do that?(I appreciate any help)
You need to add the control to your map, like this:
map.addControl(new GSmallZoomControl());
You can find more information about GMaps controls here: https://developers.google.com/maps/documentation/javascript/v2/controls
This quote is from the above mentioned documentation
GSmallZoomControl - a small zoom control (no panning controls) used in the small map blowup windows used to display driving directions steps on Google Maps.
I just want to add the effect of map momentum by the dragging of map as in maps.google.com has.
Currently on my map where I stop dragging the map stops there but in maps.google.com if you drag a mouse the map will not stop there it will continue the movement in the same direction for a second or a few coordinates (I don't know), and I want the same thing on my Google Map. I am using GMap2.
Upgrade to Google Maps v3. That's your easiest solution, and your users will be better off in the long run.