Skip to main content
Dynamic Google Maps Directions
Updated over a year ago

To use this widget you need to set Google Maps API. With the Dynamic Google Maps Directions widget you can display an interactive map with departure and destination.


Usage

Very useful to show directions from one starting point to another destination point.


Settings

  • Data Type: You can input the address or choose the latitude & longitude for setting the map points.

  • Travel Mode: You can choose between Driving, Walking, Bicycling, Transit or Two Wheeler travel mode.

  • Departure: In the case of Data Type > Address, you can type the departure location address and in the case of Data Type > Latitude & Longitude you can set the actual coordinates.

  • Destination: In the case of Data Type > Address, you can type the destination location address and in the case of Data Type > Latitude & Longitude you can set the actual coordinates


Map Name

You can set a name to your map in lowercase without spaces to use with dynamic tags.

In the below screen, we have used the map name in Dynamic Tags - Map Info to show the distance between the points in KMs.

Note: The distance varies a little based on the travel mode used.


Controlling

Geolocation: enabling the geolocation allows to display of the geographic location of the user on the map, using the browser's HTML5 Geolocation.

Use Geolocation Point As: You can use the Geolocation Point as Departure or Destination


Map Type

  • Roadmap displays the default road map view. This is the default map type.

  • Satellite displays Google Earth satellite images.

  • Hybrid displays a mixture of normal and satellite views.

  • Terrain displays a physical map based on terrain information.


Markers

With Custom markers you can set a custom image and label on the destination & departure points,


Controls

You can toggle various controls on the Map.

  • Scroll Wheel: The scroll wheel is a feature on the mouse that lets users zoom in or out of the map by rolling it. In Google Maps, scrolling up zooms in, while scrolling down zooms out.

  • Map Type Control: The map type control allows the user to change the type of map being displayed. Users can choose between different types of maps such as satellite, terrain, and hybrid.

  • Pan Control: The pan control allows the user to move the map in any direction. It typically includes a set of arrows that can be clicked to move the map up, down, left, or right.

  • Rotate Control: The rotate control allows the user to rotate the map in any direction. It typically includes a compass rose with a rotate button that can be clicked to rotate the map.

  • Scale Control: The scale control displays a scale bar on the map, which allows the user to measure distances between two points on the map. It can be useful for planning routes or estimating distances.

  • Street View Control: The street view control allows the user to access street-level views of the map. It typically includes a small icon of a person, which can be clicked to enter street view mode.

  • Zoom Control: The zoom control allows the user to zoom in or out of the map. It typically includes a set of plus and minus buttons, which can be clicked to zoom in or out.

  • Full Screen Control: The full-screen control allows the user to expand the map to full-screen mode. It typically includes an icon of a rectangle, which can be clicked to enter full-screen mode.

Did this answer your question?