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.
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:
Step 3. Add Locations
We’re going to add multiple locations to our map. There are two ways to do that in Atlist:
- Manually add each address
- Upload a CSV spreadsheet
To manually add a location, just search for it in the search box:
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.)
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:
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!
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!
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:
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:
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:
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.
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.
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.