NearPlace

Join 1,400+ marketers, founders, UX designers, and software engineers and receive our next insights:


September 2018
M T W T F S S
« Aug    
 12
3456789
10111213141516
17181920212223
24252627282930

Categories


Google Maps Customization

NearPlaceNearPlace

It is a good sign if you started looking for an information on how to customize Google Maps. You might be asking “Why?”, but the answer is obvious – you want to make your map much more attractive to the users on your website. We both agree that the basic Google Maps template doesn’t look awesome, and it has a really common look which is used by the majority of websites.

google-maps

In our guide, you will learn how to easily, and the most important – how to effectively customize Google Maps to make them look really good or at least unique. We will describe various tools and websites which might help you when you want to change the map.


How to start customizing Google Maps?

If you want to make the most basic changes you should create your own map in Google My Maps where you can add multiple markers, icons and photos. To start editing your map you need to go to the menu of GMaps and find “Your places” option.

google-maps-your-places

Then you will notice a few different tabs but we are interested in “Maps” one. If you have created already your map before and you want to edit it, your map will be displayed on this listing. If not, you need to create a new map which you want to customize.

google-maps-create-or-edit

We will choose our own map with multiple pinpoints which we have created before so we don’t have to add all the markers from the beginning. If you would like to add some markers you can also use our other tutorial about how to add multiple markers on Google Maps.

google-my-maps-multiple-markers

In the case of coding customization, we advise you to check the list of best style editors for Google Maps below.


Google My Maps – Graphical

Basically, Google doesn’t offer too much when it comes to customization but you can find features which allow you to change the colour and icon of the markers. You just need to create a marker at first and then just click on it, and you will notice a few options. For sure the first thing you will notice is a possibility to change the colour of a marker. Sadly there are only a few colours available with Google My Maps customization.

google-my-maps-marker-change-color

Thankfully when it comes to the icons the choice is much bigger.

google-my-maps-marker-change-icon

Also with the Google My Maps, you can add your own icon which is related to your business or hobbies. If you just would like to add an interesting icon but not really related with anything there are also many websites with free icons on which you can find various projects of the pinpoint styles. Probably the best example of a website like that is Iconfinder which offer a really big amount of original icons.

iconfinder

Uploading icon is mega simple! Just expand the icons listing and you will notice a big “Custom icon” button. It allows you to choose the file from many sources like Google Drive or your own computer and then to upload it.

google-my-maps-marker-custom-icon

If it comes to the map style the choice which Google offers is really poor. There are only 9 base maps which you can choose from.

google-base-maps

Sadly if it comes to the customizable maps in Google My Maps it is pretty much everything. But no worries – in the later part of the article you may read about third-party tools which will let you customize your Google Map really effectively.


How to create a map marker without a label

Creating a custom Google Map with markers without a label is pretty easy. When it comes to Google My Maps API if you code markers they don’t display the labels by default. So once you code the map with simple multiple markers you don’t have to be bothered about removing the labels.

marker-wtihout-label-api

Hmmm..but how to do it through graphical UI in Google My Maps..? Easy – once you create a marker just don’t give it the description, and optionally even a title if you don’t want to have it displayed. To be honest, in graphical UI it doesn’t look as good as with the API so we advise you to use the JavaScript code if you want to hide labels.

marker-no-label-graphical

Of course, we leave the choice to you :).

Best map style editors to customize your Google Maps

1. Snazzy Maps

In my opinion, it is the best tool to customize Google Maps I ever saw. The tool offers a countless number of map styles which you can use on your website. The only problem is that you can’t really modify your style of the map through a graphical UI. You need to paste the JavaScript code, but it isn’t really hard and troublesome especially if you have at least a little knowledge about coding, of course when you follow the Google Developers guide which you can find there.

google-maps-copy-code

Now once you have pasted the code, remember to insert your API Key, otherwise, the custom map will not work. If you don’t really know what API Key is or how to generate it, at first, you should read our other tutorial.

API-KEY

Now once we have sorted the basic things with Google API code, go to the Snazzy Map, choose the style which you like the most, or which fits your website the most. We will choose the Assasin’s Creed IV map for an example because it looks really nice.

assasin-creed-map-style

I bet you have noticed already JavaScript Style Array code below. It is what we are interested in, copy the style array and let’s go back to our Google Maps code. Now just find your styledMapType object which contains your array of styles. Remove everything inside and replace it with the new array.

assasin-creed-map-style-success

If you would like to add multiple markers to your customized Google Maps too, just do it as with a basic Google Maps API. Are you wondering how to do it? You can find it in our other tutorial where we are typing about adding multiple pinpoints on Google Maps through Graphical and API method.

custom-styles-markers

If you are a non-coder, don’t worry you can use a Snazzy Map builder which allows you to build the Google Map with Snazzy styles. It is really easy and fast solution for every map beginner and also we have typed a guide about the graphical map creators before, so don’t hesitate and check it out here!


2. Mapstyle

Mapstyle works really similar to Snazzy maps but it is more likely Google My Maps but for APIs. You can choose one of few themes which you like and see on a preview how it would look like.

google-maps-themes

Once you choose your theme you may also adjust the density of features like roads, landmarks and labels, really useful when for example you want to hide road routes.

density

There is also an advanced option which allow you to do various things like changing the colour of labels e.g for your neighbourhood.

mapstyle-neighbourhood

Now, when you are done with the changes you just need to press the “finish” button.

mapstyle-finish

After you confirm that you are finished with the customization there will be displayed a special pop-up thanks to which you can import the style. At first, we will use the same method as with the Snazzy Maps. We will paste the JSON code into our object with an array of styles.

mapstyle-JSON

As you see it is really easy even for non-coders to just replace a fragment of code which Google Developers have written for us. Of course, if you want to add markers you do it in the same way as with Snazzy Maps so be sure you read about the editor above!

mapstyle-success


3. Mapstylr

Another and probably last worth to mention style editor for Google Maps is Mapstylr. Maybe not as advanced as Snazzy Maps and Mapstyle when it comes to the map templates, but really useful when you want to change the colours of the labels or landscapes. You can change the colour of everything you want. For example, let’s change the colour of country labels.

mapstylr-features

But if you would like to change a map template instead of only details like labels you are allowed to do it with Mapstylr too. Just go to their homepage and below you will notice a few templates which are the most popular, just released, etc. Once you click on the map preview which you like, you will display a special pop-up with JSON code. Now you just need to follow the same steps as with Snazzy Maps. So paste the custom map code to the special object with an array of styles.

mapstylr-success

Also adding markers to the new map templates is the same as it is with the classic map markers. More about it you can read in our tutorial about the multiple markers on Google Maps. Anyway, we have prepared a GIF for you how it looks like so you should understand it quickly even without reading other articles. We will copy the classic Google Map code to the styled Google Map and you can see below what happens.

mapstylr-markers

Those 3 editors, are the best style tools which you can find at the moment if you want to edit your Google Maps styles. In my opinion the most advanced one is Snazzy Map and it gives you the biggest amount of maps styles from all the editors, but we leave the choice to you.


How to change marker icon – API

As you know many people have their businesses and I bet that the majority of them would prefer to have their company icon on the map instead of some random icon which everyone can have. At the beginning of the tutorial we have already said how to change the icon in Google My Maps, but when it comes to the API you have to start coding. Let’s say you have already coded your map and markers, and now you would like to change the icons.

google-maps-markers

It is pretty easy – the only thing you have to do is to add a value called “icon” to your marker code. Also to make it work you need to give the address of the location of your icon. We have used the example from the Google Developers website to show you how it looks.

icon-marker

Once you paste the code it will work for sure, if not check your code once again.

marker-icon-success


Marker animations – API.

Once it comes to the Google Maps customization you should also know how to customize the markers. That’s why we will show you an animation which might make your map more dynamic and attractive to the user. You just need to add some code to your already existing markers. It is a function called toggleBounce which will allow your marker to bounce on the map.

bouncy-marker

Now when you added the function and the calling code to your existing marker try it and see if it works. You should also be noticed that there is a drop animation added, so the effect is even better.

bounce-google-maps-marker-works

Anyway if you don’t really like the bounce animation, and you prefer only the drop one, it is even easier to code. You just need to add “animation: google.maps.Animation.DROP,” to the properties of your marker and it will work instantly. Don’t you believe me? Check it out below.

marker-drop

If you would like to read more about the animations with the Google Maps API you should check the Google Developers website.


WordPress plugins to customize Google Maps

If you are running your website on WordPress, you can, of course, use the previous methods and just implement your code into the page you want. But when you are looking for easier solutions the plugin will be a perfect choice. The most popular and in my opinion the best style plugin for WordPress is SnazzyMaps and it is completely free for a personal use. It allows you to change your styles without interfering into a code.

snazzymaps-wordpress

Remember that the tool only helps to customize your existing map, so it will not generate one. If you would like to generate your own custom Google Maps which also might be customized already we advise you to check various Google Maps plugins about which you can also read in our special comparison of best WordPress Google Maps plugins.


Final thoughts

As you could have noticed customizing Google Maps isn’t really hard especially when we talk about the Graphical Method with Google My Maps. Once it comes to the API it might require some more knowledge but basically, it is copying the code from Google Developers website and little modifying it for our own preferences, so if you follow every step wisely you don’t even to be a coder to understand the API method. Also if you are still learning and not really into API yet, once you get an error we advise you to check it on our listing of the most popular Google Maps errors, thanks to it you will find the solution quickly. After the guide for sure now you know how to customize Google Map effectively.