We Keep Coding

Google Maps Using Touch Events That Don't Target It

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')
}
});

How to perform click event on overlapping Google map makers alternatively in jquery.

As I am getting the same latitude and longitude from database for different markers, the markers are getting pin on each other, now I want to perform click event on makers alternatively, but only the top marker pin is clicked, how can I click the back one .

OverlappingMarkerSpiderfier is the solution: https://github.com/jawj/OverlappingMarkerSpiderfier
Ever noticed how, in Google Earth, marker pins that overlap each
other spring apart gracefully when you click them, so you can pick the
one you meant?
And ever noticed how, when using the Google Maps API, the same thing
doesn’t happen?
This code makes Google Maps API version 3 map markers behave in that
Google Earth way (minus the animation). Small numbers of markers (yes,
up to 8) spiderfy into a circle. Larger numbers fan out into a more
space-efficient spiral.
Demo page is here: http://jawj.github.io/OverlappingMarkerSpiderfier/demo.html

How to show zooming bar in google map

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.

Google maps V3 drag map with right mouse button?

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.

OpenLayers zoom style like GoogleMaps

In GoogleMaps when users zooms In/Out using mouse wheel the point under cursor stays the same (its coordinates), but OpenLayers map has different approach - when zooming center of the map is constant. Can one use GoogleMaps zoom style in OpenLayers map?
EDIT:
Actually current behaviour in my OpenLayers is that when I zoom in with some position under the cursor it moves that position to map center on the next zoom level. Probably it is some issue related to my map specific settings (like projection).

I guess you are using OpenLayers.Control.MouseDefaults control for navigation. Well, you shouldn't, because this control is replaced with OpenLayers.Control.Navigation and will be deprecated in OpenLayers 3.0.
A quick look at source code for MouseDefaults shows that it definitely centers map on the cursor position:
defaultWheelDown: function(evt) {
if (this.map.getZoom() > 0) {
this.map.setCenter(this.map.getLonLatFromPixel(evt.xy),
this.map.getZoom() - 1);
}
},
While cursor stays at the same position the map will centered to new location every time you zoom in/out, which is confusing.
OpenLayers.Control.Navigation uses the same approach as Google Maps. OpenStreetMap uses it and you can see that it works the same way here

Actually, when looking at the Basic Example at OpenLayers, it seems like the map zooms around the mouse pointer, just as Google Maps does. Or am I missing some detail in your question?