You can easily create dynamic links that open directions in Google Maps using simple URL structures. These links can include destinations derived from your data attributes, providing a seamless navigation experience.
- Basic URL Structure
- Inserting the Link Using Mango's Custom Popup Editor
- Optional Parameters
- Important Considerations
Basic URL Structure
To generate a basic directions link, you need to specify a destination. Typically, you'll use attribute variables from your data:
Assuming your data has three fields: street, city, and country, you can create a URL using these placeholders:
https://www.google.com/maps/dir/?api=1&destination={street}+{city}+{country}
If you have a single field that contains the full address, use:
https://www.google.com/maps/dir/?api=1&destination={full_address}
For attribute data with coordinates, use the latitude and longitude values separated by a comma:
https://www.google.com/maps/dir/?api=1&destination={lat},{lon}
By inserting these URLs into a link within the custom popup editor, you will generate a dynamic link for each feature, replacing the attribute placeholders with actual data values. The link will open in a new browser tab on a desktop or the Google Maps app on a mobile device.
Inserting the Link Using Mango's Custom Popup Editor
To insert the dynamic link into Mango's custom popup editor, follow these steps:
- Open your map in Mango and navigate to the layer where you want to add the dynamic link.
- Access the layer settings and go to the "Popup" section.
- Select the "Custom" option to open the custom popup editor.
- In the editor, create a link using the URL structures provided above, replacing attribute placeholders with the corresponding field names from your data.
- Save your changes and publish the map.
Now, when users click on a feature, the popup will display a link that opens directions in Google Maps with the destination dynamically filled from your data.
Optional Parameters
Enhance your directions links by adding optional parameters to set the origin, method of transport, or waypoints.
Origin
If you only specify a destination, Google Maps will use the current location of your user's device as the starting point, provided that location services are enabled on the device and permissions are granted for the browser to access your location.
To specify a starting point for your directions, use the origin parameter. This can be a fixed address, coordinates, or attribute placeholders:
Example with a warehouse address from your data:
https://www.google.com/maps/dir/?api=1&destination={full_address}&origin={warehouse}
Fixed address as origin:
https://www.google.com/maps/dir/?api=1&destination={full_address}&origin=114%20Main%20St,%20Houston,%20TX%2077002,%20United%20States
Mode of Travel
Set the mode of transport using the travelmode parameter. Available options are driving, walking, bicycling, and transit:
https://www.google.com/maps/dir/?api=1&destination={full_address}&travelmode=driving
Waypoints
Add stops along your route using the waypoints parameter. Separate multiple waypoints with a pipe |:
https://www.google.com/maps/dir/?api=1&destination={full_address}&waypoints={address_2}|{address_3}
When combining multiple URL parameters, use an ampersand & between each:
https://www.google.com/maps/dir/?api=1&destination={address}&travelmode=bicycling
Important Considerations
Ensure you comply with Google’s privacy policy and terms of service. Mango does not guarantee the availability of locations in Google’s maps index or the validity of routes and transport modes. For detailed information on creating routing URLs, refer to Google’s documentation.