Style Google Maps

Hi all, I hope you are fine.

Today I'll tell you about styling Google Maps. Did you ever wanted to change your map colour?
Did you ever wanted to remove labels, roads or any map details?
Well, it's pretty simple actually. Here is what are we going to do:

1- This is code for a map before styling
var mapDiv = document.getElementById('map_canvas');var mapOptions = {zoom : 11, center : new google.maps.LatLng(40.6700, -73.9400)};var myMap = new google.maps.Map(mapDiv, mapOptions);

2- All you have to do to style your map is to add option styles to the mapOptions. Where styles is the array of map styles, for example to change roads colour to yellow we use this options:
var mapOptions = {zoom : 11, center : new google.maps.LatLng(40.6700-73.9400), styles : [ {featureType : "road", elementType : "all", stylers : [{visibility : "on"},
{hue : 20}, {lightness : 20}]}]};

If you want to make roads invisible use this options:
var mapOptions = {zoom : 11, center : new google.maps.LatLng(40.6700-73.9400), styles : [ {featureType : "road", elementType : "all", stylers : [{visibility : "off"}]}]};



There is a very nice website have a lot of cool styles, check it out 

You can learn more about styling google maps from

 Have fun :D

Comments

Popular Posts