Site Builder Report logo Menu
Try Atlist

How To Create a Google Map With Multiple Locations

A tutorial for creating a map with multiple locations and custom styles that can be embedded on any website.

Our work is supported by affiliate commissions. Learn More

Updated May 3 2022 Steve Benjamins Steve Benjamins

Today I’m going to show you how to create a Google Map with:

  • Multiple markers
  • Beautiful custom styles

By the end, you’ll know how to create a map just like this:

The map you create can be embedded on any website.

Let’s do this!

Note: Another word for locations is markers or pins— but in this tutorial we’ll refer to them simply as locations.

Step 1: Use Atlist To Create a Map

We are going to use Atlist to create our map. 

Atlist is an easy to use tool for creating beautiful, powerful maps.

I’m actually the co-creator of Atlist and we created it for this exact purpose. 

So to start, sign up at Atlist.

We are going to use Atlist to create our map.

We are going to use Atlist to create our map.

Step 2. Create A Map

Our first step is to create a new map.

We’ll be making a map of the best sledding hills in toronto— so we’ll make our map name, The Great Sledding Hills of Toronto

Creating our first map.

Creating our first map.

Step 3. Add Locations

We’re going to add multiple locations to our map. There are two ways to do that in Atlist: 

  1. Manually add each address
  2. Upload a CSV spreadsheet

Add Manually

To manually add a location, just search for it in the search box:

Searching for our first location.

Searching for our first location.

Geocoding happens automatically but you can always adjust location data by editing the marker and switching to latitude and latitude. (This is also helpful if you need to pin point a location.)  

Upload CSV

Uploading a CSV is an easier way to pin multiple locations at once. To do it, just click Import CSV (below):

Then upload your CSV!

The important thing to understand is that CSV’s need a specific formatting— which you can read more about here.

Now we have ten locations:

We've successfully uploaded our CSV.

We've successfully uploaded our CSV.

What is a CSV? — CSV’s are plain-text spreadsheets. It’s a universal format and Google Docs, Apple Numbers and Microsoft Excel can all export spreadsheets as a CSV.

Step 4. Add Content and Organize

Now clicking a location will open a modal. 

Modals can contain all sorts of content— photos, videos, HTML, text and… just about anything you could want!

Adding content to our modal.

Adding content to our modal.

You can also organize locations into groups. To add a group, just click the plus sign. With groups, we can organize sledding hills by difficulty! 

If you'd like, you can organize locations into groups.

If you'd like, you can organize locations into groups.

But for now, we’re not going to use groups.

Step 5. Map Style

Next up, it’s time to customize our map style! 

Custom Map Style

To set a custom map style, we’ll need to go Style -> Map and change our theme:

Click 'change' to change the map style.

Click 'change' to change the map style.

From there we can choose from a variety of themes and also add our own custom theme— which we can find on Snazzy Maps.

Here’s our new theme:

Our new map theme!

Our new map theme!

Map style controls a variety of elements on the map— including points of interest, highways, icons, street styles and more.

Marker Icon & Color

Next let’s go to Style -> Markers. Then we can choose a marker icon and set the marker color, size and border: 

Customizing our locations marker.

Customizing our locations marker.

Very nice! 

Note: If you have markers organized into groups, you can also custom marker styles for that group.

Step 6. Optional Controls

Now if we click over to Controls, we’ll find some additional options: 

  • Current Location — Adds a button in the top-right corner to show a users current location on the map. This can’t be on by default for privacy reasons. 
  • Street View — Add a button for Google Street View.
  • Disable Zoom — Disable zooming for users. 
  • Full Screen Button — Allow users to open the map in full screen.

Step 7. Publish & Share

It’s time to publish our map! 

If we click over to Publish we can see a few more additional options:

  • Sidebar / Search Bar — This adds a sidebar with a search box. Especially usefulfor business owners who need a store locator.
  • Directions Button — This adds a button to modals for route planning.  

How To Publish a Map

With Atlist you can share maps in three ways:

  1. Share the maps public URL
  2. Embed the map on your website
  3. Save your map as an image

Embed Your Map 

In this tutorial, we’ll cover how to embed your map— it’s the most popular way to publish a map. 

To embed the map you’ll need to copy and paste the embed code code into your website:

This is your Atlist embed code.

This is your Atlist embed code.

Important note: an embed code is code, so if you’re using a website builder like Wix or Squarespace, you’ll need to paste the embed code as a code block.

Customizing the Embed Code

You always can change the embedded maps height and width. Just adjust the width or height in the embed code. You can set them as a percentage (which fills up the available container) or as a pixel (which sets an exact size):

The width and height can be adjusted.

The width and height can be adjusted.

Once you have it set the way you like, you’re good to go!

What about Google My Maps?

Google My Maps is Google’s map creator. It is difficult to use and has limitations— especially around style: 

  • Only a few map styles
  • Can’t customize the sidebar or modal window
  • Can’t change the size of markers 

That said, it also has some positives— mainly that it’s free to use and is great for drawing shapes and creating directions.

Note: You can’t use plain ol’ Google Maps to create a custom map with multiple locations.

Conclusion

Thanks for reading! A few final, helpful tips: 

  • You can try Atlist at atlistmaps.com.
  • You don’t need to re-embed your map every time you change it. Maps will automatically update.
  • You don’t need to an API key from the Google Maps API to use Atlist. Atlist takes care of that.  
  • Atlist totally works on mobile devices— so everything you can do on desktop, you can do on mobile.