Information for: DEVELOPERS   PARTNERS

Setting up a Google Maps API key and embedding a map in a page

Embedding a map in a page involves the following steps:

  1. Obtain an API key.
  2. Set the API key in Drupal.
  3. Create a page and use the Map component to display a map on the page.

Obtain an API key

For Google’s detailed instructions on obtaining API keys, see https://developers.google.com/maps/documentation/javascript/get-api-key. Google’s new policy requires that you have a project with a billing account to obtain an API key.

Enable the following APIs:

  • Directions API
  • Geocoding API
  • Geolocation API
  • Maps Embed API
  • Maps Javascript API
  • Maps Static API
  • Places API

After enabling these APIs, go to https://developers.google.com/maps/documentation/javascript/get-api-key to obtain your API key.

Set the API key

  1. Go to the Tour Dashboard page.
  2. Scroll down to the Google Maps section.
  3. In the Maps API key field, enter your Google Maps API key.

Create a page and embed a map

  1. On the Acquia CMS administrative interface, click Manage > Content > Add Content > Page. to create a page where you want to add a map.

    Alternatively, you can edit an existing page.

  2. In the Layout Canvas section, click the + sign.

  3. In the Components pane, scroll down to Map components and click the the + sign next to the Google map component.

    The Google map component is added to the Layout Canvas section.

  4. Close the Components pane.

  5. In the Layout Canvas section, double-click the Google map component and set its attributes based on your requirements.

    For the Google map component, you can set the following attributes:

    • Width
    • Background color theme
    • Padding top and bottom
  6. After setting the attributes, click Apply.

  7. To add a map marker, do the following:

    1. In the Layout Canvas section, double-click the Google map component and expand Map marker.

    2. In the Address field, add a complete address or type a precise location name.

      Note

      If your location name has spaces, use double quotes. For example “Acquia Boston”.

    3. Click Find Coordinates.

      The Latitude and Longitude fields are automatically populated and a preview of the map is displayed.

    4. In the Marker info window field, add your own text to be displayed on the marker window.

    5. Add as many markers as you want to display on the map.