Google Maps: Set StyledMapType With Relief
Problem: I want to use google maps v3 terrain map with native styles as native mapType.
I started with this code:
var mapOptions = {
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.TERRAIN,
styles: styles
};
He shows my area with my own styles. This is normal! Now I want to add this to mapTypeIds
var styledMap = new google.maps.StyledMapType(styles, {
name: "NSW"
});
var mapOptions = {
scrollwheel: false,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.TERRAIN, 'map_style']
}
};
var map = new google.maps.Map(map_id[0],
mapOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
The problem is google maps use "ROADMAP" for "StyledMapType" and I don't know how to change that to "TERRAIN". Is it possible?
Update:
As you can see, the default roadmap. There is a line in main.js from google maps api:
k=c.baseMapTypeId||"roadmap"
So what is baseMapTypeId? The one I set in mapOptions, for example:
mapTypeId: google.maps.MapTypeId.TERRAIN
???
May, this helps solve my problem.
source to share
You can do it like this:
var styles = [{
"stylers": [{
"saturation": -100
}]
}];
var styledMap = new google.maps.StyledMapType(styles, {
name: "Name of your style"
});
var myLatlng = new google.maps.LatLng(10, 10);
var map = new google.maps.Map(document.getElementById("map-canvas"), {
scrollwheel: false,
center: myLatlng,
zoom: 10
});
map.mapTypes.set('NSW', styledMap);
var mapTypeControlOptions = {
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.TERRAIN, 'NSW']
}
};
map.setOptions(mapTypeControlOptions);
Note that your name StyledMapType
is the name that will be displayed on the map, and id
yours MapStyle
, which you declare with a method set
, is what you need to use your map style to reference.
Hope this helps!
Edit:
If you want to apply custom styles to a style TERRAIN
, you can do so by setting the styles
current map type. You can add a custom control to your map to handle switching.
source to share