Codementor Events

Google Maps API or Leaflet: What's Best for your Project?

Published Nov 02, 2016Last updated Jan 18, 2017
Google Maps API or Leaflet: What's Best for your Project?

Introduction

I make a lot of maps—both for work and for pleasure. I'm often asked about the differences and comparative advantages of various interactive mapping platforms, such as Google Maps API, Leaflet, Mapbox.js, Open Street Maps, and others.

Google Maps API is definitely the titan of interactive mapping online. They are usually the first platform that new interactive mappers learn, due to the ease of getting started, the ubiquitous nature of Google Maps, and the huge popularity of Google in general.

Leaflet is a platform that people usually hear about once they have done some mapping — it's an open-source, freely available mapping plugin for JavaScript that has many addons and plugins at users' disposal. It requires a little more developer knowledge to get started, but it's a favorite of open-sourcers.

It can be pretty overwhelming and complex to decide on a mapping API to use when you're new to the whole idea of interactive mapping, and when you might not know exactly where your project will go.

In this article, I'll lay out a few of the differences for you, and it'll hopefully get you moving into the "building" stage of your map!

Considering your project

For the most part, in most small mapping projects — such as putting markers onto maps, having popups, and so on — there's little functional difference between Google Maps API and Leaflet. Both can handle all the basics of mapping quite well.

If you're doing something a little more complicated, however, here are a few questions you can ask yourself about your project that are relevant to choosing your mapping platform:

  • Does your map have very large numbers of markers?
  • What part of the world is your map mainly focused on?
  • Do you need services like geolocation, traffic, and/or autocomplete boxes?
  • Do you have a budget available for more advanced mapping plugins (like large-scale geolocation)?
  • How experienced is your map developer?
  • Do you want the project to be private, open-source, or somewhere in between?
  • Do you want a customized map base layer?

These don't cover everything, of course, but your answers to these questions should help you to evaluate your best platform once you read about them in the next two sections.

Key differences

Here are a few points that should help make your decision easier, if you've considered the questions I laid out above about your mapping project.

1. Map services

Google offers many useful services, like geolocation, autocomplete boxes, traffic, transit, and more. Most of these services are easy to get from elsewhere (there are many geolocation APIs, such as ArcGIS), but Google's traffic and transit reach data are unparalleled. Few other services have extensive traffic and transit in China or across the Middle East, but Google does.

Leaflet does not offer services on its own but relies on third-party services to do that (like Nominatim or other services). This is harder to implement for a newbie developer, and the third-party services have to be researched for quality.

Google does not charge for services at low usage levels, but a fee kicks in above a certain number of requests per day. Thus, make sure you have some room in your budget if you plan to get really popular.

Finally, if you are doing a complex project outside of the West, traffic and transit information can be quite hard to find. Google will be your best option.

2. Documentation

Google is fairly easy to work with, but their documentation has expanded over the years to include many platforms, and sometimes it can be a little tricky to find an answer to the specific question you have in terms of mapping. That being said, a ridiculously huge number of online resources are available in blogs, StackOverflow, and more. I don't like using the API documentation much, but there are answers to everything you need available somewhere if you search enough.

Leaflet has very clear, standard Javascript-plugin-style documentation, and also has a lot of online resources spread out around the web. As a longtime developer, I prefer Leaflet's documentation and ease-of-use in this area compared to Google.

3. Code

Both Google Maps API and Leaflet are stellar in terms of code quality. As stated before, most basic maps will see very little difference between the two. Both maps can create custom markers, add geoJSONs, have layer interaction, popups, and much more. It's only at very large or very specific implementations that differences start to come out more clearly.

  • Leaflet is more adaptable and accessible to developers, due to being open-source
  • In my experience, Google maps can handle a huge number of markers (10,000+) more efficiently — however, this can depend on a lot of variabilities in how markers are created and how interactive they need to be
  • Both maps are fast and responsive, there are few appreciable speed differences
  • Leaflet's open source nature means it is checked by a world of developers every day, and it is not restricted by any of Google's terms of service

4. Map interface and layers

Google forces users to use the default Google base layer (that typical "Google Map" style map in the title image of this post), although it is customizable. Users can add and remove names of cities, countries, and so on, and can change colors of various features such as roads. They must keep the Google logo. Google doesn't provide a very simple way of editing these features, as it needs to happen in the map code itself.

By contrast, Leaflet is built to be used with multiple types of base layers; Leaflet is a JavaScript library, not an actual mapping service. There's no requirement to keep any logos or attributions. There are no Leaflet cartographers gathering data, like there with Google. Thus, Leaflet relies on third-parties to supply users with a variety of map layers.

Check out this provider site to see just a few Leaflet providers, and if you're interested in further customization, Mapbox layers are also fully compatible with Leaflet. Leaflet definitely outshines Google in the customizability of the map layer itself.

Conclusion

Hopefully, some of the major questions and areas of discussion above helped you to focus your sights on either Leaflet or Google Maps. If you read through and found that the points above didn't address your concerns, then it may be that your application is simple enough that you can just choose whatever one you think is prettiest and nicest!

Leave a comment if you have any specific questions about the two platforms — or others, such as Mapbox.js — and I'll do my best to help you out.

Finally, if you need a really awesome map built, get in touch with me and we can set up a session here on Codementor!

Discover and read more posts from Victor Gerard Temprano
get started
post commentsBe the first to share your opinion
Mike Miller
7 years ago
Michael Miller
7 years ago

Good summary. I agree Google routing and geolocation services are by far the best available. You can use them in Leaflet too, you just need an API key and you may get charged just like Google maps. Leaflet has a huge variety of background maps available if you want something different. https://youtu.be/pU9OX-yjOkE

Bill Lorand
7 years ago

Great summary – thanx for the compare / contrast;
One concept you didn’t address is map projections and the ubiq nature of Web Mercator – not sure if Leaflet supports different projections, but you could easily amend this piece to include a library like D3 that does mapping and has wide support for different projections…cheers

Show more replies