Adding interactive maps to your website
A location or service area map can help your customers or clients find you. These maps can be added to brochures, as a static (non-interactive) image on your website, or even a downloadable PDF.
But many businesses and organizations embed interactive maps on their websites. Here are some free and open source options.
Google Maps
The most common is Google Maps. Here’s an example of a map I created this winter showing ice rinks and toboggan hills in Kitchener.
There are ways to work with the Google Maps API to customize the look – for example to remove points and places you don’t want on the map. If you’re a business, you probably don’t want your competitors on the map!
Mapbox
Mapbox is a very powerful tool to create fully customized interactive maps. You can customize all the data you want to show, the colours, symbols, and labels, and even style them across zoom levels.
The example below is a test map I created a while ago to show the locations of some of my clients. If you zoom in close enough, I’ve added labels indicating the type of map or project. The point symbols and labels appear larger as you zoom in, but I set the maximum zoom level so they disappear if you zoom in too closely.
There’s a bit of a learning curve, but a lot of documentation and online support.
OpenStreetMap
You can embed OpenStreetMap as well.
Go to OpenStreetMap.org, zoom and pan to the area you want to show, then click the Share button. You can drop a marker on a location, then click on HTML to get the embed code which you can copy to your webpage.
Here’s an example with a pin dropped on Kitchener.
If you only need to show one location, and don’t mind other features shown on your map, this is your best option. Zoom to the location you want, check the box to include a marker and drag it to the precise location, then you can either embed the html code, or send a link to someone.
Leaflet
Leaflet is an open source JavaScript library for mobile-friendly interactive maps. I took a workshop years ago at a cartography conference, but since I focus on print and static maps I haven’t looked into it too much. But if you’re familiar with JavaScript, give it a try!
QGIS
I love QGIS. Most of my workflow uses Adobe Illustrator and Avenza MAPublisher, but QGIS is a free open source GIS tool that anyone can use. I use it to edit and filter large datasets, work with raster imagery, and create new datasets.
But you can also make interactive web maps with it! Here’s an excellent tutorial to get you started. QGIS also has a steep learning curve for those just getting started, but if you need to make maps more regularly and don’t want to engage a custom cartographer, this might be your best option. You can also export maps for print.
Contact me
If you want to try your hand at making your own custom interactive maps, the tools above are excellent places to start. QGIS has the added bonus of allowing you to create print maps.
But since some of these tools are not always easy to learn, especially if you have limited time, consider working with a GIS or cartographic professional.
Feel free to reach out to me with any questions. I’m not an expert with all these tools, but I can point you in the direction of some of my colleagues.
Happy Mapping!
Please follow and share on LinkedIn, Instagram, and Facebook.
Subscribe to get the next newsletter delivered to your email inbox.