node-googlemaps icon indicating copy to clipboard operation
node-googlemaps copied to clipboard

Google Maps Styles not working?

Open PedroFabrino opened this issue 8 years ago • 2 comments

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 avatar Feb 14 '17 00:02 PedroFabrino

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%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: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.

PedroFabrino avatar Feb 14 '17 00:02 PedroFabrino

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

younes200 avatar Jul 18 '17 11:07 younes200