Did you know, you can customize Google Maps on your site to give your desired look and feel? If the answer is yes, then I must admit you are a really good developer. But if the answer is no, then no worries. Today we’ll learn how to do that. If you are a newbie in JavaScript, I have a solution for that too. Just stick with me for a while.

There are a million reasons why you should customize a Google Maps frame on your site. The most important one would be, you’d like to have the look of Google Maps frame that will blend with your site. The default style will not give you that experience always. Let's have a look at other opportunities too:

  • Hide Points of interest to clear up space
  • Highlight roads on the map
  • Hide specific map elements that are not necessary for you
  • Change the color to blend with your site
  • Make it simple by removing landscapes 

In case you don’t know how to add Google Maps on your site, then checkout this article first. 

Now let's begin with an example.  

[
  {
    "featureType": "all",
    "stylers": [
      { "color": "#C0C0C0" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      { "color": "#CCFFFF" }
    ]
  },{
    "featureType": "landscape",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]

The above code snippet will make all map features to gray, then colors arterial road geometry in blue and will hide all the landscapes completely. All these are done with JSON. Now you may ask, what is featureType, what is elementType or stylers? Well, featureType selects the style modification for features. Now, features would be the geographic characteristics on the map like roads, parks, ponds and more. elementType would be the sub-parts of any features like labels or geometry. elementType would tell the feature its property. stylers is the rule to apply to any selected features and elements. They select color, visibility, and weight of any features.

Haven't I told you that you don’t need any coding to customize your map? Here’s how to do that. 

Step 1: Have a look at the Google Maps APIs Styling Wizard.

Step 2: Adjust the density of “Roads”, “Landmarks” and “Labels”.

Or select the theme you like.

Step 3: Now these are the simple stuff. To do some more advanced tuning you need to hit on “More Options”.

Step 4: This is the part where you get the complete freedom of designing the way you need it. To change the text color do the following.

Step 5: If you want to hide a few things you can do so by doing this (marked in the image below).

Step 6: You can also control the look of the roads. 

Step 7: When you get your desired style, click on "Finish".

Step 8: After clicking on "Finish" you'll get a prompt giving you the JSON code for that style. Click on "Copy JSON".

Step 9: Now, you need to paste the JSON code in “styles:” inside the JavaScript code. It will work like a magic. 

Step 10: See where I pasted it.

I hope you have a clear understanding. You can have a look at my code if you want.

DOWNLOAD MY CODE

Please note, “YOUR_API_KEY” needs to be replaced with your Google Maps API key. Hope you have learned a new trick today. And don't forget to share your experience in comment section. Happy designing :)