moshen / node-googlemaps

A simple way to query the Google Maps API from Node.js
MIT License
560 stars 148 forks source link

Google Maps Styles not working? #140

Open PedroFabrino opened 7 years ago

PedroFabrino commented 7 years ago

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 commented 7 years ago

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=&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%60BBlAmAv%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=

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 commented 7 years ago

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