The Map component

This component is not supported for Google Ads, Google AdMob, or AMPHTML ads.

The Map component lets you display a customized, interactive map.

As of June 11, 2018, you must enable billing for Google Cloud Platform and use a valid Google Maps Platform API key for all projects using the Map or Street View components. Learn more.

To add the Map component to your project:

  1. Open the Components panel, then the Maps folder.
  2. Drag the Map component to the stage.
  3. In the Map properties section of the Properties panel, enter your Google Maps Platform API key in the Google API Key field.
  4. Enter the Latitude and Longitude properties to set the default center point of the map. (Learn how to find the coordinates of a place on Google Maps.) You can also check the Request user location box to prompt the user for their location and show it on the map.
  5. If you want to display markers on the map for specific places, enter either a Search term or, if you're using Google Fusion Tables, a Fusion Table ID under Advanced properties. (Google Fusion Tables will not be available after Dec. 3, 2019.)

Properties

Property Description
Name The component name.
Google API Key (required) Your Google Maps Platform API key. The Google Cloud Platform project with this API key should have the Maps JavaScript API enabled. Can be bound to dynamic data.
Search term The search term to use. Resulting places will be displayed on the map with markers. Make sure the Places API is enabled for your Google Cloud Platform project. Can be bound to dynamic data.
Latitude The latitude for your default map center location. Can be bound to dynamic data.
Longitude The longitude for your default map center location. Can be bound to dynamic data.
Request user location Check this box to ask the user for their location. Make sure the Geocoding API is enabled for your Google Cloud Platform project to allow users to enter an address. Can be bound to dynamic data.

Advanced properties

Click the expand icon next to Advanced properties in the component properties pane to edit the following advanced properties:

Property Description
Fusion Table ID The ID of the Google Fusion Table where you set locations to pre-populate markers on your map. Make sure that the table is set as public and that it has the following column titles:
  • name
  • address
  • phone
  • latitude
  • longitude

Can be bound to dynamic data.

Google Fusion Tables will not be available after Dec. 3, 2019. Maps using Fusion Tables will start to see errors in August 2019. Learn more.

Maps Premier Client ID (deprecated) The client ID for Google Maps Premier users. Google Maps Premium Plan customers will transition to the new pricing plan when their current contract expires and should use a Google Maps Platform API key instead. Can be bound to dynamic data.
Search radius The radius, in meters, of the area to search, centered on the specified Latitude and Longitude or the user's location. Values can range from 1,000 to 50,000. Can be bound to dynamic data.
Max results The maximum number of search results presented to the user when using Google Fusion Tables. Can be bound to dynamic data.
Default zoom

The default zoom level for the map. The following list shows the approximate level of detail you can expect to see at each zoom level:

  • 1 - World
  • 5 - Landmass/continent
  • 10 - City
  • 15 - Streets
  • 20 - Buildings

Can be bound to dynamic data.

Marker icon The URI for a custom marker icon, if you choose to replace the default marker. The image source for the marker must be a sprite similar to this:

The sprite needs two marker icons in the following order:

  • Default marker - 34x34
  • Active marker (displayed if the user selects the marker) - 34x34 starting at (34,0)

Can be bound to dynamic data.

Location icon The URI for a custom icon for the user's location, if you choose to replace the default icon. Can be bound to dynamic data.
User location prompt text Custom text to ask the user how they wish to have their location determined. By default, the text reads: "How would you like us to get your position?" (The user is then presented with the GPS choice button text and the Search choice button text.) Can be bound to dynamic data.
GPS choice button text Custom text for the button that retrieves the user's location using GPS. By default, the text reads: "Use GPS". Can be bound to dynamic data.
Search choice button text Custom text for the button that brings up a search field for the user's location. By default, the text reads: "Enter address". Can be bound to dynamic data.
Search prompt text Custom text for the prompt to search for a location. By default, the text reads: "Enter your address or zip code". Can be bound to dynamic data.
Search box guide text Custom placeholder text for the search box. By default, the text reads: "Address or zip code". Can be bound to dynamic data.
Location error text Custom text for the message displayed when the location can't be found. By default, the text reads: "Your location could not be determined. Please enter a valid address." Can be bound to dynamic data.
No result text Custom text for the message displayed when no map results where found for the specified location. By default, the text reads: "No results found near you." Can be bound to dynamic data.

Events and actions

Events sent by the Map component

You can trigger other actions based on the following Map component event:

Event Description
Pin click Sent when the user clicks a location marker on the map.

To select this event in the Event dialog, set the Map component as the target.

Actions performed by the Map component

The following Map component action can be triggered in response to other events:

Action Configuration options
Set the center of the map
  • Latitude
  • Longitude
  • Accuracy

When you select this action in the Event dialog, set the Map component as the receiver.

Learn how to configure events.

Preview

This component can't be previewed inside the Google Web Designer interface. To see the component in action, preview your document in your preferred browser by clicking the Preview button in the upper right corner.

Was this helpful?
How can we improve it?