What is the Google Maps API? How is it used?

​ The Maps API returns helpful data about places and locations. It is called by javascript.

It does two major things:

It can cause maps to appear for the user.

It can return data about a latitude/longitude location, or return data about an address.

Google's documentation is strong for this API, so this guide will mostly link to the official documentation, and discuss how Refuge uses the different API features.

For a general introduction, see:

• https://developers.google.com/maps/documentation/javascript/ and
• https://developers.google.com/maps/documentation/javascript/tutorial

How Refuge Restrooms uses the Maps API:

Starting with the simplest use, we use the Map feature to show actual maps of where our restrooms are. To take a look at how we do this, go to any restroom details page, such as: http://www.refugerestrooms.org/restrooms/847.

The reference for showing and customizing maps via the Google Maps API is here:

---

​ ​​​ ​​

Why do we use Google Maps? (What is is good for?)

As an app that locates restrooms, we need a way to handle both addresses (e.g. 1 Embarcadero Center, San Francisco, CA) and physical locations (latitude + longitude). Otherwise we wouldn't be able to keep track of our restrooms properly, and the app wouldn't work. Google Maps does what we need, and it was the first thing Refuge was developed with.

Is there an alternative?

We are looking into using OpenStreetMaps, which is an open-source, free software alternative. For now, this page documents how to use the Google Maps API.

Alright, so what does Maps do, in more detail?

• The Google Maps API lets us request maps from Google and display them. Example.

• It also lets us request an address from Google (we give them a physical location (latitude and longitude), they turn it into an address); We can do the reverse, by giving Google an address, and requesting a physical location (latitude and longitude). Try searching from the homepage to see this in action.

• We can also get information about businesses, landmarks, restaurants, etc. from the Google Maps "Places" library. This info includes when they open/close each day, for example.

• Google Maps helps autocomplete our users' typing, in the search box. This makes it easier and more intuitive to type a real location that will have good results.

(Try debugging these examples in the browser! Open the developer tools by pressing the F12key on your keyboard.)

What does the code look like?

The Maps API is used from JavaScript code, which runs in our users' browsers.

For examples of our usage of the maps API, look in these files: files including the word 'maps'

For general learning and basic usage:

• https://developers.google.com/maps/documentation/javascript/ (Landing page for learning the basics of using Google Maps "client-side" with JavaScript. This is a good starting point for open-ended learning.)
• https://developers.google.com/maps/documentation/geocoding/start (A more concrete, specific page. How to use the Geocoding feature)

Parts of the Maps API that we use:

• https://developers.google.com/maps/documentation/javascript/geocoding (Landing page for the Geocoding feature)
• https://developers.google.com/maps/documentation/javascript/places ("Places" library. Info about businesses and landmarks.)
  • https://developers.google.com/maps/documentation/javascript/places-autocomplete (autocomplete feature, makes suggestions when users type in the search bar.)

Caveats

Google Maps API requires an API Key. This can be the one we use to develop (find it in one of our files), or you can generate your own key here: https://developers.google.com/maps/documentation/javascript/get-api-key