Learn to style custom google maps

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:-

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.

Image-main

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

From this

Image-1

To this

Image-2

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:

Step 2:

Add this code in your body section:

Step 3:

Add this script before the end of body tag:

Click To Download Full Source Code

Nilay Panchal

Nilay Panchal | Jr. Web Designer

I am a web designer who works at Yudiz Solutions Pvt. Ltd. - a leading Mobile Apps and Game Development company. I wrote this blog to share my knowledge and ideas to others. I am passionate about music and loves to sing.
mm

Nilay Panchal Jr. Web Designer

I am a web designer who works at Yudiz Solutions Pvt. Ltd. - a leading Web, Mobile Apps and Game Development company. I wrote this blog to share my knowledge and ideas to others. I am passionate about music and loves to sing.

Comments are closed.

Top