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
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:
Have fun :D
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
Comments
Post a Comment