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'/>
Related
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>
I have to show large zoom slider option which was available in previous version of google map api (v3.21). I have already specified the version in the src of script but it won't work. Below is my code:
html, body {
height: 100%;
margin: 0;
}
<div id="googleMap" style="height: 100%;width: 1349px;"></div>
<script type="text/javascript">
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('googleMap'), {
center: {lat: -34.397, lng: 150.644},
zoom: 2,
streetViewControl: false,
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.RIGHT_TOP
},
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initialize&v=3.21&signed_in=true"></script>
The "old" pan and zoom control has been removed. If you still want that functionality, you need to create your own custom control to implement it.
Related questions (include examples of a custom pan/zoom control):
Google maps custom control always appears below the default controls (contains a custom pan control)
googlemaps api3, demogallery example “Custom Small Navigation Control” (contains a custom pan/zoom control)
The Zoom control is now just a "+" and "-" button - there is no longer
a slider. The default position of the Zoom control has changed from
TOP_LEFT to RIGHT_BOTTOM
to know more check
Zoom control
block in this link What's New in the v3.22 Map Controls
I've developed a zoom slider for IE11. It could also work for Chrome and Mozilla, updating the css properties.
https://github.com/bubango/zoom_slider_IE11
Not sure if you're still looking for a zoom slider, but I made one recently and maybe you or anyone else can use it.
Create a zoom constructor...
function ZoomControl(controlDiv, map, min, max, currentZoom) {
var controlUI = document.createElement('input');
controlUI.type = 'range';
controlUI.value = currentZoom;
controlUI.min = min;
controlUI.max = max;
controlUI.style.position = "fixed";
controlUI.style.top = "95%";
controlUI.style.left = "50%";
controlUI.style.transform = "translate(-50%, -50%)";
controlUI.style.width = "400px";
controlDiv.appendChild(controlUI);
controlUI.addEventListener('click', function() {
map.setZoom(parseFloat(controlUI.value));
});
google.maps.event.addListener(map, 'zoom_changed', function(){
controlUI.value = map.getZoom();
});
}
and use it when you create a map.
function initMap() {
//initial map options
var options = {
center: startLatLng,
zoom: 3,
minZoom: 3,
maxZoom: 15,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.TERRAIN,
disableDefaultUI: true
}
map = new google.maps.Map(id('map'), options);
var centerControlDiv = document.createElement('div');
var centerControl = new ZoomControl(centerControlDiv, map, options.minZoom, options.maxZoom, options.zoom);
centerControlDiv.index = 1;
map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(centerControlDiv);
}
Your result will have a slider that looks like the attached image.
Trying to add a marker into a google map from a hidden variable on page load. Is this possible to do based on the address rather than the coordinates?
Code is:
var place = $('#hidden-place').val();
var markers = [];
var mapOptions = {
zoom: 15,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DEFAULT,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN
]
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
};
var map = new google.maps.Map(document.getElementById('google-map'),
mapOptions);
You could use the Geocoding service in the API - take a look at this example https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple
In that example it lets you use a free form address and plots the first matching result as a marker.
This would get you started at least.
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);
I have written something similar to this in the past using an older version of the google maps api I want to add some geocoding with some autocomplete using the api3. But my map won't even load in. The map will load in only if I take the map options and the geocoder off. Why is this?
function mapLoad(){
jQuery(function($) {
$('#map').animate({height:300,width:300,opacity:1},1500);
});
var mapOptions = {
center: new google.maps.LatLng(57.698254, 12.037024),
zoom: 16,
mapTypeId: google.maps.MapTypeId.HYBRID,
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true
};
// Define map
map = new google.maps.Map(document.getElementById("map"),mapOptions);
// Define Gecoder
geocoder = new google.maps.Geocoder();
window.alert("no errors with map load");
}
EDITED neither the geocoder or the options work
i used this as a reference purely because it looks simple.
Where are you calling mapLoad? I assume in body onload. I setup this jsbin without issue. Does it help?