This component is not supported for Google Ads, Google AdMob, AMPHTML ads , video ads , or image 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:
- Open the Componentspanel, then the Mapsfolder.
- Drag the Map
component to the stage.
- In the Mapproperties section of the Propertiespanel, enter your Google Maps Platform API key in the Google API Keyfield.
- Enter the Latitudeand Longitudeproperties 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.
- 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 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 iconnext to Advanced propertiesin the component properties pane to edit the following advanced properties:
Property
Description
Fusion Table ID
(deprecated)
(deprecated)
Google Fusion Tables is no longer available as of Dec. 3, 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 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 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 Eventdialog, 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 center of the map
- Latitude
- Longitude
- Accuracy
When you select this action in the Eventdialog, 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 Previewbutton in the upper right corner.
