Custom Google Map Styling

Click To Download Full Source Code

Embedding normal google map in your website is quite easy, but embedding styled map makes your website look elegant and makes your google map look more presentable.

Have You Ever Been Stuck For Styling Google Map?

Here is the answer…

There are many websites/tools available for styling google map.

Some are:-

• https://snazzymaps.com/editor
• https://mapbuildr.com/buildr
• http://www.evoluted.net/thinktank/web-design/custom-google-maps-style-tool

and much more…

But there is a website that can help you to create styled map easily with a little bit of geographical knowledge.

Made by Instrument and open-sourced on Github is “Google Map API Styled Map Wizard”.

The link for this is http://instrument.github.io/styled-maps-wizard/ as well as you can download locally and create your own styled map.

Let’s consider below map example to create a styled map.

Steps to create this map

Step 1:

Open this link – http://instrument.github.io/styled-maps-wizard/

Step 2:

Locate the map area or region you want to style by entering the location in the top right corner box(Hattontown is used as an example).

Step 3:

Select feature to style from the left side panel i.e. (Selectors Panel)

1. Select “All > Road” from Feature Type.
   1. Select “All > Geometry > Fill” from Element Type.
   2. Select “Color” from Stylers and apply (207,186,255) by using (R,G,B) range slider.
2. Click     on “Add” button from the Map Style Panel(right-hand side) to add a new style. (Note: Always use this to apply style for new feature.But there is no need to click on “add” when you apply more than one style for the same feature selected.)
3. Select “All > Landscape > Man made” from Feature Type.
   1. Select All > Geometry” from Element Type.
   2. Select “Visibility” from Stylers and select “off”.
4. Select “All > Landscape > Natural” from Feature Type.
   1. Select “Saturation” from Stylers and drag it to the right side until the box shows “50”.
   2. Select“Lightness” from Stylers and drag it to the right side until the     box shows “80”.
5. Select “All > Point of Interest > Park” from Feature Type.
   1. Select “All” from Element Type.
   2. Select “Color” from Stylers and apply (150,255,165) by using (R,G,B) range slider.
6. Select “All” from Feature Type.
   1. Select “All” from Element Type.
   2. Tick “Invert Lightness” from Stylers.
   3. Select “Hue” from Stylers and click in “Light Blue” area until the     top right box shows “#00ddff”.
7. Select “All” from Feature Type.
   1. Select “All > Labels > Text > Fill” from Element Type.
   2. Select “Color” from Stylers and apply (255,255,255) by using (R,G,B) range slider.

Step 4:

Click on “Edit JSON” button and copy all the styles.

Step 5:

Paste the copied styles within inverted commas into this function:

map.set(‘styles’,[“Copied styles”]);

Steps to create this map in HTML

Step 1:

Add this script and style in your head tag:

<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<style>
    html,body,#map    { height: 100%; width: auto;}
</style>

Step 2:

Add this code in your body section:

<div id="map"></div>

Step 3:

Add this script before the end of body tag:

<script type="text/javascript">
function initMap() {
var mapDiv = document.getElementById('map');
var latlng= new google.maps.LatLng(38.945000,-77.393330); //     (Latitude and Longitude of your location)
var map = new google.maps.Map(mapDiv, {
center: latlng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.MAP
});
var marker = new google.maps.Marker({
position: latlng,
     title: "My Location",    // Title for your location(optional)
     icon: 'images/marker.png' // Map marker image(optional)
});
marker.setMap(map);
map.set('styles', [
{
     "featureType": "road",
     "elementType": "geometry.fill",
     "stylers": [
     { "color": "#cfbaff" }
     ]
     },{
     "featureType": "landscape.man_made",
     "elementType": "geometry",
     "stylers": [
     { "visibility": "off" }
     ]
     },{
     "featureType": "landscape.natural",
     "stylers": [
     { "saturation": 50 },
     { "lightness": 80 }
     ]
     },{
     "featureType": "poi.park",
     "stylers": [
     { "color": "#96e1a5" }
     ]
     },{
     "stylers": [
     { "invert_lightness": true },
     { "hue": "#00ddff" }
     ]
     },{
     "elementType": "labels.text.fill",
     "stylers": [
     { "color": "#ffffff" }
     ]
     }
    ]);
}
    </script>