Develop Reference

Google Maps JS: pinch to zoom Google Maps without moving marker (ie. Uber & Lyft)

I'm currently building a Phonegap app along with Google's Map JS API.
I have a map that you can drag to select your dropoff location. This is accomplished by collecting the map's center geolocation on the "dragend" event. I then set a pin on top of the map (outside of the JS map) so that you know where the center point is.
Everything works fine until you pinch to zoom and the pin is then displaced. This is due to you zooming and dragging the map at the same time when pinching the screen.
Is there any way to prevent dragging on zoom in order to hold the map at its center point?
Please view the JSfiddle here.
var map;
google.maps.event.addDomListener(window, 'load', onMapReady);
function onMapReady() {
var center = new google.maps.LatLng(30.267153, -97.743061);
var mapOptions = {
center: center,
zoom: 13,
styles: [{"featureType": "poi", "stylers": [{ "visibility": "off" }]},{"featureType": "transit","stylers": [{ "visibility": "off" }]}],
disableDefaultUI: true,
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
google.maps.event.addListener(map, 'dragend', function() {
center = map.getCenter();
$('#log').html('Lat: ' + center.lat() + ' Lng: ' + center.lng());
});
}

There are two possible solutions for this issue , from what i have read that you have tried using native marker but it is lagging , which itself is another issue that i have a suggestion for :
use crosswalk for building your app , this will extremely boost your app performance , i have experienced it myself , and was really satisified with results ( iam using intel xdk but i believe this will work for phonegap as well ).
use the UX solution : you feel the marker is lagging because after all it is visible !! i would suggest hiding the marker on drag event start , then showin it back on drag event end.
Third solution which makes sense , is using a pinch detector library like this , this , or even solutions mentioned here , and here , pick whatever works best for you , as performance is a point of concern , and previous solution have to be tried , however once you have detected the pinch gesture , you set the map drag to false , set it back again to true after pinch ends .
I dont usually provide much coding in my solution but rather the correct algorithm to help solving the specified issue.

EDIT: ProllyGeek is right, the zoom_changed event fires after the drag has already happened. You can detect if the touch event was near the center of the map (over your marker) and re-center the map after zooming:
google.maps.event.addListener(map, 'dragend', function() {
if (center && center != map.getCenter()) {
map.setCenter(center);
center = null;
}
});
//we should recenter the map if the click/mousedown was within the centerRadius of the center of the map
google.maps.event.addListener(map, 'mousedown', function(clickMouseEvent) {
var mapDiv = document.getElementById('map');
if (pointInCircle(clickMouseEvent.pixel.x,
clickMouseEvent.pixel.y,
mapDiv.offsetWidth/2,
mapDiv.offsetHeight/2,
centerRadius)) {
//map.setOptions({draggable: false}); //disables zoom and dragging
center = map.getCenter(); //save the current center point so we can recenter later.
}
});
//handy function to see if a x,y coordinate is within z radius of another x,y coordinate
//from https://stackoverflow.com/a/16819053/1861459
function pointInCircle(x, y, cx, cy, radius) {
var distancesquared = (x - cx) * (x - cx) + (y - cy) * (y - cy);
return distancesquared <= radius * radius;
}
http://jsfiddle.net/bxfn499f/11/
Original Answer:
Did you try setting draggable to false on the map when the zoom event is fired?
google.maps.event.addListener(map, 'zoom_changed', function() {
map.setOptions({draggable: false});
//heavy handed re-enabling of draggable
//setTimeout(function() { map.setOptions({draggable: true}); }, 5000); //cant drag for five seconds
});
You can programmatically re-enable dragging with the mouseup event (which should fire in lieu of the touchend event) or whatever makes sense in your use case (map.setOptions({draggable: true});). For example:
google.maps.event.addListener(map, 'mouseup', function() {
map.setOptions({draggable: true});
});
http://jsfiddle.net/bxfn499f/6/ I tested from a desktop, so I tweaked the fiddle slightly as the map wasn't loading for me - assuming this was due to the window.load not being fired after $(document).ready(function() { ... }. You'll have to see how this behaves if the drag stars before the zoom event.

I have a solution which might work. Assuming you want the map to center back to the pin.
Add custom control div in your map object. The example is here. Instead of the "center map" div in the example, make your pin the controlling div. Listen to dragend event and set the center at pin's position.
Haven't really tested the solution but seems like it will do the trick.

Embed google map is wrong displayed until resizing webpage

I am trying to display a map in my webpage to get coordinates from it. It works fine, I can drag and drop a marker and get coordinates in input boxes.
But my problem comes when I load the webpage. Everything is well displayed but the map, here you can see how the map is displayed:
But if in this moment I resize the webpage, I mean, if it was full screen, put it half. Or make it a little big bigger or smaller if it was just a part of the screen. Then, You will see the correct map:
(It is not the same place, I know. I took the image from 2 reloads)
I create the webpage in HTML but I call it as if they were distinct webpages. When you load the index, you get a button with this
href:<a href="#openMap">
And, the part showed will be:
<div data-role="page" id="openMap" data-theme="e">
<div data-role="header" data-id="fixedNav" data-position="fixed">
blablabla
<div data-role="content">
<form action="">
<div id="map_canvas" style="width:500px; height:300px"></div>
blablabla
And all divs, forms... properly closed. I have many input boxes and fields which I haven't put them here.
Then, in my google map script I have this:
var map;
function initializeNewMap() {
var myLatlng = new google.maps.LatLng(43.462119485,-3.809954692009);
var myOptions = {
zoom: 14,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
draggable: true,
position: myLatlng,
map: map,
title: "Your location"
});
}
But I have no idea why I need to resize. Is it a way to solve it?
EDIT: I add more info:
I call the part of the webpage which has the map this way:
$(document).on("pageinit", '#openMap', function() {
I tried to put
google.maps.event.trigger(map, 'resize');
just after it but nothing happens.
SOLUTION:
I found the solution in other question (Google Maps v3 load partially on top left corner, resize event does not work, Ian Devlin post):
As one user said here, I need to resize map. But just that line didn't work. I added this code at the end of the initialize function:
google.maps.event.addListenerOnce(map, 'idle', function() {
google.maps.event.trigger(map, 'resize');
});
So it is just called after the map is shown.

I too faced this issue, I solved it by triggering the Google maps resize event.
google.maps.event.trigger(map, 'resize');
Updates:
var map;
function initializeNewMap() {
// add your code
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.trigger(map, 'resize');
}
Hope you understand.

I had a similar issue but you couldn't see any of the map (the entire box was grey).
What solved it for me was realising that the div that contained the map was starting off as hidden using
display:none;
If you instead use
visibility:hidden;
The div retains its size while still appears as hidden, so the map when initialised uses its correct height and width, rather than 0 values
Hope this helps!

If you use JavaScript-based layout helpers (such as Foundation Equalizer) you need to ensure that the map container has the definitive size before you load the map so you don't get the infamous grey map and certain attributes like center work as expected—or use the third-party plug-in's events to trigger a custom callback that fixes the map. E.g.:
var map = new google.maps.Map(/*...*/);
$(document).on("after-height-change.fndtn.equalizer", function(){
google.maps.event.trigger(map, 'resize');
});

My map was hidden in a Twitter Bootstrap tab, and so wasn't visible when the map initialised, so I needed to call resize when the tab was selected like so:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
google.maps.event.trigger(map, 'resize');
})

How it should be fixed:
You must have to initialize the map after the container (where you place the map) get's visible,
Remember that loading and visibility is not same, you need visibility.
Like, I have many tabs & last tab contains the map,
I fixed this issue by:
$('#map-tab').click(function() {
// init map
});
Here, I first making sure that the container gets visibility (as clicking that element reveals the section contains the map) then initialized the map
This worked fine for me;

Google Maps Disable user panning on all events

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.

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:
The idle event only gets called when the map is idle and with the amount of animation I was doing this never got called.
The animation at each step recentered the map on the followed markers so the zoom_changed event would be recalling the recenter before an animation frame.
due to the amount of animation the idea of not panning to the center is to reduce animation frames and improve performance.

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.

Can ScrollWheel be disabled in a custom street view?

I am building a site and I have a page which takes an address and uses it to generate a 2D roadmap style google-map and then next to it, the street view for that address.
My problem is that these two maps span almost the entire width of the site and the user is likely to have their mouse go over it when scrolling down the page and get confused by their inability to scroll down further (while zooming into a map).
Disabling this for the 2D map was pretty strait forward
//works to disable scroll wheel in 2D map
var mapOptions = {
zoom: 12,
center: latlng,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions );
//not working to disable scroll wheel in panorama
var panoramaOptions = {
position: results[0].geometry.location,
scrollwheel: false
};
panorama = new google.maps.StreetViewPanorama(document.getElementById("map_canvas2"), panoramaOptions );
but the street view does not seem to allow me to disable the scroll wheel using these options and I am not able to find this issue addressed in the google-docs. Anyone know if this CAN be done or suggestions on how to approach it?

There was a feature request with Gmaps API v3 issues to add scrollwheel: false to streetview http://code.google.com/p/gmaps-api-issues/issues/detail?id=2557. This is now fixed, just use scrollwheel: false within your StreetViewPanorama options.

I am having the same problem, when the user scrolls down using the mouse wheel, the cursor gets caught in the Google street view and starts zooming instead of scrolling down the page.
In Google Maps they provide the scrollwheel property which can disable this, but unfortunately this does not seem to be implemented in Street view.
The only workaround I found as of now is as #bennedich said in the previous answer, I placed an empty/transparent div exactly over the street view div.
I am enabling the controls when the user clicks anywhere over the street view area by using jQuery to hide this empty div (using css visibility property) on mousedown event and when the user moves his mouse out I am placing this empty div back over. Which basically means everytime the user wants to interact with the street view control he has to click it once. It's not the best solution but it's better than getting your mouse caught up when scrolling

Don't know about the javascript way, but with html and css you can place an invisible div with higher z-index over the map/streetview.

There is a patch coming up from Google to address this issue.
The fix that works for now is to set the version number explicitly to 3.25 for scrollwheel: false to work.
Example:
https://maps.googleapis.com/maps/api/js?key=XXX&v=3.25

My solution was the following. As soon as the mouse is scrolled on the street view using the "wheel" event, then do the scroll artificially and bring an overlay to the front.
$('.streetViewOverlay').click(function(e) {
$(this).addClass('streetViewOverlayClicked');
});
document.querySelector('#street-view').addEventListener("wheel", function(evt) {
$(document).scrollTop($(document).scrollTop() + evt.deltaY);
$('.streetViewOverlay').removeClass('streetViewOverlayClicked');
});
$('#street-view').mouseleave(function() {
$('.streetViewOverlay').removeClass('streetViewOverlayClicked');
});
var panorama;
function initialize() {
panorama = new google.maps.StreetViewPanorama(
document.getElementById('street-view'),
{
position: {lat: 37.869260, lng: -122.254811},
pov: {heading: 165, pitch: 0},
zoom: 1,
gestureHandling: 'cooperative',
scrollwheel: false
});
}
.streetViewOverlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
opacity: 0;
}
.streetViewOverlayClicked {
z-index: 1;
}

How would I position a marker at the bottom of the map in Google Maps v2?

I have a webpage that finds a store by postcode or name.
I have just released an update to it so that contact details display in an info window coming from the marker. Due to the small size of the info window, after centering to the marker, the map pans down until it can fit the marker and info window in leaving the marker near the bottom.
Wondering if there is an easy way to set this offset immediately so that the marker appears at the bottom of the map window and it doesn't have to pan?
Thanks.

You could center the map appropriately before you add the marker:
var someZoom = 13;
var center = new GLatLng(37.4419, -122.1419);
map.setCenter(center, someZoom);
The zoom is optional too. You can just leave the zoom on whatever it is:
map.setCenter(center);
If you would like to center on a particular pixel, instead of a lat/lng, then you can use this function to convert:
fromContainerPixelToLatLng(pixel:GPoint)
I feel like you should spend half an hour and review the docs: http://code.google.com/apis/maps/documentation/reference.html. I read the documentation extensively while working on my website: www.trailbehind.com

Perhaps the auto-panning is caused by an internal addoverlay event handler. Have you tried handling the addoverlay event and returning false from it?
GEvent.addListener(map, "addoverlay", function() {
return false;
});
where 'map' is the name of your GMap2 object.