javascript - How to style Google Maps with their API - Stack Overflow

admin管理员组

文章数量:1352884

I'm trying to change the style of a Google Map, but I'm not sure how. Google has given me these object attributes:

[
  {
    "stylers": [
      { "hue": "#ff0022" },
      { "saturation": -16 },
      { "lightness": -5 }
    ]
  }
]

But I am unsure how to make that work with the following code, which is a generated Google map:

<script type="text/javascript" src="">
</script>
<div style="overflow:hidden;height:500px;width:700px;">
  <div id="gmap_canvas" style="height:500px;width:700px;"></div>
  <a class="google-map-data" href="" id="get-map-data">google maps</a>
  <iframe src=".php"></iframe>
  <a class="google-map-data" href="" id="get-map-data">;/a></div>
  <script type="text/javascript"> function init_map(){
    var myOptions = {
        zoom:15,
        center:new google.maps.LatLng(51.8476894,-1.355176799999981),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };

        map = new google.maps.Map(document.getElementById("gmap_canvas"), 
          myOptions);

        marker = new google.maps.Marker({
          map: map,position: new google.maps.LatLng(51.8476894, -1.355176799999981)});
        infowindow = new google.maps.InfoWindow({
          content:"<div style='position:relative;line-height:1.34;overflow:hidden;white-space:nowrap;display:block;'><div style='margin-bottom:2px;font-weight:500;'>1 Market Street</div><span>1 Market Street <br> OX4 2JR  Woodstock</span></div>"
        });
        google.maps.event.addListener(marker, "click", function(){
          infowindow.open(map,marker);});infowindow.open(map,marker);}
        google.maps.event.addDomListener(window, 'load', init_map);
        </script>

I've tried adding them to the myOptions, but it's not working:

    var myOptions = {
        zoom:15,
        center:new google.maps.LatLng(51.8476894,-1.355176799999981),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        stylers: [
        { hue: "#00ffe6" },
        { saturation: -20 }
      ]
  };

And here is the link to the styling API. But I can't make heads or tails of it. Could anyone help?

I'm trying to change the style of a Google Map, but I'm not sure how. Google has given me these object attributes:

[
  {
    "stylers": [
      { "hue": "#ff0022" },
      { "saturation": -16 },
      { "lightness": -5 }
    ]
  }
]

But I am unsure how to make that work with the following code, which is a generated Google map:

<script type="text/javascript" src="http://maps.google./maps/api/js?sensor=false">
</script>
<div style="overflow:hidden;height:500px;width:700px;">
  <div id="gmap_canvas" style="height:500px;width:700px;"></div>
  <a class="google-map-data" href="http://www.addmap" id="get-map-data">google maps</a>
  <iframe src="http://www.embed-google-map./map-embed.php"></iframe>
  <a class="google-map-data" href="http://www.nuckelino.de" id="get-map-data">http://www.nuckelino.de</a></div>
  <script type="text/javascript"> function init_map(){
    var myOptions = {
        zoom:15,
        center:new google.maps.LatLng(51.8476894,-1.355176799999981),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };

        map = new google.maps.Map(document.getElementById("gmap_canvas"), 
          myOptions);

        marker = new google.maps.Marker({
          map: map,position: new google.maps.LatLng(51.8476894, -1.355176799999981)});
        infowindow = new google.maps.InfoWindow({
          content:"<div style='position:relative;line-height:1.34;overflow:hidden;white-space:nowrap;display:block;'><div style='margin-bottom:2px;font-weight:500;'>1 Market Street</div><span>1 Market Street <br> OX4 2JR  Woodstock</span></div>"
        });
        google.maps.event.addListener(marker, "click", function(){
          infowindow.open(map,marker);});infowindow.open(map,marker);}
        google.maps.event.addDomListener(window, 'load', init_map);
        </script>

I've tried adding them to the myOptions, but it's not working:

    var myOptions = {
        zoom:15,
        center:new google.maps.LatLng(51.8476894,-1.355176799999981),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        stylers: [
        { hue: "#00ffe6" },
        { saturation: -20 }
      ]
  };

And here is the link to the styling API. But I can't make heads or tails of it. Could anyone help?

• javascript
• google-maps
• google-maps-api-3

Share Improve this question Follow edited Mar 7, 2014 at 14:32 asked Mar 7, 2014 at 14:21 user1469270user1469270 5

• The documentation already has an example of creating styled map (on the link you shared), what have you tried so far? Look again developers.google./maps/documentation/javascript/… – alpakyol Commented Mar 7, 2014 at 14:29
• I can get an array of styles, but I'm unsure where to put it? – user1469270 Commented Mar 7, 2014 at 14:30
• I've edited the post. I've tried adding the styles to the object, but no luck. I'm still relatively new as JS. – user1469270 Commented Mar 7, 2014 at 14:32
• developers.google./maps/documentation/javascript/… You should put it on Option Object that you contruct your map. Or set this option with map.set("styles", stylesOpts) – fernandosavio Commented Mar 7, 2014 at 14:33
• Adding a custom style for google map can be found here. It helped me to add a custom map to my website - youtu.be/yzMddgWtoJA – Prem Commented Mar 23, 2018 at 3:29

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

You simply add the stylers to your map options (as the links in the ments explains) :

var stylers = [{
  "stylers": [{ 
     "hue": "#ff0022"
   }, {
     "saturation": -16
   }, {
     "lightness": -5
   }]
}];
var myOptions = {
    ...
    styles: stylers
};

Here is your code from above in a fiddle using the stylers -> http://jsfiddle/cKQxb/ producing this :

From the first example in the documentation:

<script type="text/javascript" src="http://maps.google./maps/api/js?sensor=false">
</script>
<div style="overflow:hidden;height:500px;width:700px;">
  <div id="gmap_canvas" style="height:500px;width:700px;"></div>
  <a class="google-map-data" href="http://www.addmap" id="get-map-data">google maps</a>
  <iframe src="http://www.embed-google-map./map-embed.php"></iframe>
  <a class="google-map-data" href="http://www.nuckelino.de" id="get-map-data">http://www.nuckelino.de</a></div>
  <script type="text/javascript"> function init_map(){
var styles =[
  {
    "stylers": [
      { "hue": "#ff0022" },
      { "saturation": -16 },
      { "lightness": -5 }
    ]
  }
]
var myOptions = {
    zoom:15,
    center:new google.maps.LatLng(51.8476894,-1.355176799999981),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

    map = new google.maps.Map(document.getElementById("gmap_canvas"), 
      myOptions);
    map.setOptions({styles: styles});

    marker = new google.maps.Marker({
      map: map,position: new google.maps.LatLng(51.8476894, -1.355176799999981)});
    infowindow = new google.maps.InfoWindow({
      content:"<div style='position:relative;line-height:1.34;overflow:hidden;white-space:nowrap;display:block;'><div style='margin-bottom:2px;font-weight:500;'>1 Market Street</div><span>1 Market Street <br> OX4 2JR  Woodstock</span></div>"
    });
    google.maps.event.addListener(marker, "click", function(){
      infowindow.open(map,marker);});infowindow.open(map,marker);}
    google.maps.event.addDomListener(window, 'load', init_map);
    </script>

Or when you create the map:

<script type="text/javascript" src="http://maps.google./maps/api/js?sensor=false">
</script>
<div style="overflow:hidden;height:500px;width:700px;">
  <div id="gmap_canvas" style="height:500px;width:700px;"></div>
  <a class="google-map-data" href="http://www.addmap" id="get-map-data">google maps</a>
  <iframe src="http://www.embed-google-map./map-embed.php"></iframe>
  <a class="google-map-data" href="http://www.nuckelino.de" id="get-map-data">http://www.nuckelino.de</a></div>
  <script type="text/javascript"> function init_map(){
var styles =[
  {
    "stylers": [
      { "hue": "#ff0022" },
      { "saturation": -16 },
      { "lightness": -5 }
    ]
  }
]
var myOptions = {
    styles: styles,
    zoom:15,
    center:new google.maps.LatLng(51.8476894,-1.355176799999981),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

    map = new google.maps.Map(document.getElementById("gmap_canvas"), 
      myOptions);

    marker = new google.maps.Marker({
      map: map,position: new google.maps.LatLng(51.8476894, -1.355176799999981)});
    infowindow = new google.maps.InfoWindow({
      content:"<div style='position:relative;line-height:1.34;overflow:hidden;white-space:nowrap;display:block;'><div style='margin-bottom:2px;font-weight:500;'>1 Market Street</div><span>1 Market Street <br> OX4 2JR  Woodstock</span></div>"
    });
    google.maps.event.addListener(marker, "click", function(){
      infowindow.open(map,marker);});infowindow.open(map,marker);}
    google.maps.event.addDomListener(window, 'load', init_map);
    </script>

You should put it on Option Object that you contruct your map. Or set this option with map.set("styles", stylesOpts).

Change your code to this:

var myOptions = {
    zoom:15,
    center:new google.maps.LatLng(51.8476894,-1.355176799999981),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: [ // The correct is STYLES not STYLERS
        { hue: "#00ffe6" },
        { saturation: -20 }
    ]
};

https://developers.google./maps/documentation/javascript/reference#MapOptions

The accepted answer explains how to implement styles. To generate the styles, there's a very useful styling tool which allows you to visually tweak map settings, which then spits out the JSON you need:

https://mapstyle.withgoogle./

本文标签： javascriptHow to style Google Maps with their APIStack Overflow