node-googlemaps
node-googlemaps copied to clipboard
Google Maps Styles not working?
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!
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.
There is a PR that fix that issue, you can copy/past style from https://mapstyle.withgoogle.com/