javascript - how to embed styled google map in your site

I had used used google map editing service from here :

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

;center=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

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

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

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./maps/api/staticmap?key=YOUR_API_KEY&center=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

Share Improve this question edited Apr 24, 2017 at 5:48 Ismail Farooq 6,8672 gold badges31 silver badges47 bronze badges asked Apr 18, 2017 at 7:27 Sidhant Sood 451 gold badge2 silver badges10 bronze badges

you need google map APi key for this – Ismail Farooq Commented Apr 18, 2017 at 7:37
@IsmailFarooq i have my api key but how to add json – Sidhant Sood Commented Apr 18, 2017 at 7:38
the url you provided has missing the API KEY "YOUR_API_KEY" see example jsfiddle/api/post/library/pure – Ismail Farooq Commented Apr 18, 2017 at 7:41
i know i think it is not allowed to share on stack overlow. because everytime when i share my api key someone edit my post and remove api key. so this time i didnt add one @IsmailFarooq – Sidhant Sood Commented Apr 18, 2017 at 7:43
Thanks for your help it works for me.Please avoid discussion. And, please up vote this Question. It is already graving my reputation. – Sidhant Sood Commented Jun 15, 2017 at 18:29

Add a ment |

1 Answer 1

Sorted by: Reset to default 2

You need the following step to show the map

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

Example

<img width="600" src="https://maps.googleapis./maps/api/staticmap?key=YOUR_API_KEY&center=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" alt="Google Map of Albany, NY">

See here for more

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - how to embed styled google map in your site - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)