how to embed styled google map in your site

Question

I had used used google map editing service from here : https://developers.google.com/maps/documentation/javascript/styling

now this link provided me two things : 1. a json code 2. the google api link

but i dont know how to use json in my html, earlier i had embed simple google map in my site from javascript [something like var google new map]. plz help me in adding this json code to my javascript or html.

here is the JSON code

[
{
"elementType": "geometry",
"stylers": [
  {
    "color": "#242f3e"
  }
]
},
{
"elementType": "labels.text.fill",
"stylers": [
  {
    "color": "#746855"
  }
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
  {
    "color": "#242f3e"
  }
]
},
{
"featureType": "administrative.country",
"elementType": "geometry",
"stylers": [
  {
    "color": "#af01ab"
  }
]
},
{
"featureType": "administrative.locality",
"elementType": "geometry",
"stylers": [
  {
    "color": "#fe70fb"
  }
]
},
{
"featureType": "administrative.locality",
"elementType": "labels.text.fill",
"stylers": [
  {
    "color": "#d59563"
  }
]
},
{
"featureType": "administrative.province",
"elementType": "geometry",
"stylers": [
  {
    "color": "#fe01f8"
  }
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
  {
    "color": "#d59563"
  }
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
  {
    "color": "#169c03"
  }
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
  {
    "color": "#6b9a76"
  }
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
  {
    "color": "#38414e"
  }
]
},
{
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [
  {
    "color": "#212a37"
  }
]
},
{
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [
  {
    "color": "#9ca5b3"
  }
]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
  {
    "color": "#7274d3"
  }
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
  {
    "color": "#4d4ddb"
  }
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
  {
    "color": "#1f2835"
  }
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.fill",
"stylers": [
  {
    "color": "#f3d19c"
  }
]
},
{
"featureType": "road.local",
"elementType": "geometry",
"stylers": [
  {
    "color": "#9898b8"
  }
]
},
{
"featureType": "transit",
"elementType": "geometry",
"stylers": [
  {
    "color": "#2f3948"
  }
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
  {
    "color": "#fafe52"
  }
]
},
{
"featureType": "transit.station",
"elementType": "labels.text.fill",
"stylers": [
  {
    "color": "#d59563"
  }
]
},
{
"featureType": "transit.station.rail",
"elementType": "geometry",
"stylers": [
  {
    "color": "#fafe52"
  }
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
  {
    "color": "#169ba3"
  }
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
  {
    "color": "#515c6d"
  }
]
},
{
"featureType": "water",
"elementType": "labels.text.stroke",
"stylers": [
  {
    "color": "#17263c"
  }
]
}
]

and this is link

https://maps.googleapis.com/maps/api/staticmap?key=YOUR_API_KEY¢er=29.921068146058925,433.86609008312223&zoom=17&format=png&maptype=roadmap&style=element:geometry%7Ccolor:0x242f3e&style=element:labels.text.fill%7Ccolor:0x746855&style=element:labels.text.stroke%7Ccolor:0x242f3e&style=feature:administrative.country%7Celement:geometry%7Ccolor:0xaf01ab&style=feature:administrative.locality%7Celement:geometry%7Ccolor:0xfe70fb&style=feature:administrative.locality%7Celement:labels.text.fill%7Ccolor:0xd59563&style=feature:administrative.province%7Celement:geometry%7Ccolor:0xfe01f8&style=feature:poi%7Celement:labels.text.fill%7Ccolor:0xd59563&style=feature:poi.park%7Celement:geometry%7Ccolor:0x169c03&style=feature:poi.park%7Celement:labels.text.fill%7Ccolor:0x6b9a76&style=feature:road%7Celement:geometry%7Ccolor:0x38414e&style=feature:road%7Celement:geometry.stroke%7Ccolor:0x212a37&style=feature:road%7Celement:labels.text.fill%7Ccolor:0x9ca5b3&style=feature:road.arterial%7Celement:geometry%7Ccolor:0x7274d3&style=feature:road.highway%7Celement:geometry%7Ccolor:0x4d4ddb&style=feature:road.highway%7Celement:geometry.stroke%7Ccolor:0x1f2835&style=feature:road.highway%7Celement:labels.text.fill%7Ccolor:0xf3d19c&style=feature:road.local%7Celement:geometry%7Ccolor:0x9898b8&style=feature:transit%7Celement:geometry%7Ccolor:0x2f3948&style=feature:transit.line%7Celement:geometry%7Ccolor:0xfafe52&style=feature:transit.station%7Celement:labels.text.fill%7Ccolor:0xd59563&style=feature:transit.station.rail%7Celement:geometry%7Ccolor:0xfafe52&style=feature:water%7Celement:geometry%7Ccolor:0x169ba3&style=feature:water%7Celement:labels.text.fill%7Ccolor:0x515c6d&style=feature:water%7Celement:labels.text.stroke%7Ccolor:0x17263c&size=480x360

Ismail Farooq · Accepted Answer

You need the following step to show the map

Get Google Map Api key
Enable Google Static Maps API https://console.developers.google.com/apis/api/static_maps_backend/overview?PROJECTNAME
Treat Google Static code like an image you can use HTML or CSS to display it.

Example

See here for more

If you want to do it via JSON you need to see google official example

how to embed styled google map in your site

Answers (1)

Related Questions