Google Maps API: 17 Inspiring Examples

You don’t have to be stuck with the default Google Maps style. Instead you can change the default style by adding a JSON snippet on Google Cloud — just like AirBnB has done.

The AirBnB map style has a softer blue and green that matches their brand style. They’ve also hidden Google’s points of interest and include their own points of interest that are relevant to travelling.

Tip: You can create your own custom Google Maps style with Stylist, a free tool.

Here’s an example of a store locator built with Atlist— a tool for creating custom Google Maps without having to code.

There is a list of store locations and a search bar that can navigate the user to the closest location (or plot the users current location on the map).

It also has CTA buttons that can provide directions (which uses the the Google Maps Directions API).

Perhaps no other company leverages the Google Maps API as much as Uber.

They use it to provide real-time, accurate navigation and location services to its users and drivers. That way Uber can display the precise locations of available drivers, calculate the fastest routes, and provide estimated arrival times.

This simple sledding map was created with Atlist.

With Atlist you don’t have to learn the Google Maps API — which can be confusing if you’re not a developer. Concepts such as geocoding or API keys might not be a bit intimidating.

This map has a custom map style, custom marker images, a photo gallery and a modal window (also known as an info window).

This is a great example of a basic map — it just lists the eight Ivy League schools. It was also created with Atlist — check out this tutorial on how to use Atlist.

This map is interesting because there are custom markers for each school. It also uses a custom map template, some custom CSS and a Legend overlay.

Here’s a pretty typical Google Maps Javascript API use-case: a map plots apartment listings and allows users to search and filter apartments in real-time.

Clicking on a marker provides more information about the apartment — including photos, rent prices, and descriptions.

Here’s an example of a 3D map built with Atlist.

Maps become 3D if the zoom level is zoomed in far enough.

Users can also tilt and pan the map as needed.

Not every map needs to be an embedded Google Map.

Here’s an example of a map that’s simple an image. Since it’s an image, it’s not interactive — you can’t zoom or pan.

This map was created with a free tool called Simple Map Maker.

A map of airports in Italy — another map created with Atlist.

This map puts markers into groups so that the user can see the size of the airport at a glance. It also has a search function that leverages the Google Places API for finding airports close to the visitor.

Dominos uses the Google Maps API to show Hotspot locations.

Customers can have their orders delivered to a Hotspot if they can’t use a traditional addresses. Users can see exactly where these hotspots are located, helping them select the most convenient pick-up point.