Hi!
The map Google map in my footer works only when embedded and without styles. My dark custom styled map just shows for 1 second upon refresh of the page. Error message says it doesn’t load JavaScript correctly.
I did set up billing for the Google Map API.
How do I fix the JavaScript?
GOOGLE URL
https://maps.googleapis.com/maps/api/staticmap?key=MY KEY IS NORMALLY HERE ¢er=59.31248616680002,18.082660816450794&zoom=17&format=png&maptype=roadmap&style=element:geometry%7Ccolor:0x171717&style=element:labels.icon%7Cvisibility:off&style=element:labels.text.fill%7Ccolor:0x757575&style=element:labels.text.stroke%7Ccolor:0x212121&style=feature:administrative%7Celement:geometry%7Ccolor:0x757575&style=feature:administrative.country%7Celement:labels.text.fill%7Ccolor:0x9e9e9e&style=feature:administrative.locality%7Celement:labels.text.fill%7Ccolor:0xbdbdbd&style=feature:poi%7Celement:labels.text.fill%7Ccolor:0x757575&style=feature:poi.business%7Ccolor:0xbcbfce%7Csaturation:-45%7Clightness:-25&style=feature:poi.park%7Celement:geometry%7Ccolor:0x181818&style=feature:poi.park%7Celement:geometry.fill%7Ccolor:0x454646%7Cvisibility:on&style=feature:poi.park%7Celement:labels.text.fill%7Ccolor:0xc7c7c7&style=feature:poi.park%7Celement:labels.text.stroke%7Ccolor:0x3e3e3e&style=feature:road%7Ccolor:0xffffff%7Cvisibility:simplified&style=feature:road%7Celement:labels.text%7Ccolor:0xffffff%7Clightness:-5%7Cvisibility:simplified&style=feature:road.arterial%7Ccolor:0xffffff%7Cvisibility:simplified&style=feature:road.arterial%7Celement:geometry%7Ccolor:0x373737&style=feature:road.arterial%7Celement:geometry.fill%7Ccolor:0x747474%7Cvisibility:on&style=feature:road.highway%7Celement:geometry%7Ccolor:0x3c3c3c&style=feature:road.highway.controlled_access%7Celement:geometry%7Ccolor:0x4e4e4e&style=feature:road.local%7Celement:geometry.fill%7Ccolor:0x606060%7Cvisibility:on&style=feature:road.local%7Celement:labels.text.fill%7Ccolor:0xbcbcbc&style=feature:transit%7Ccolor:0xbcbfce%7Cvisibility:on&style=feature:transit%7Celement:geometry.fill%7Ccolor:0xbcbfce%7Cvisibility:on&style=feature:transit%7Celement:labels.icon%7Csaturation:5%7Clightness:5&style=feature:transit%7Celement:labels.text%7Cvisibility:simplified&style=feature:transit%7Celement:labels.text.fill%7Ccolor:0x26bbdd%7Cvisibility:on&style=feature:transit.station%7Celement:labels.icon%7Ccolor:0x26bbdd&style=feature:water%7Ccolor:0xff9abe%7Cvisibility:on&style=feature:water%7Celement:geometry%7Ccolor:0x000000&style=feature:water%7Celement:geometry.fill%7Ccolor:0x414246&style=feature:water%7Celement:labels.text.fill%7Ccolor:0x3d3d3d&size=480x360
JSON GOOGLE MAP
[
{
“elementType”: “geometry”,
“stylers”: [
{
“color”: “#171717”
}
]
},
{
“elementType”: “labels.icon”,
“stylers”: [
{
“visibility”: “off”
}
]
},
{
“elementType”: “labels.text.fill”,
“stylers”: [
{
“color”: “#757575”
}
]
},
{
“elementType”: “labels.text.stroke”,
“stylers”: [
{
“color”: “#212121”
}
]
},
{
“featureType”: “administrative”,
“elementType”: “geometry”,
“stylers”: [
{
“color”: “#757575”
}
]
},
{
“featureType”: “administrative.country”,
“elementType”: “labels.text.fill”,
“stylers”: [
{
“color”: “#9e9e9e”
}
]
},
{
“featureType”: “administrative.locality”,
“elementType”: “labels.text.fill”,
“stylers”: [
{
“color”: “#bdbdbd”
}
]
},
{
“featureType”: “poi”,
“elementType”: “labels.text.fill”,
“stylers”: [
{
“color”: “#757575”
}
]
},
{
“featureType”: “poi.business”,
“stylers”: [
{
“color”: “#bcbfce”
},
{
“saturation”: -45
},
{
“lightness”: -25
}
]
},
{
“featureType”: “poi.park”,
“elementType”: “geometry”,
“stylers”: [
{
“color”: “#181818”
}
]
},
{
“featureType”: “poi.park”,
“elementType”: “geometry.fill”,
“stylers”: [
{
“color”: “#454646”
},
{
“visibility”: “on”
}
]
},
{
“featureType”: “poi.park”,
“elementType”: “labels.text.fill”,
“stylers”: [
{
“color”: “#c7c7c7”
}
]
},
{
“featureType”: “poi.park”,
“elementType”: “labels.text.stroke”,
“stylers”: [
{
“color”: “#3e3e3e”
}
]
},
{
“featureType”: “road”,
“stylers”: [
{
“color”: “#ffffff”
},
{
“visibility”: “simplified”
}
]
},
{
“featureType”: “road”,
“elementType”: “labels.text”,
“stylers”: [
{
“color”: “#ffffff”
},
{
“lightness”: -5
},
{
“visibility”: “simplified”
}
]
},
{
“featureType”: “road.arterial”,
“stylers”: [
{
“color”: “#ffffff”
},
{
“visibility”: “simplified”
}
]
},
{
“featureType”: “road.arterial”,
“elementType”: “geometry”,
“stylers”: [
{
“color”: “#373737”
}
]
},
{
“featureType”: “road.arterial”,
“elementType”: “geometry.fill”,
“stylers”: [
{
“color”: “#747474”
},
{
“visibility”: “on”
}
]
},
{
“featureType”: “road.highway”,
“elementType”: “geometry”,
“stylers”: [
{
“color”: “#3c3c3c”
}
]
},
{
“featureType”: “road.highway.controlled_access”,
“elementType”: “geometry”,
“stylers”: [
{
“color”: “#4e4e4e”
}
]
},
{
“featureType”: “road.local”,
“elementType”: “geometry.fill”,
“stylers”: [
{
“color”: “#606060”
},
{
“visibility”: “on”
}
]
},
{
“featureType”: “road.local”,
“elementType”: “labels.text.fill”,
“stylers”: [
{
“color”: “#bcbcbc”
}
]
},
{
“featureType”: “transit”,
“stylers”: [
{
“color”: “#bcbfce”
},
{
“visibility”: “on”
}
]
},
{
“featureType”: “transit”,
“elementType”: “geometry.fill”,
“stylers”: [
{
“color”: “#bcbfce”
},
{
“visibility”: “on”
}
]
},
{
“featureType”: “transit”,
“elementType”: “labels.icon”,
“stylers”: [
{
“saturation”: 5
},
{
“lightness”: 5
}
]
},
{
“featureType”: “transit”,
“elementType”: “labels.text”,
“stylers”: [
{
“visibility”: “simplified”
}
]
},
{
“featureType”: “transit”,
“elementType”: “labels.text.fill”,
“stylers”: [
{
“color”: “#26bbdd”
},
{
“visibility”: “on”
}
]
},
{
“featureType”: “transit.station”,
“elementType”: “labels.icon”,
“stylers”: [
{
“color”: “#26bbdd”
}
]
},
{
“featureType”: “water”,
“stylers”: [
{
“color”: “#ff9abe”
},
{
“visibility”: “on”
}
]
},
{
“featureType”: “water”,
“elementType”: “geometry”,
“stylers”: [
{
“color”: “#000000”
}
]
},
{
“featureType”: “water”,
“elementType”: “geometry.fill”,
“stylers”: [
{
“color”: “#414246”
}
]
},
{
“featureType”: “water”,
“elementType”: “labels.text.fill”,
“stylers”: [
{
“color”: “#3d3d3d”
}
]
}
]
