This component is not supported for Google Ads, Google AdMob, AMPHTML ads, video ads or image ads.
The Map component lets you display a customised, interactive map.
To add the Map component to your project:
- Open the Components panel, then the Maps folder.
- Drag the Map component to the stage.
- In the Map properties section of the Properties panel, enter your Google Maps Platform API key in the Google API key field.
- Enter the Latitude and Longitude properties to set the default centre point of the map. (Learn how to find the coordinates of a place on Google Maps.) You can also tick the Request user location box to prompt the user for their location and show it on the map.
- If you want to display markers on the map for specific places, enter a Search term.
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 that the Places API is enabled for your Google Cloud Platform project. Can be bound to dynamic data. |
Latitude | The latitude for your default map centre location. Can be bound to dynamic data. |
Longitude | The longitude for your default map centre location. Can be bound to dynamic data. |
Request user location | Tick this box to ask the user for their location. Make sure that 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 (deprecated) |
Google Fusion Tables is no longer available as of 3 Dec. 2019. |
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 metres, of the area to search, centred 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 that you can expect to see at each zoom level:
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:
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 were 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 componentYou 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 dialogue, set the Map component as the target.
The following Map component action can be triggered in response to other events:
Action | Configuration options |
---|---|
Set the centre of the map |
|
When you select this action in the Event dialogue, 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.