At Maproom we are always trying out different map systems to see if we can harness any digital mapping innovations in our own products and services. An online mapping system called Mapbox has been a rival to Google Maps for some years, though it it still barely known outside the mapmaking/geocoding community. We decided to create some demos of Google Maps and Mapbox to help our clients understand how these digital mapping systems can be used in business and online mapping projects.
How to create a basic single marker Google map
First up: Google Maps. We’re all familiar with these as the most ubiquitous maps on the web. You can add your business to Google Maps using Google’s free business listing facility. It’s also pretty easy to embed a single location map on any website using Google Maps’s built-in embed code.
For example, this location map for the Houses of Parliament in London:
To make one of the basic Google maps as shown above, you simply type your location into Google maps, zoom in or out to the level of detail you want, click the Share icon and get the basic link URL or embed code which will give you an iframe within your web page.
Pros: A marvellous free utility. You only need a very basic grasp of HTML to embed this kind of map into your website. The map above took only a minute to create and embed into this web page.
Cons: You can customise the size of the iframe but nothing else with this method. There’s no control over the look of the map so it looks like billions of other Google Map embeds all over the web. And the biggest limitation is that you can only show one marker per map.
How to create a multi-location map using Google ‘My Maps’
If you want to have more than one marker on your map, the process is more complex. You will need a Google login and to set up Google My Maps. Add locations either one by one or import them from a file. You can then get a URL link or an embed code, which will automatically format the map to fit all your markers.
We used Google My Maps to plot London churches for a book and app about John Betjeman. Click on the markers for basic information about each church:
We’ve also used Google My Maps to plot locations related to the life of the novelist Thomas Hardy. (The Maproom office has a commemorative plaque for Hardy – see The surprising story of Thomas Hardy in Surbiton). Google My Maps offers 9 different styles for the base map. Here we used a soft beige base:
You can also plot routes and shape layers in Google My Maps. Here we give the best driving route to Maproom and the Slippery Fishes Photo Studio at Thameside Media:
Pros: Google My Maps is free! You can add up to 10,000 lines, shapes, or places, and there are 9 base map styles to choose from. And although it’s more complex to use than a basic Google Maps embed, you don’t need any developer skills to create and use these maps.
Cons: The embed code does not allow for any customisation other than iframe size. The blue-green bar on the above maps is part of the embed and very difficult to alter or mask in your website. The colour of this bar may clash with other elements of your website (we think it’s clunky). Also, a major element of the interactivity is reduced to an icon you might miss. Try clicking the little arrow top left and you will find a lot more information, particularly on the Thomas Hardy map. You can’t override this arrow slide function, nor present your information in any other way with the default embed code. What you see above is what you get with Google My Maps embeds. If you’re lucky, either the standalone full-screen link or the My Maps embed will suit your needs. But you might well want more control over how to present your map.
Making custom maps with Google Maps APIs
The only way to get more control over a map built on a Google Maps base is to make use of the Google Maps APIs or to use software or a plugin built on a Google Maps API. If you have no idea what API means, then we recommend you use a plugin or hire a mapping service such as Maproom to create your interactive web map. The Google Maps APIs are the territory of developers willing to delve into javascript and geocoding.
Pros: A lot more control over map styling and functionality.
Cons: You need an API access key and serious coding skills. There is also a cost for heavy usage. At the time of writing (August 2017), standard web usage is free up to 25,000 map loads per day. Above that are costs of $0.50 USD per 1,000 additional map loads, up to 100,000 daily, if billing is enabled. If billing is not enabled, your map will stop working if it goes above 25,000 map loads per day. Update January 2019: native mobile static maps are free. Dynamic maps using the Maps JavaScript API (standard web usage) start at $7 per 1,000 loads. In other words, a lot more expensive. Whereas Google My Maps is still currently free for basic viewing and basic embed, but otherwise limited capabilities.
A full breakdown of costs is here.
Using Mapbox as an alternative to Google Maps
Mapbox is an alternative interactive online mapping system used by mainly high-end websites and apps. It offers far more granular control over the styling of different map layers than you get with Google Maps. It hooks into OpenStreetMap, which is an open-source, crowd-built resource used by thousands of digital cartographers around the world. In its raw state, OpenStreetMap looks crude – no self-respecting web designer would dream of embedding a raw view of OpenStreetMap into their website. However, there are many ways of tapping into the data on OpenStreetMap, and Mapbox offers the most design-friendly channel.
This is the same map of Thomas Hardy locations built with Mapbox, using a stylish dark backdrop and custom markers, and with the detailed descriptions showing in the popups. Try clicking or tapping on the list of locations and notice the smooth flying feature as you interact with the map:
Pros: A design-led alternative to Google Maps. Looks great and is free for light users.
Cons: Even though the Mapbox interface has lovely styling controls that look familiar to designers, you need coding skills with javascript and geojson to implement the maps on a website.
A bigger drawback is that Mapbox has a much lower free usage allowance than Google Maps. At the time of writing (August 2017), you are allowed only 50,000 map views per month on a free account – that’s less than 1,700 daily views compared with Google Maps API 25,000 daily free limit. Above that, a charge of $499 per month applies up to 1 million views per month. Above 1 million views and you have to negotiate a price with Mapbox, which could be thousands of dollars per month. These are significant thresholds, making Mapbox suitable only for either lightly trafficked sights on the free plan, or for businesses that depend on advanced online mapping, with enough revenue to absorb the Mapbox fees. Update January 2019: Mapbox continues to be free up to 50,000 map views per month, then has a pay as you go price of $0.50 per 1,000 above 50,000 map views per month. This now makes Mapbox much better value than Google Maps API.
Interested in interactive mapping with Google Maps or Mapbox?
Contact maproom@thamesidemedia.com for advice and a quote.