The Map component
The Map component lets you display a customized, 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 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.
|Name||The component name.|
|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.|
Click the expand icon next to Advanced properties in the component properties pane to edit the following advanced properties:
|Fusion Table ID
|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.|
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:
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 where found for the specified location. By default, the text reads: "No results found near you." Can be bound to dynamic data.|
Events and actionsEvents sent by the Map component
You can trigger other actions based on the following Map component event:
|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.
The following Map component action can be triggered in response to other events:
|Set the center of the map||
When you select this action in the Event dialog, set the Map component as the receiver.
Learn how to configure events.
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.