How to Create And Customize Google Maps

By . in Coding. Updated on .

We all know that Google Maps is one of the most powerful apps on the web to navigate faster and easier throughout the world. However, what most of us may not know is that you can customize Google Maps in terms of UI and other features. And it doesn’t require any JavaScript knowledge as well.

Snazzymaps is a tool that aims to make it easier for anyone to customize Google Map. It has a nice and friendly user interface. You can build the map with just a couple of selections from the select box, and you don’t even have to code.

There are many options for you to control the look of the map. You may also insert your custom marker icon and places. And the best part is it provides plenty pre-built map styles.

Recommended Reading: How To Style Google Maps

Overview

Snazzymaps works exactly the same as customizing Google Maps using map styles API. It gives you a UI that is nicer than what you can do with plain JavaScript code. Within the tool, all options are located in the left panel, leaving the remaining space for the map.

build a map

The options on the left are used to customize the look of the map: size, location, marker, map type and map theme. All the changes will be automatically previewed on the map.

Adding Custom Marker

This tool lets you easily add your custom marker to map places. To do this, firstly you need to provide your marker icon URL and also the address of the place you want to mark.

With this Hospital Building icon from Map Icons, this is how to add the marker.

To start off:

  1. Select Add your first marker option from the left panel.
  2. You will be asked to add a name for the marker and location. Here we simply name it Hospital. For the Location, we can simply click anywhere on the Map, and it will populate the Latitude and Longitude value for you.
  3. Select the “Custom Marker” and upload the icon.
marker control

And here’s the result.

map results

Once done, don’t forget to save the Map. Here, you will need to name the map and add your own Google Maps API key.

save map

Embed the Map

So, now that you’ve customized the map, the next step is to put it on the web. To get the code, scroll down to the bottom of the page and you will see the View Code button.

embed map

You’ll get an HTML iframe tag with the URL to embed the map copy and paste all the code and put them at anywhere into your website content.

Final Thoughts

We’ve just seen how easy it is to create and customize a map using Snazzymap. You can customize the look and feel, size, and a few components within it. All these are built on top of the Google Maps API.

Do let us know about your experience in the comments section below.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail