Simple Store Locator App

Josie's Cafe is a fictitious restaurant chain featuring two different location categories: coffee shops, and patisseries. This tutorial shows you how to build a store locator map application that displays custom markers to indicate store locations. It demonstrates how to do the following things:

  • Use GeoJSON to define a static list of locations and associated metadata.
  • Display location markers on a map, using icons to indicate category (cafe or patisserie).
  • Display location metadata using a custom InfoWindow.
  • Apply styling to a map.

Get the code

Clone the Simple Store Locator repo to your Google Cloud Platform instance, or your local computer.

The functionality for the Josie's Cafe store locator centers on these files:

  • app.js contains the code for displaying the map and adding markers.
  • index.html is a minimal HTML file that loads the Maps JavaScript API and app.js, and displays the map in a div.
  • stores.json is a GeoJSON file that stores all of the data for each location.

Set up your development project

Before starting this tutorial, follow these instructions to get an API key and set up Google Cloud Platform.

Add the API key to your application

Add the API key to your project as follows (you'll need to get the code before taking this step):

  • index.html — in the src attribute of the script tag, replace YOUR_API_KEY with your actual API key:

    <script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

  • app.js — Locate the following line and replace YOUR_API_KEY with your actual API key:

    const apiKey = 'YOUR_API_KEY';

Build and run your app

Follow these steps to build and run your app using Google Cloud Platform:

  1. If you have not done so yet, clone the solution repo to your GCP machine or local computer (these instructions assume that you're using a GCP machine).

  2. From the top-level directory, run the following command to start the Python simple HTTP server:

    $ python -m SimpleHTTPServer 8080

  3. Click the first item on the Cloud Shell toolbar, and select Preview on port 8080. A new browser tab opens, displaying a map centered on London, England, with several markers to indicate the locations for Josie's Cafe.

Understand the code

This part of the tutorial explains the most significant parts of the simple store locator app, to help you understand how to build a similar app.

Style map elements

Styling is an important aspect of any Google Maps app. You can use styling to emphasize the information you want to present while suppressing details that your users don't need, all while making your map look more beautiful. The mapStyle constant contains the JSON style declaration, which defines the styling options for the map. The style declaration sets the colors to use for each map feature, and also specifies whether various features will be visible on the map. The following example shows the JSON style declaration:

const mapStyle = [
  {
    "featureType": "administrative",
    "elementType": "all",
    "stylers": [
      {
        "visibility": "on"
      },
      {
        "lightness": 33
      }
    ]
  },
  {
    "featureType": "landscape",
    "elementType": "all",
    "stylers": [
      {
        "color": "#f2e5d4"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#c5dac6"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "on"
      },
      {
        "lightness": 20
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "all",
    "stylers": [
      {
        "lightness": 20
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#c5c6c6"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#e4d7c6"
      }
    ]
  },
  {
    "featureType": "road.local",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#fbfaf7"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "all",
    "stylers": [
      {
        "visibility": "on"
      },
      {
        "color": "#acbcc9"
      }
    ]
  }
];

Initialize the map

index.html is a minimal HTML file that loads the Maps JavaScript API and app.js script, then displays the map in a div which is styled so that the map takes up the entire page when it loads. When index.html loads for the first time, the first script tag loads app.js, and the second script tag loads the Maps JavaScript API, specifying the API key and the name of the callback function to invoke once loading is complete:

<html>
<head>
  <title>Store Locator</title>
  <style>
    .map {height: 100%;}
    html, body {height: 100%; margin: 0; padding: 0;}
  </style>
<head>
<body>
  <div class="map"></div>
  <script src="app.js"></script>
  <script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
  </script>
</body>
</html>

The initMap() function contains all of the functionality for the store locator app. This function runs as soon as all of the content for the site has finished downloading. The map constant gets the name of the div in which to display the map, and specifies initial zoom level, the coordinates at which to center the map, and the style declaration to use.

const map = new google.maps.Map(document.getElementsByClassName('map')[0], {
  zoom: 7,
  center: {lat: 52.632469, lng: -1.689423},
  styles: mapStyle
});

Load location data

stores.json contains all of the location data for the store locator. It takes just one line of code to load this data onto the map:

map.data.loadGeoJson('stores.json');

Once the data is loaded, the following function uses the category property as defined in stores.json to apply the correct icon for each marker:

map.data.setStyle(feature => {
  return {
    icon: {
      url: `img/icon_${feature.getProperty('category')}.png`,
      scaledSize: new google.maps.Size(64, 64)
    }
  };
});

Set up the listener function

When a user clicks a marker, the listener function gets the data for that location, and features HTML to construct an InfoWindow to display the location's information. This function uses the category property to determine the appropriate logo to display, and displays a StreetView image using the lat/lng coordinates for the selected location.

map.data.addListener('click', event => {
  let category = event.feature.getProperty('category');
  let name = event.feature.getProperty('name');
  let description = event.feature.getProperty('description');
  let hours = event.feature.getProperty('hours');
  let phone = event.feature.getProperty('phone');
  let position = event.feature.getGeometry().get();
  let content = `
    <img style="float:left; width:200px; margin-top:30px" src="img/logo_${category}.png">
    <div style="margin-left:220px; margin-bottom:20px;">
      <h2>${name}</h2><p>${description}</p>
      <p><b>Open:</b> ${hours}<br/><b>Phone:</b> ${phone}</p>
      <p><img src="https://maps.googleapis.com/maps/api/streetview?size=350x120&location=${position.lat()},${position.lng()}&key=${apiKey}"></p>
    </div>
  `;
  infoWindow.setContent(content);
  infoWindow.setPosition(position);
  infoWindow.setOptions({pixelOffset: new google.maps.Size(0, -30)});
  infoWindow.open(map);
});

Next step

See NYC Subway Locator to learn how to expand upon this store locator app, by adding a Golang backend to handle marker clustering and server-side filtering.

Send feedback about...

This page
Documentation feedback
Store Locator Solution
Store Locator Solution
Product feedback
Need help? Visit our support page.