For years I have been programming simple web pages using Google Maps: store locators, simple contact pages, and more advanced map filtering. In June 2018, Google decided to end free access to the Google Maps JavaScript API, requiring anyone who wishes to use the API to input their credit card information to be able to access the first 20,000 “page loads” of the API.
Google has made a number of questionable decisions lately regarding privacy, including this bait-and-switch with their Maps products, and sketchy new additions to Chrome 69, which I think will hurt them in the long run. I have decided to remove Google’s products (mostly maps and analytics) on any of my and my client’s sites due to privacy concerns and the general pain that has resulted from requiring a credit card number to use the maps service on small websites.
As such, I started researching alternatives to Google Maps and I’ve found two good options which I have started to implement on new projects which I find to be quite useful.
1. SVG maps created by a graphic designer
Here’s an example of an SVG map that was added to a small real estate website we recently built:
This map was designed by Toronto design agency Certo Creative, who provided me with the final SVG for the site.
Advantages of an SVG map:
- Load time is much faster than JavaScript-based slippy maps
- Highly respectful of privacy as no external JS requests are made
- Ability to make the map totally custom and look unique, and more appealing & professional for a particular site. If the designer is good these maps are much better looking than default Google Maps styles
- Different stylized versions can be loaded easily and quickly on mobile vs. tablet vs. desktop without having to deal with responsive crap or to override external CSS
Disadvantages of an SVG map:
- A project’s budget requires some headroom to pay a designer to make a nice looking map
- No interactivity; no markers, clustering, infowindows, etc. – only useful for simple content
2. Open Street Map (OSM) and MapBox
If you use DuckDuckGo’s maps at all, you’ll notice that this is the setup they are using. OSM is free and open-source, and I find their data to be equally good or better than Google’s. Mapbox is simply a provider built on top of OSM data to give you a great degree of control over an OSM map, including colours, “layers”, and much more.
Advantages of OSM + MapBox:
- Free for up to 50,000 “loads”, no credit card required
- Highly customizable in style and functionality; basically on par with Google Maps
- Simple to learn if you are already experienced with JSON/JavaScript
- Makes use of the widely adopted standard of GeoJSON data
- Actual tech support you can contact if you have a problem
- Reasonable pricing
Disadvantages of OSM + Mapbox:
- JavaScript style is different to Google Maps, so there will be some re-learning involved
I encourage you to try using these alternatives in your projects and I think you’ll be pleasantly surprised!
Contact Us