I changed the map to black and white using JSON styles. This works perfectly. However, if you switch to satellite mode and activate the labels (new checkbox) there because you want to read street and city names, the streets are white there too, which is annoying.
Is it possible to prevent the styles from being applied in satellite mode as well, or to set a separate transparent color there?
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"visibility": "on"
},
{
"color": "#ffffff"
}
]
}
This was the solution. Thanks to #MrUpsidown's comment.
google.maps.event.addListener(map, "maptypeid_changed", function() {
var newMapType = map.getMapTypeId();
if(newMapType == google.maps.MapTypeId.ROADMAP)
map.setOptions({styles: styles});
else
map.setOptions({styles: null});
});
Related
A client of mine sent me a JSON file. It's supposed to display a google map location once embedded on the site. But I am not sure how to embed this into the site. Here's a sample of what it looks like:
[
{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#ec0000"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "landscape",
"elementType": "all",
"stylers": [
{
"color": "#008006"
}
]
},
{
"featureType": "landscape.natural",
Any Ideas?
Thanks,
K
That JSON file will not display a map. If you wanted to display a map based on data from a JSON file, you would write Maps API code to interpret the JSON data and display the map, or use a GeoJSON layer. But that particular JSON file doesn't have information like geographic coordinates or anything like that. The file isn't GeoJSON (JSON with geographic information). Instead, it contains settings that are used to style a map, as described here:
https://developers.google.com/maps/documentation/javascript/styling#style_syntax
In other words, this data could be used to control the appearance of a map, but not the actual contents of the map.
-- I am making a very simple map from Google 3.0 and when I strip down the map. I am left with white shapes in North America that match up to Native American reservation. I cannot separate them from the higher level "administrative" and they do not fall under country, province, locality, neighborhood or land parcel.
"featureType": "administrative",
"elementType": "geometry",
"stylers": [ { "visibility": "off"} ]
I've experienced a similar issue and got around it by setting the color of all geometry elements to be the same as the color of the landscape geometry element:
styles: [
{
'featureType': 'all',
'elementType': 'geometry',
'stylers': [{
'color': '#444444'
}, {
'visibility': 'on'
}]
},
{
'featureType': 'landscape',
'elementType': 'geometry',
'stylers': [{
'color': '#444444'
}, {
'visibility': 'on'
}]
},
]
Assume that in the above example #444444 is the land color. I stumbled upon this fix by analysing the JSON code of maps on SnazzyMaps, but I also found the Google Maps API Styled Map Wizard helpful for figuring out which settings applied to which map elements.
As an aside, I found that the above code also fixed some issues I was experience where certain buildings appeared with the default Google Maps styles when zoomed right in (i.e. zoom level of 16-18).
The code above changed their color so that it was the same as everything else but there were some pesky little icons that appeared for public toilets, lifts and disabled access, etc. In order to remove them I used the following additional code:
styles: [
{
'featureType': 'all',
'elementType': 'labels.icon',
'stylers': [{
'visibility': 'off'
}]
}
]
I realise this question is old but hopefully my answer helps other people in future.
I've embedded google maps on to my page, and set visual refresh to true (https://developers.google.com/maps/documentation/javascript/basics#VisualRefresh).
Works great, except the map now has all these clickable elements by default. For example:
http://imgur.com/mF4wziF
Attractions have bubble help, I've accidentally gone in to street view before, and so on.
How do I turn these off?
Thanks
you can add this code to your initialize function, as stated by Dr.Molle
var styles = [
{
featureType: "poi",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "transit",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
map.setOptions({styles: styles});
an other solution would be to set the MapTypeId to TERRAIN.
and in addition you can add
streetViewControl: false
to the mapoptions. (this will not disable the streetview option in the bubbles, but it wont be in the navigation controls anymore)
I have integrated google maps to my website. I have used Google maps API V3. When my website is viewed on a mobile phone such as an Iphone, the map becomes unusable. It is very hard to see as the font size becomes too small, on further zooming into the map the font size further decreases.
On viewing in desktop computer, the map seems readable but I am still not happy with the font size and it is totally unreadable on an iphone or any mobile phone browser.
What I would like to fix is,
1) Get the map seem bigger in size especially by increasing the font size.
2) I want to my map to just show the street names and nothing else.
3) I want map to load much faster
Or is there any other google map API exclusively for mobile phone websites?
I had the same problem, and I ended up implementing a solution I found here: https://sunpig.com/martin/2012/03/18/goldilocks-and-the-three-device-pixel-ratios/
Basically the article explores the difference between physical pixels and CSS "pixels". There is a scale factor between the two. Its default value on most mobile browsers seems to be the reason why you often see pages designed for desktops looking very "zoomed out" with tiny text on a phone. And it also seems to cause unreadable Google Maps!
My problems went away when I added this HTML snippet into my "head" section:
<meta name="viewport" content="width=device-width">
It seems that this is a feature Google Maps API does not support yet, or fails to take into consideration.
The comments in this forum state the same.
Apparently the street labels are "baked into the map tiles", so there's no way of actually change the font size/styles.
Broken link #2*.
Regarding your second question:
If you only want the street labels to show, I suggest to read through the Styling section of the Google Maps API. Once you have gone through this document, you'll find you can easily get a JSON from the wizard Broken link #4*, which you can add to your map.
All you'll have to do is to set all the feature labels Visibility to Off except for the "Road".
Then click on "Show JSON", you should get something similar to this:
Google Maps API v3 Styled Maps JSON:
[
{
featureType: "administrative",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},
{
featureType: "landscape",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},
{
featureType: "poi",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},
{
featureType: "transit",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},
{
featureType: "water",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},
{
featureType: "road",
stylers: [
{ visibility: "on" }
]
}
]
Here is the static image of the resulting map the wizard also provides.
* FROM REVIEW:
As of 2017, Links #2 and #4 are broken...
I'm unable to find any information as to how to remove or change the colors of the equator and international date-line in Google Maps JS API v3. I've been searching the documentation and web for any mention of what controls them.
A few years late for this answer, but I was trying to figure this out and worked out how to properly remove the equator and dateline. It seems that for the administrative layer country borders are considered strokes but the equator and dateline are fills, so you can set your style to this to get rid of those lines:
{
"featureType": "administrative",
"elementType": "geometry.fill",
"stylers": [{ "visibility": "off" }]
}
The code below will change the color of the equator and international date-line, but may also have side effects of changing other colors. Change the rgb value for hue to whatever you want. Also, change the two occurrences of "MyCustomMap" to whatever you want to call the map. The code assumes that you already have a Google map object and that it is stored in a variable named map.
var mapStyle = [
{
featureType: "administrative",
elementType: "geometry",
stylers: [
{ hue: "#00ff2b" }
]
}
];
var styledMap = new google.maps.StyledMapType(mapStyle);
map.mapTypes.set('myCustomMap', styledMap);
map.setMapTypeId('myCustomMap');
If you want to remove the equator and international date-line, you can use the code below. Everything said about the code above applies here too, including the stuff about it possibly having side effects (but this time, the side effect will be to make other things invisible as well).
var mapStyle = [
{
featureType: "administrative",
elementType: "geometry",
stylers: [
{ visibility: "off" }
]
}
];
var styledMap = new google.maps.StyledMapType(mapStyle);
map.mapTypes.set('myCustomMap', styledMap);
map.setMapTypeId('myCustomMap');