Distance Measuring and Driving Directions between Locations

Showcase > Map solution based on Google map >

Measuring of distance between two pinpoints is possible with the use of Google Maps API, and this opens up a new dimension of advanced usage of the interactive maps. In the following case, we can create a map which find the shortest distance from a collection of pinpoints. Driving directions can be returned back from API calls, which resembles direction search in a plain vanilla Google Maps.

Search for shortest distance to a pinpoint with driving directions shown on the map

How this works

The setup of this map includes an array of pinpoints based on approximate addresses (postcodes are also possible but they would be less accurate than actual addresses). These pinpoints are geocoded and their respective longitude and latitude values stored in a database, thus reducing the need to geocode them again. The search location can be entered by means of an address, a postcode, or by actual adding a pin on the map. A set of algorithms and the calling of Google Maps API determines the shortest distance from the set of pinpoints, and a check would be done to see if there are road connections from the search point to the destination. If there is a route, the driving direction can be shown on the map.

Further Usage

  • Direct distance measurement between two points, and not necessarily to be driving distance
  • Distance between two arbitrary pinpoints
  • Coverage maps by showing points or interests/amenities at a certain diameter from a search location or existing pinpoint
  • Turn-by-turn display of the driving route



Video Tutorials for Creating Custom Google Map

video tutorial for creating interactive maps iMapBuilder Online - Google Map Editor creates interactive Google Map and custom image map online with no programming required. Create custom Google Map by following the steps in the video tutorials:

Video Tutorial: How to create an interactive map by using GMap Editor
Video Tutorial: How to add markers in the Google Map Editor
Video Tutorial: How to add polylines in custom map
Video Tutorial: How to insert image to the popup box in a Custom Google Map

Sign up a FREE account to create your custom Google Map.




For more solutions based on Google Maps or custom made interactive maps


Create Cross-Platforms HTML5 Image Map

Cross-Platforms HTML5 Image Map iMapBuilder HTML5 Map Builder creates interactive cross-platform image map that supports desktops, tablets, and other mobile devices (e.g. iPhone and Android devices). Using iMapBuilder mapping software, various overlays can be added into the map without coding knowledge.

Video Tutorial: Create Interactive HTML5 Map with Overlays
Video Tutorial: Create HTML5 Heat Map

Download the trial version of HTML5 Map Builder to create your own image map.