Create And Customize Maps With Google Map Builder

By . Filed in Tools

There are now plenty of geolocation-based WordPress themes available. They provide customized maps so that the users can easily find specific places like restaurants, event venues, hotels and more. I noticed that some of web developers have been including their themes with map support and often use it within the contact page.

They utilize maps, Google Map to be exact. And as you may have noticed, Google Map is one of most powerful map services on the web. Customizing the map can be easily done using map styles API control. But it requires one to understand javascript programming a bit.

Try this brand new Google Map Builder, a tool to easily customize your own Google Map. It has a pretty 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 has 75+ readymade map themes from Snazzy Maps.

Overview

Google Map Builder works exactly the same like customizing Google Map using map styles API. It gives you a User Interface (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.

At the top, you can provide the map with the API key which is useful for monitoring the application’s Maps API usage. The size and coordinates of the map center can also be defined easily.

The options on the left are used to customize the look of the map: zooming, map control, dragging, map type and map theme. All the changes will be automatically previewed in 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, as the icon is about a hospital, then I will enter the hospital’s name to the Add Marker(s) text field. You may also give some addresses (one per line) here. When you add an address, the map will automatically locate it, so make sure the address and the map are as accurate as possible.

Then put the icon url in the Marker Icon URL field.

And here’s the result.

Get The Code

Now that you have customized the map, the next step is to put it on the Web. To get the code, scroll to the bottom of the page and you’ll see the Get Code button.

Just hit the button then the code will appear above the map. Here, you’ll get the javascript code inside the script tag and CSS style for the map size, like what you have if you styled the map manually. Easily copy and paste all the code and put them into your HTML before the head closing tag.

Final Thought

There are lots of options provided in the Google Map Builder, but most of them are only for map control. To customize the map’s look, you can only depend on themes from Snazzy Map, but if they are not to your liking, you can customize the map manually (this tutorial may help) or work with other tools such as Google Maps Colorizr or Google Styled Map Wizard.

Author:

Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.

Advertisement

Comments are closed. Contact Us.