How to Add Style to Your Google Maps

Google Maps is an amazing tool provided by Google. It lets you put interactive and informative maps on your website for free. But there’s one drawback when using free tools – they all start to look the same after a while.

The good news is that Google has come up with a solution: the Google Maps API. In this post, I’ll show you how to use the API to make your map look unique and stand out.

The Google Maps Library

To get started, we need to include the Google Maps JavaScript library in our webpage. This will allow us to use the API and customize our map.

Google Maps Components

There are three main components that we can use to style our Google Maps: featureTypes, elementTypes, and Styles.

When it comes to selecting things on a map, featureTypes is our go-to tool. It’s kind of like the CSS selectors, but for geographic objects like roads, water, and parks. It makes our lives easier by giving us control over the map. To make things even better, we’ve compiled a list of featureTypes that we can use.

To learn more, you can visit the following API reference: Google Maps feature type specification.

The elementTypes feature is used to target specific parts of the geographical objects, like their shape, fill, stroke, and labels.

On the other hand, stylers is an array of properties that allow you to adjust the colors and visibility of the objects. You can use HSL (Hue, Saturation, Lightness) or Hexadecimal for the color format.

Let’s talk about how to use these features in Google Maps.

First, you’ll need to add an element to your HTML with a unique id to hold the map.

To style the map using Google Maps, you’ll use JavaScript objects. All the styles are nested under a certain tag – think of it as JavaScript 101. You can place the scripts before the closing body tag or in the head tag using the window.onload function. Here’s an example:

window.onload = function () {

// add your scripts here

}

Alright, here’s the rewritten content:

To start off, let’s create a variable called styles to hold the map style rules.

window.onload = function() {

var styles = [ /* we will add the style rules here. */ ];

};

Next, we need to display the map in the desired container using the following functions.

window.onload = function() {

var styles = [ /* we will add the style rules here. */ ];

var options = {

mapTypeControlOptions: {

mapTypeIds: [‘Styled’]

},

center: new google.maps.LatLng(-7.245217594087794, 112.74455556869509),

zoom: 16,

disableDefaultUI: true,

mapTypeId: ‘Styled’

};

var div = document.getElementById(‘surabaya’);

var map = new google.maps.Map(div, options);

var styledMapType = new google.maps.StyledMapType(styles, { name: ‘Styled’ });

map.mapTypes.set(‘Styled’, styledMapType);

};

At this point, you should see the map displayed on your page, just like this.

So here’s the deal: I want to give the water a different color. To make this happen, we just need to tweak the style rules a bit. Take a look at the code snippet below:

“`

var styles = [

{

featureType: ‘water’,

elementType: ‘geometry.fill’,

stylers: [

{ color: ‘#adc9b8’ }

]

}

];

“`

This code modifies the fill color of the water on the map to a fancy shade labeled #adc9b8. And voilà, this is what you get: a stunning new look for the water element.

Now, let’s switch up the scenery by changing the color. This time, we’ll use the HSL color format so we can tweak the brightness. Check out the code below:

var styles = [ < code>< featureType: 'water', elementType: 'geometry.fill', stylers: [ < code>< color: '#adc9b8' > ] >, < code>< featureType: 'landscape.natural', elementType: 'all', stylers: [ < code>< hue: '#809f80' >, < code>< lightness: -35 > ] >
];

When we add this code, the landscape will transform into something like this:

So let’s talk about the style rules for some other things on the map. I’ll show you how the finished map will look.

If you’re curious to see the final version in all its glory, take a stroll to the demo page.

I’ve got some nifty tools for you to try out if you prefer working with a friendly visual interface instead of manually writing the script.

And if you’re itching for more information on how to implement the Google Maps API for map styling, I’ve got your back. Here are some references that you can check out:

– “Getting Started with Google Maps API” by Google Developers

– “Google Maps Stylers Specification” by Google Developers

– “Google Maps Feature Types specification” by Google Developers

So go ahead, dive into the world of Google Maps styling and let your creativity flow!