Make a Map with Clickable Pop-up Infowindows and Images
Give your website, event, or blog post the impact it deserves with an interactive location map. Readers can make much more sense of geography when it’s plotted visually. Think through your own experiences navigating a festival, a tour, or just across town. It’s just easier to understand how places relate to one another when you can see them spatially.
View Santa Monica Mechanics (Location Names) in a full screen map
The good news is it’s easier than ever to be able to create these maps. In this tutorial we’ll create one like above, complete with clickable markers that show infowindow boxes and even have custom images inside.
Include a Description and Other Text in Your Pop-up
The easiest way to get started is to use an Excel spreadsheet (Numbers, Google Sheets, and others work, too) containing all of your locations. You can use separate columns for parts of the address, or include everything in one. The geocoding technology will figure out what you mean.
Let’s say you operate a website about Santa Monica mechanics. You might have them listed in your spreadsheet like this:
| Name | Address | City | State | Zip |
|---|---|---|---|---|
| Fleece’s Greases | 219 W Channel Rd | Santa Monica | CA | 90402 |
| Roseland Automotive | 445 Palisades Beach Rd | Santa Monica | CA | 90402 |
| Adali Cata Car Care | 250 Santa Monica Pier | Santa Monica | CA | 90401 |
| Callat the Mechanic | 1517 Lincoln Blvd | Santa Monica | CA | 90401 |
If you copy and paste that into our mapping tool, you’ll have a custom map without any other input. It’s almost magic.
View Santa Monica Mechanics (Location Names) in a full screen map
What if you want more information besides the shop’s name in the infowindow? Easy! Just add more columns to your spreadsheet. For example, let’s say you had written a short review and gave a rating to each mechanic. So far you’ve kept your genius in a spreadsheet. Let’s share it with the world!
| Name | Address | City | State | Zip | Review | Rating |
|---|---|---|---|---|---|---|
| Fleece’s Greases | 219 W Channel Rd | Santa Monica | CA | 90402 | Fleece tries hard and does passable work, but in the end, the coffee is just really bad. | ⭐⭐ |
| Roseland Automotive | 445 Palisades Beach Rd | Santa Monica | CA | 90402 | Keeps a clean shop, but the waiting room has magazines that haven’t been published in 20 years. | ⭐⭐ |
| Adali Cata Car Care | 250 Santa Monica Pier | Santa Monica | CA | 90401 | Fantastic work! Free WiFi and a barista on staff! | ⭐⭐⭐⭐⭐ |
| Callat the Mechanic | 1517 Lincoln Blvd | Santa Monica | CA | 90401 | Cheap, good, or fast. They always make me choose two. | ⭐⭐⭐ |
Copy and paste that data here and then choose “Validate and Set Options.” This gives you a list of settings that you can change.
You also can preview how the infowindow will look. Advanced Options show even more ways to determine how your map and locations work. In this example, I’ve stuck with what was pre-chosen, except that I want to group by ratings. I got fancy and made the ratings actual stars using emoji, but this could be a letter grade, a decimal number, or anything you want. The map will adjust its grouping settings accordingly.
View Santa Monica Mechanics (with Ratings) in a full screen map
Now readers can click the markers as they browse the map, or use the legend at the bottom to filter what they see. The colors of the markers are also determined by what group they’re part of, which allows for a quick visual indicator of data within the map. This becomes more apparent when there are hundreds or even thousands of markers.
Go ahead and play around with this to get your custom interactive map working the way you want. When you add additional columns to your spreadsheet, they become part of the info window description. Many of these will also be added as grouping options, if you’ve enabled the feature.
Add Images to Your Pop-up
An image is worth 1,000 words—and now you can get your maps there in a single click. Include logos, icons, photos, or other imagery in your infowindow box. Adding additional visuals to your maps can make them appear even more customized and useful.
Let’s go with one more example spreadsheet:
| Name | Address | City | State | Zip | Image |
|---|---|---|---|---|---|
| Fleece’s Greases | 219 W Channel Rd | Santa Monica | CA | 90402 |  |
| Roseland Automotive | 445 Palisades Beach Rd | Santa Monica | CA | 90402 |  |
| Adali Cata Car Care | 250 Santa Monica Pier | Santa Monica | CA | 90401 |  |
| Callat the Mechanic | 1517 Lincoln Blvd | Santa Monica | CA | 90401 |  |
Copy and paste that into the map generator and you’ll see that each marker’s infowindow now includes an icon!
View Santa Monica Mechanics (With Images) in a full screen map
You can include a single small image with every location on your map. Two important things to keep in mind here are:
- Size: you want to keep it small, not more than 150 pixels in either direction.
- Hosting: you need to upload your image somewhere, such as a blog or image provider.
Find the URL for every image and include that in your data, as I did with the mechanic icons above. Then you can select the spreadsheet column in the advanced settings, or BatchGeo will discover it automatically with a name like “Image."
Add StreetView to Your Pop-up
One final type of imagery you can use is StreetView. These are pictures gathered by Google’s many 360 degree cameras driving all over the world. If there is a StreetView image available, we can include a thumbnail in the marker’s infowindow. Need a bigger view? Just click the image and you don’t even need to leave the map to see the location expanded.
StreetView is only available with BatchGeo Pro. Make maps with more locations, faster geocoding, and advanced features. Find out more today.
