Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Google Maps Styles not working? #140

Open
PedroFabrino opened this issue Feb 14, 2017 · 2 comments
Open

Google Maps Styles not working? #140

PedroFabrino opened this issue Feb 14, 2017 · 2 comments

Comments

@PedroFabrino
Copy link

PedroFabrino commented Feb 14, 2017

I've been trying to apply a style to the static maps api, I've got a template one from google.

Google gave me this JSON:
[
{
"elementType": "geometry",
"stylers": [
{
"color": "#1d2c4d"
}
]
},
{
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#8ec3b9"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#1a3646"
}
]
},
{
"featureType": "administrative.country",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#4b6878"
}
]
},
{
"featureType": "administrative.land_parcel",
"stylers": [
{
"visibility": "off"
}
]
},
.
.
.
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#4e6d70"
}
]
}
]

But it won't show on the static map using the params.style.

So I tried switching some attributes to fit the example that is on the home-page, switched elementType to element, featureType to feature and stylers to rules. That way, my URL significantly increased, but still, no style for me...

Can anyone shed some light on the issue for me? Thanks a lot!

@PedroFabrino
Copy link
Author

Doing some research, I've got the example URL from google maps with the style and inserted the PATH property on the URL the gmAPI generated for me:

That's the resulting (and working) one:
https://maps.googleapis.com/maps/api/staticmap?key=<API_KEY_GOES_HERE>&zoom=14&format=png&maptype=roadmap&path=weight%3A5%7Ccolor%3A0x6B96C9%7Cenc%3Avgh_BjticH%7CC%3FjCOzBGvBQrB%3FpAv%40BdB%7D%40xBu%40%7CAeApCs%40jCIfDd%40xCRhCXrBu%40BgCLwAoBGaDBwC%3FwD%7D%40aD%7BAeCyA_C%7DAiAcC%5DoBCkCFqAdAB%7CABlCFbCFhCNDBjDX~%40tAHfBw%40%5EqAd%40aBf%40%7DA%3FgB%7D%40%7DAk%40iAcB%7BBO%7BBhA_AzAh%40pAtAt%40~%40pAfBdA%7CAx%40vBB%7CCy%40fBkBxAqB%60B_BlAmAv%40sB%3FuAuAq%40uCaAgD%7D%40aDm%40sCaAyCu%40kD_%40_CReBlA%7B%40dDQnBOdBBrBIzACxA%3FfAI&style=element:geometry%7Ccolor:0x1d2c4d&style=element:labels%7Cvisibility:off&style=element:labels.text.fill%7Ccolor:0x8ec3b9&style=element:labels.text.stroke%7Ccolor:0x1a3646&style=feature:administrative.country%7Celement:geometry.stroke%7Ccolor:0x4b6878&style=feature:administrative.land_parcel%7Cvisibility:off&style=feature:administrative.land_parcel%7Celement:labels.text.fill%7Ccolor:0x64779e&style=feature:administrative.neighborhood%7Cvisibility:off&style=feature:administrative.province%7Celement:geometry.stroke%7Ccolor:0x4b6878&style=feature:landscape.man_made%7Celement:geometry.stroke%7Ccolor:0x334e87&style=feature:landscape.natural%7Celement:geometry%7Ccolor:0x023e58&style=feature:poi%7Celement:geometry%7Ccolor:0x283d6a&style=feature:poi%7Celement:labels.text.fill%7Ccolor:0x6f9ba5&style=feature:poi%7Celement:labels.text.stroke%7Ccolor:0x1d2c4d&style=feature:poi.business%7Cvisibility:off&style=feature:poi.park%7Celement:geometry.fill%7Ccolor:0x023e58&style=feature:poi.park%7Celement:labels.text%7Cvisibility:off&style=feature:poi.park%7Celement:labels.text.fill%7Ccolor:0x3C7680&style=feature:road%7Celement:geometry%7Ccolor:0x304a7d&style=feature:road%7Celement:labels.text.fill%7Ccolor:0x98a5be&style=feature:road%7Celement:labels.text.stroke%7Ccolor:0x1d2c4d&style=feature:road.highway%7Celement:geometry%7Ccolor:0x2c6675&style=feature:road.highway%7Celement:geometry.stroke%7Ccolor:0x255763&style=feature:road.highway%7Celement:labels.text.fill%7Ccolor:0xb0d5ce&style=feature:road.highway%7Celement:labels.text.stroke%7Ccolor:0x023e58&style=feature:transit%7Celement:labels.text.fill%7Ccolor:0x98a5be&style=feature:transit%7Celement:labels.text.stroke%7Ccolor:0x1d2c4d&style=feature:transit.line%7Celement:geometry.fill%7Ccolor:0x283d6a&style=feature:transit.station%7Celement:geometry%7Ccolor:0x3a4762&style=feature:water%7Celement:geometry%7Ccolor:0x0e1626&style=feature:water%7Celement:labels.text.fill%7Ccolor:0x4e6d70&size=480x360

But the (not working) one generated to me, by the api, is that one:
https://maps.googleapis.com/maps/api/staticmap?zoom=14&size=375x223&maptype=roadmap&path=weight%3A5%7Ccolor%3A0x6B96C9%7Cenc%3Avgh_BjticH%7CC%3FjCOzBGvBQrB%3FpAv%40BdB%7D%40xBu%40%7CAeApCs%40jCIfDd%40xCRhCXrBu%40~BgCLwAoBGaDBwC%3FwD%7D%40aD%7BAeCyA_C%7DAiAcC%5DoBCkCFqAdAB%7CABlCFbCFhCN~DBjDX~%40tAHfBw%40%5EqAd%40aBf%40%7DA%3FgB%7D%40%7DAk%40iAcB%7BBO%7BBhA_AzAh%40pAtAt%40~%40pAfBdA%7CAx%40vBB%7CCy%40fBkBxAqB%60B_BlAmAv%40sB%3FuAuAq%40uCaAgD%7D%40aDm%40sCaAyCu%40kD_%40_CReBlA%7B%40dDQnBOdBBrBIzACxA%3FfAI&style=element%3Ageometry%7C0%3A%5Bobject%20Object%5D&style=element%3Alabels%7C0%3A%5Bobject%20Object%5D&style=element%3Alabels.text.fill%7C0%3A%5Bobject%20Object%5D&style=element%3Alabels.text.stroke%7C0%3A%5Bobject%20Object%5D&style=feature%3Aadministrative.country%7Celement%3Ageometry.stroke%7C0%3A%5Bobject%20Object%5D&style=feature%3Aadministrative.land_parcel%7C0%3A%5Bobject%20Object%5D&style=feature%3Aadministrative.land_parcel%7Celement%3Alabels.text.fill%7C0%3A%5Bobject%20Object%5D&style=feature%3Aadministrative.neighborhood%7C0%3A%5Bobject%20Object%5D&style=feature%3Aadministrative.province%7Celement%3Ageometry.stroke%7C0%3A%5Bobject%20Object%5D&style=feature%3Alandscape.man_made%7Celement%3Ageometry.stroke%7C0%3A%5Bobject%20Object%5D&style=feature%3Alandscape.natural%7Celement%3Ageometry%7C0%3A%5Bobject%20Object%5D&style=feature%3Apoi%7Celement%3Ageometry%7C0%3A%5Bobject%20Object%5D&style=feature%3Apoi%7Celement%3Alabels.text.fill%7C0%3A%5Bobject%20Object%5D&style=feature%3Apoi%7Celement%3Alabels.text.stroke%7C0%3A%5Bobject%20Object%5D&style=feature%3Apoi.business%7C0%3A%5Bobject%20Object%5D&style=feature%3Apoi.park%7Celement%3Ageometry.fill%7C0%3A%5Bobject%20Object%5D&style=feature%3Apoi.park%7Celement%3Alabels.text%7C0%3A%5Bobject%20Object%5D&style=feature%3Apoi.park%7Celement%3Alabels.text.fill%7C0%3A%5Bobject%20Object%5D&style=feature%3Aroad%7Celement%3Ageometry%7C0%3A%5Bobject%20Object%5D&style=feature%3Aroad%7Celement%3Alabels.text.fill%7C0%3A%5Bobject%20Object%5D&style=feature%3Aroad%7Celement%3Alabels.text.stroke%7C0%3A%5Bobject%20Object%5D&style=feature%3Aroad.highway%7Celement%3Ageometry%7C0%3A%5Bobject%20Object%5D&style=feature%3Aroad.highway%7Celement%3Ageometry.stroke%7C0%3A%5Bobject%20Object%5D&style=feature%3Aroad.highway%7Celement%3Alabels.text.fill%7C0%3A%5Bobject%20Object%5D&style=feature%3Aroad.highway%7Celement%3Alabels.text.stroke%7C0%3A%5Bobject%20Object%5D&style=feature%3Atransit%7Celement%3Alabels.text.fill%7C0%3A%5Bobject%20Object%5D&style=feature%3Atransit%7Celement%3Alabels.text.stroke%7C0%3A%5Bobject%20Object%5D&style=feature%3Atransit.line%7Celement%3Ageometry.fill%7C0%3A%5Bobject%20Object%5D&style=feature%3Atransit.station%7Celement%3Ageometry%7C0%3A%5Bobject%20Object%5D&style=feature%3Awater%7Celement%3Ageometry%7C0%3A%5Bobject%20Object%5D&style=feature%3Awater%7Celement%3Alabels.text.fill%7C0%3A%5Bobject%20Object%5D&key=<API_KEY_GOES_HERE>

I've failed to find a solution so far, but it's going dark already so I'll probably get back to it tomorrow.

If anyone has any answers for that, I would be grateful.

Thanks a lot.

@younes200
Copy link

There is a PR that fix that issue, you can copy/past style from https://mapstyle.withgoogle.com/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants