is it possible to disable the move inside of a google mal (v3) for the time i drag a marker?
I don't want to use i.e. the static map. I need the generall function of movement, but for the moment I drag a marker, the map should not move.
Thanks a lot!
Markers have dragstart and dragend events. On dragstart, disable the "movement" functionality on the Map by setting various MapOptions to false, like draggable, scrollwheel, etc. On dragend, set the MapOptions back to true.
Here is a function you can use to disable or enable map movement based on a boolean. It assumes your Map variable is map.
function disableMovement(disable) {
var mapOptions;
if (disable) {
mapOptions = {
draggable: false,
scrollwheel: false,
disableDoubleClickZoom: true,
zoomControl: false
};
} else {
mapOptions = {
draggable: true,
scrollwheel: true,
disableDoubleClickZoom: false,
zoomControl: true
};
}
map.setOptions(mapOptions);
}
And then you use this in your events like this (marker is your Marker variable):
google.maps.event.addListener(marker, 'dragstart', function() {
disableMovement(true);
});
google.maps.event.addListener(marker, 'dragend', function() {
disableMovement(false);
});
gmap.setOptions({'scrollwheel': false});
Related
I have a Google map with the option scrollwheel: true
I'm adding an OverlayView into the Google map that contains HTML with scrollable content. When I hover/click into the OverlayView, the mouse scrollwheel continues to zoom the Google map rather than scrolling the content of the Overlayview.
How do I prevent this behavior from occurring?
I've tried changing the options of the Google map to scrollwheel: false as an onclick event of the OverlayView, but this doesn't appear to trigger.
InfoWindow was probably the correct approach to resolving this, but it wasn't a route we wanted to follow, since it would have meant significantly changing our code to handle InfoWindows within the OverlayView.
Instead we ended up adding listeners for the mouseover and mouseout events on the OverlayView, then toggled the Google Map and page behavior based upon the mouse events:
// Prevent page body and google map from handling the mouse
// Wheel events when hovering over pin group content
google.maps.event.addDomListener(groupDiv, 'mouseover', function () {
gMap.setOptions({
disableDoubleClickZoom: true,
navigationControl: false,
scaleControl: false,
draggable: false
});
$('html').css('overflow', 'hidden');
})
// Restore control to page body page body and google map
// when user is no longer hovering pin group content
google.maps.event.addDomListener(groupDiv, 'mouseout', function () {
gMap.setOptions({
disableDoubleClickZoom: false,
navigationControl: true,
scaleControl: true,
draggable: true
});
$('html').css('overflow', 'auto');
})
You can put your HTML content in an InfoWindow and use gestureHandling : "greedy" on your map so that the zoom can be controlled when the cursor is on the map, but not when on the InfoWindow. (Infowindow content is still scrollable)
Sample Fiddle :
https://jsfiddle.net/471fmzyv/
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru,
gestureHandling : "greedy"
});
Would anyone happen to know how to go about toggling a click event to turn 'draggable' on and off, so click once and it becomes draggable, click again and it becomes inactive?
Keeping draggable on constantly can become an issue on mobile devices.
map.addListener('click', function() {
map.set('draggable', true);
});
Above works well, but how would I make it toggle back to off on the next click event? or maybe even turn on with double click (tap twice) and off again the same way?
.
Quick Note: My original question was about the Pan control feature on Google Maps V3, but as the first response shows it has since been depreciated.
set a proper window scope var
var isDraggable = true;
the in you listener test the state of isDraggable and change
map.addListener('click', function() {
if (isDraggable ) then {
map.set('draggable', false);
isDraggable = false;
} else{
map.set('draggable', true);
isDraggable = truen;
}
});
For pan Control you should use panControl .. but starting with v3.22 seems is deprecated by google https://developers.google.com/maps/articles/v322-controls-diff#overview-map-control-deprecated
function initMap() {
map = new google.maps.Map(document.getElementById('footer-map'), {
center: {lat: -37.111, lng: 144.888},
zoom: 14,
scrollwheel: false,
draggable: false,
disableDoubleClickZoom: true,
panControl:true,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN
}
});
};
Im using Google Maps, I added 2 markers.
Online Demo:
http://jsfiddle.net/VnwFT/1/
I just need to set a zoom, I tried in mapOpts and in fitBounds as well:
zoom
minzoom
maxzoom
e.x:
var mapOpts = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
scrollwheel: false,
zoom: 16
}
and it doesn't work.
How Could I set a zoom?
See what I've done here:
http://jsfiddle.net/VnwFT/27/
First you need to define the center of the map when you initialize it:
var mapOpts = {
center: new google.maps.LatLng(45.764043,4.835659),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
scrollwheel: false,
zoom: 16
}
Then if you don't need the fitBounds function (the center of the map is already defined on initialize), you could comment it.
Then in the marker click listener you could edit the code to zoom the map on marker click:
google.maps.event.addListener(pushPin, "click", function () {
infoWindow.setOptions(options);
infoWindow.open(map, pushPin);
if (this.sidebarButton) this.sidebarButton.button.focus();
map.setZoom(16);
});
API v3
I have a strange issue with a marker:
The marker that I place on the map is set to be draggable, WebInspector reports it as being draggable, but I still can't drag it. The cursor doesn't change when I go over the marker.
The underlying map is draggable, and that works.
On another page, with a different setup (less layers), but the same javascript, it works as expected (so there I can drag it).
I also made the marker clickable and bound an event to it, and that works fine. The cursor changes as well on mouseover.
I have run out of options.... Why can I not drag it? Can this have to do with some zIndex or layer positioning? As far as I can see, the map has a higher zIndex than all the other layers....
// display map
geocoder.geocode( { 'address':address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
// map options
var mapOptions = {
zoom: 14,
center: results[0].geometry.location,
panControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
};
// render map
map = new google.maps.Map(J('#'+mapElementId)[0], mapOptions);
// set marker
marker = new google.maps.Marker({
clickable: true,
draggable: true,
icon: markerImage,
shadow: markerShadow,
shape: markerShape,
map: map,
position: results[0].geometry.location
});
google.maps.event.addListener(marker, 'click', function () { alert('marker clicked'); });
google.maps.event.addListener(marker, 'dragend', function () {
alert('marker dragged')
map.setCenter(marker.getPosition());
J('input[name=coordinates]').val(marker.getPosition());
J('input[name=address]').val('');
});
J('input[name=address]').val(results[0].formatted_address);
}
});
you have draggable: false,.
change it to true
see it working here: http://jsfiddle.net/RASG/vA4eQ/
Try this:
map.setOptions({draggable: true});
I have a map in which I apply a custom overlay using KMbox overlay to signify where I think the users general point of interest lies. What I want is to display this map to the user and allow them to click on the map to give me an exact location match of their POI.
This all works fine except for when the user clicks on the map and changes the zoom of the map.
Here's my code to add the marker to the map.
function addMarker(location) {
if(KmOverlay)
{
KmOverlay.remove();
}
if(last_marker)
{
last_marker.setMap(null);
}
marker = new google.maps.Marker({
position: location,
map: map
});
// Keep track for future unsetting...
last_marker = marker;
}
And to show the map I have this function.
function show_map(lt, ln, zoom, controls, marker)
{
var ltln = new google.maps.LatLng(lt, ln);
var vars = {
zoom: zoom,
center: ltln,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControl: controls,
navigationControlOptions: {style: google.maps.NavigationControlStyle.ZOOM_PAN} ,
mapTypeControl: false,
scaleControl: false,
scrollwheel: false
};
map = new google.maps.Map(document.getElementById("map_canvas"), vars);
KmOverlay = new KmBox(map, new google.maps.LatLng(lat, lon), KmOpts);
var totalBounds = new google.maps.LatLngBounds();
totalBounds.union(KmOverlay.getBounds());
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng);
});
}
I have a working example at the following link here
fixed this by using the setMap() method on the KmOverlay and passing null as a parameter.
eg:
function addMarker(location) {
if(KmOverlay)
{
KmOverlay.setMap(null);
}