How to Implement Basic Search with Google Maps API

Google Maps has always been at the forefront of JavaScript technology, and over the years it has evolved into several APIs that go beyond simple maps--offering the ability to, for example, convert addresses to geographic coordinates, locate named places, calculate directions and even determine distances.

The scope of the entire set of Google Maps APIs is huge. I couldn’t possibly cover it all in one article, so here I will start from the very beginning: introduction to get you going with a basic search. First, I'll demonstrate how to access the API from JavaScript in a browser. Second, I’ll show how to do the same thing right from your JavaScript code, also on the client browser side.

Multiple Uses and Modes of Access

There are several methods for accessing the APIs, focusing on a RESTful interface. You can access the Google Maps API from pretty much any device and app, whether native or Web-based.
Mapping and location-based apps are probably the most widely used and easiest to understand, from an API standpoint. Indeed, there are many use cases for the Google Maps APIs. For example, you might have a browser app that runs on a mobile device and uses the user's current location to display a local map. Or you might allow users to enter a partial address that can then be “cleansed” to convert it to a complete address (for example, when the user knows only the street address, city and state, but not the ZIP code).

The ability to obtain a user's location in terms of coordinates isn't part of Google Maps; instead, your Web page can include JavaScript code that asks the local Web browser for the current location, and the browser will get the information from the device itself. Or, in the case of a native app, the app will simply ask the device for the information. But, once you have the coordinates, you can then send them to the Google Maps API to get a local address (assuming the coordinates map to a street address) and, from there, a map.

Sample Web App

For our sample Web app, I grabbed a set of coordinates and found nearby places within a radius.

For example, let's start with a set of coordinates and see what's at that point:

37.865025, -119.538308

These coordinates are given such that the first coordinate is Latitude, with positive being the Northern Hemisphere. The second coordinate is longitude, with negative being west of Greenwich in London.
As with most APIs you read about here on ProgrammableWeb, you need an API key. You can find the instructions here, along with rules about usage limits. Once you have that information, you can make calls to the API by including an assigned security token.

Let's make a simple call right inside the browser. But, before we can do that, we need to enable the API.

Although you created your credentials already, Google requires that you activate the specific APIs you plan to use for that key. Head over to the Google API console. At left, expand “APIs & Auth,” and then click “APIs.” At right, find and click on Google Places API Web Service under the Google Maps API section, as that’s the one we’ll use here. Then, in the new screen, click “Enable API.” Now you can use your key to make the following call. Put this URL into your browser, replacing ABCDEF with your own key:

In this call, if you look at the query parameters, you can see I'm looking for places within a 20-mile radius of the given coordinates. The coordinates are inside Yosemite National Park. Here's part of the long response that shows up in the browser; I've omitted some parts for space:

   "html_attributions" : [],
   "results" : [
         "geometry" : {
            "location" : {
               "lat" : 37.8415208,
               "lng" : -119.5748827
         "icon" : "",
         "id" : "2a713c96488f6f12c63bb32d343a5c005138e33e",
         "name" : "Tioga Road",
         "place_id" : "ChIJQymKaJf6loARpN9LCzCkRz4",
         "reference" : ...
         "geometry" : {
            "location" : {
               "lat" : 37.8651011,
               "lng" : -119.5383294
         "id" : "fb2429c43eec383d3740f2d5c054a2d3bc1eae84",
         "name" : "Yosemite National Park",
         "opening_hours" : {
            "open_now" : true,
            "weekday_text" : []
         "photos" : [
         "place_id" : "ChIJxeyK9Z3wloAR_gOA7SycJC0",
         "rating" : 4.7,
         "reference" :  ...,
         "types" : [ "park", "point_of_interest", "establishment" ],
         "vicinity" : "CA"
   "status" : "OK"

Of course, this is just a big JSON file, but how you use this file in your own app is up to you. Instead of just plopping an API call into the browser address bar, you could make the call from your JavaScript code, work through the JSON results and use them in your app.

Be sure to read the next Mapping article: 8 Ways the Google Maps API Can Improve Your Ridesharing App


Comments (0)