CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Thanos
Thanos

Reputation: 586

How to change the default google maps

Recently I've found out a way to change google maps appearance as the following image suggests

enter image description here

In the help menu, it is adviced that JSON can be used to modify the default map or create a new style. Even though I can get the code and understand its meaning, I don't know how and where to use it to create a black and white map style. How can I do that?

The code is 

[
  {
    "featureType": "landscape",
    "stylers": [
      { "color": "#ffffff" }
    ]
  },{
    "featureType": "road",
    "stylers": [
      { "color": "#000000" }
    ]
  },{
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      { "color": "#ffffff" }
    ]
  },{
    "featureType": "poi",
    "stylers": [
      { "color": "#ffffff" }
    ]
  }
]

Google suggests a way but I don't know how to apply it. Where is MapOptions for instance?

Any ideas are more than welcome!

Upvotes: 0

Views: 1384

Answers (1)

jonco91
jonco91

Reputation: 95

Here's a FULL example for you to follow:
I added it all here.

<!DOCTYPE html>
<html>
  <head>
    <title>Google Maps</title>

        <style> #map-canvas { margin: 0; padding: 0; height: 400px; width: 100%; }
        </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script>
  function initialize() {

    var styles = [
    {
      "featureType": "landscape",
      "stylers": [
        { "color": "#ffffff" }
      ]
    },{
      "featureType": "road",
      "stylers": [
        { "color": "#000000" }
      ]
    },{
      "featureType": "water",
      "elementType": "geometry",
      "stylers": [
        { "color": "#ffffff" }
      ]
    },{
      "featureType": "poi",
      "stylers": [
        { "color": "#ffffff" }
      ]
    }
  ];

    google.maps.visualRefresh = true;
    var styledMap = new google.maps.StyledMapType(styles,{name: "Styled Map"});
    var mapDiv = document.getElementById('map-canvas');

  var myOptions = {
    zoom: 4,
    center: new google.maps.LatLng(-25.363882, 131.044922),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

    map = new google.maps.Map(mapDiv, myOptions);
    map.mapTypes.set('map_style', styledMap);
    map.setMapTypeId('map_style');

}

google.maps.event.addDomListener(window, 'load', initialize);

  </script>

  </head>
  <body>
    <div id="map-canvas">
  </body>
</html>

Upvotes: 1

Related Questions