We Keep Coding

How to set the Google Map Attribute to 'greedy' programatically without having to reload/reconstruct the map in javascript?

I have the following code in javascript which is my default, I have a button for the user to move the map more easily (without having to use both fingers/or CTRL)
I know there's an attribute called gestureHandling: "greedy" but I can't figure out how to set it programatically with javascript without presetting the attribute or rebuild/reconstruct the map, how do I do that ?
map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: myLatLng,
disableDefaultUI: true,
mapTypeControl: false
});

Store your settings in an object and apply them when you need to using the setOptions() function on the map object;
// The Settings Object
let mapSettings = {
zoom: 15,
center: myLatLng,
disableDefaultUI: true,
mapTypeControl: false
}
// Your initial Map load
window.onload(function(){
map = new google.maps.Map(document.getElementById('map'), mapSettings);
});
// Used when you want to apply different gesture handling
function greedyMap(){
mapSettings.gestureHandling = 'greedy';
map.setOptions(mapSettings);
}
<button onclick="greedyMap()">Example</button>

Per the documentation, gestureHandling is a MapOptions property.
MapOptions that don't have a dedicated setter/getter can be set using setOptions
google.maps.event.addDomListener(document.getElementById('btn'), 'click', function() {
map.setOptions({
gestureHandling: 'greedy'
});
});
code snippet:
/**
* This sample sets the gesture handling mode to 'cooperative',
* which means that on a mobile device, the user must swipe with one
* finger to scroll the page and two fingers to pan the map.
*/
function initMap() {
var myLatLng = {
lat: -25.363,
lng: 131.044
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng,
gestureHandling: 'cooperative'
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
google.maps.event.addDomListener(document.getElementById('btn'), 'click', function() {
console.log("before:" + map.gestureHandling);
map.setOptions({
gestureHandling: 'greedy'
});
console.log("after:" + map.gestureHandling);
});
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 80%;
}
<input type="button" value="click" id="btn" />
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>

How to set google.maps.Map options while preserving the previous settings?

I have a system using google maps api v3, the system is quite big with various javascript modules that I load. Now I found a tricky thing: if I set the map options with setOptions, previous setting is deleted:
I.e., if one of my modules needs to change the position of the map selector:
my_map.setOptions({ mapTypeControlOptions:
{ position: google.maps.ControlPosition.TOP_RIGHT }
});
it will reset settings of another module, which is adding new map types!! :
my_map.setOptions({ mapTypeControlOptions: {
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.SATELLITE,
google.maps.MapTypeId.HYBRID,
google.maps.MapTypeId.TERRAIN,
'OSM',
'OCM'
]
})
I was thinking of a workaround which would get the current options, merged in the new ones and then run setOptions. But there is no clean way to get the google.maps.Map options!
This really seem to suck... this really tempts me to refrain to direct object modification as I asked in another question, but that could be dangerous, right? But it's really hard to program in a clean way with Google maps api v3!!
Any solutions, thoughts, workarounds?

What I usually do is have my maps options stored somewhere where I could retrieve them and changed them as needed before setting them back. You could either use a global JS variable of local storage for that purpose. For instance:
var myOptions = { zoom : 12};
map.setOptions(myOptions);
...
myOptions.mapTypeControlOptions = {
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.SATELLITE,
google.maps.MapTypeId.HYBRID,
google.maps.MapTypeId.TERRAIN,
'OSM',
'OCM'
]};
map.setOptions(myOptions);

Indeed, Google Maps options are not getting preserved in that case. But you could consider the following workaround .
Even though google.maps.Map class does not expose accessor for MapTypeControlOptions property you could still access it (and therefore modify it) using the below approach:
var options = map.mapTypeControlOptions; //undocumented
The below example demonstrates how to preserve Google Maps options:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: { lat: -28.643387, lng: 153.612224 },
mapTypeControl: true
});
printInfo('Settting map type control options...')
setMapTypeControlOptions(map);
var before = JSON.stringify(map.mapTypeControlOptions);
printInfo('Before:' + before);
printInfo('Setting map type control options position..');
setMapTypeControlOptionsPosition(map,google.maps.ControlPosition.TOP_RIGHT);
var after = JSON.stringify(map.mapTypeControlOptions);
printInfo('After:' + after);
}
function setMapTypeControlOptions(map) {
map.setOptions({
mapTypeControlOptions: {
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.SATELLITE,
google.maps.MapTypeId.HYBRID,
google.maps.MapTypeId.TERRAIN
]
},
mapTypeId: google.maps.MapTypeId.TERRAIN,
});
}
function setMapTypeControlOptionsPosition(map,value){
/*map.setOptions({
mapTypeControlOptions:
{ position: value }
});*/
var options = map.mapTypeControlOptions;
options.position = value;
}
function printInfo(s){
//console.log(s);
document.getElementById('output').innerHTML += s + '<br/>';
}
html, body {
height: 220px;
margin: 0;
padding: 0;
}
#map {
height: 220px;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?signed_in=false&callback=initMap" async defer>
</script>
<div id='output'/>

disable draggable on google maps in mobile

I want to disable dragging of maps in tablet and mobile
var myOptions = {
zoom: 5,
scrollwheel: false,
center: new google.maps.LatLng(lat_mycustom, long_mycustom),
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
on pageload this is working fine..
but i want to be disabled for mobile devices.
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
alert(mobile);
map.setOptions({ 'draggable': false });
}
this is not working though..let me know

Use a global variable at the start like
var drgflag=true;
then use your mobile detection code in which dragflag will set to false
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
alert(mobile);
map.setOptions({ 'draggable': false });
}
Then you can initialize your map
var myOptions = {
zoom: 5,
scrollwheel: false,
draggable:drgflag,
center: new google.maps.LatLng(lat_mycustom, long_mycustom),
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
I hope your mobile detection code works..

You can add it directly also
var myOptions = {
zoom: 5,
scrollwheel: false,
center: new google.maps.LatLng(lat_mycustom, long_mycustom),
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggable: false,
}
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

This person [included link] has added a button to enable/disable for mobile only.
It would be nicer if you could 'click' the map rather than a button. Apple's new '3D Touch' would be perfect for this as pressing harder could activate the drag behaviour of the map.
Perhaps you could adjust the style of the map to a lighter or darker shade depending the mode you were in?
https://gist.github.com/danhannigan/36d61b74ea457224b746
$( ".scroll-lock" ).click(function() {
$( this ).toggleClass( "locked" );
if ($(this).hasClass("locked")) {
map.set('draggable', false);
} else {
map.set('draggable', true);
}
});

simply add the following in your myOptions object for your map setting:
var myOptions = {
...
draggable: !("ontouchend" in document),
...
}
This checks if the "ontouchend" event exists, if it does it means its a touch device, so disable dragging. However, things get a bit complicated on laptops with touchscreens.
Another option would be:
var sw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var isDraggable = sw > 1024 ? true : false;
var mapOptions = {
draggable: isDraggable,
scrollwheel: false
};
You basically check the width of the screen and if it's within the width span of a tablet, then disable dragging.

Function to turn KML layer on/off

This is my first time posting here. I am new in working with Javascript or Google Maps API. I have a map with one KML layer, and I want to create a checkbox that will turn the layer on or off when clicked. I have seen a lot of examples on the web, but nothing seems to work in my application. Here is the code:
(function() {
window.onload = function() {
var options = {
center: new google.maps.LatLng(44.65, 22.64),
zoom: 10,
mapTypeId: google.maps.MapTypeId.TERRAIN,
mapTypeControl: true,
mapTypeControlOptions: {
mapTypeIds: [
google.maps.MapTypeId.HYBRID,
google.maps.MapTypeId.SATELLITE,
google.maps.MapTypeId.TERRAIN
]
},
streetViewControl: false
};
var map = new google.maps.Map(document.getElementById('map'), options);
var kmlUrl = 'http://googledrive.com/host/0B55_4P6vMjhITEU4Ym9iVG8yZUU/trasee.kml';
var kmlOptions = {
suppressInfoWindows: false,
preserveViewport: false,
};
var trasee = new google.maps.KmlLayer(kmlUrl, kmlOptions).setMap(map);
}
})();
I have no idea what function to create to toggle the visibility of the layer, altough I've created a checkbox in the HTML file:
<input type="checkbox" id="straturi" onClick="togglefunction()" />
Could you give me any advice?
Best regards,
Alexandru

The toggle function should be something like
var toggleKml=function(layer) {
if(layer.getMap()===null) {
layer.setMap(map)
} else {
layer.setMap(null)
}
};
And it needs to be defined in the same context as map and trasee, otherwise it won't see those objects. In your case, you would call it with trasee as parameter
toggleKml(trasee);

Putting a Street View Button on a Google Map

How can I put a Street View button on a fairly typical Google Map so that it is inline with the standard Map/Satellite/Hybrid buttons in the top right corner? I've seen one example of this that I can't find any longer. So, I know it's possible.

Yes indeed, one can specify control positions in the map's options--look for control positioning in the online docs.
How to specify Google maps controls positions
For positioning the street view control in the top right corner add
streetViewControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
}
to your map's options.
Check this demo (that uses the Google maps API version 3):
var myLatlng = new google.maps.LatLng(-33, 151);
var myOptions = {
center: myLatlng,
zoom: 5,
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
}
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
#map_canvas {
width: 300px;
height: 200px;
}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>
Here's an another example for control positioning in the official documentation.
Control placement identifiers
These are all possible positions for Google maps controls (from TOP_LEFT to BOTTOM_RIGHT):
+----------------+
+ TL TC TR +
+ LT RT +
+ +
+ LC RC +
+ +
+ LB RB +
+ BL BC BR +
+----------------+
For a full list of positions and how they work see https://developers.google.com/maps/documentation/javascript/3.exp/reference#ControlPosition
Changing a control position programmatically
You can also change the position dynamically after creating the map using the SetOptions method of the google.maps.Map class. In this example I create a map as above with streetViewControl in position TOP_RIGHT and then change it to LEFT_BOTTOM:
var myLatlng = new google.maps.LatLng(-33, 151);
var myOptions = {
center: myLatlng,
zoom: 5,
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
}
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// now change position to LEFT_BOTTOM changing streetViewControlOptions
// with setOptions
map.setOptions({
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM
}
});
#map_canvas {
width: 300px;
height: 200px;
}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>