Simple Google Maps API shortest route calculator

Developer
Jason Mayes
Size
3,251 Kb
Views
87,032
  1. Simple Google Maps API shortest route calculator Previews
  2. Simple Google Maps API shortest route calculator HTML Codes
  3. Simple Google Maps API shortest route calculator CSS Codes
  4. Simple Google Maps API shortest route calculator JS Codes

How do I make an simple google maps api shortest route calculator?

Given a number of interesting places, which is the shortest distance away from a "current position". This code demonstrates how easy it is to find out this information using the Google Maps routing API. The distances we use here are the route distances, not straight line ones, so is more realistic estimate as it takes in to account road directions etc.. What is a simple google maps api shortest route calculator? How do you make a simple google maps api shortest route calculator? This script and codes were developed by Jason Mayes on 07 July 2022, Thursday.

Simple Google Maps API shortest route calculator Previews
IQ Test

Simple Google Maps API shortest route calculator - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Google Maps API shortest route calculator</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="map-canvas"></div> <script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script> <script src="js/index.js"></script>
</body>
</html>

Simple Google Maps API shortest route calculator - Script Codes CSS Codes

html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px
}
#panel { position: absolute; top: 5px; left: 50%; margin-left: -180px; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999;
}

Simple Google Maps API shortest route calculator - Script Codes JS Codes

/* * Simple Google Maps Route API example for finding the shortest route between a number * of interesting places and a current position. Please keep disclaimer with code if * you use it so people can find updates. * Coded by Jason Mayes 2014. http://www.jasonmayes.com * Latest version available at: http://codepen.io/jasonmayes/pen/DupCH */
var shortestDistance = function() { var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var map; var size = 0; var currentPosition; // An array of interesting places we want to potentially visit. var interestingPlaces = [ {'title': 'Regents Park', 'latLng': new google.maps.LatLng(51.530686, -0.154753)}, {'title': 'Hyde Park', 'latLng': new google.maps.LatLng(51.507293, -0.164022)}, {'title': 'Green Park', 'latLng': new google.maps.LatLng(51.504088, -0.141706)}, {'title': 'Regents Park', 'latLng': new google.maps.LatLng(51.479185, -0.159903)} ]; // An array to store results from Google routing API. var routeResults = []; // Call this upon page load to set everything in motion! function initialize(currentLat, currentLng) { currentPosition = new google.maps.LatLng(currentLat, currentLng); directionsDisplay = new google.maps.DirectionsRenderer(); var mapOptions = { zoom: 13, center: currentPosition }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); directionsDisplay.setMap(map); var marker = new google.maps.Marker({ position: currentPosition, map: map, title: 'Currrently location.' }); var i = interestingPlaces.length; while (i--) { interestingPlaces[i].marker = new google.maps.Marker({ position: interestingPlaces[i].latLng, map: map, title: interestingPlaces[i].title, icon: 'http://maps.google.com/mapfiles/ms/icons/green.png' }); } findNearestPlace(); } // Loops through all inteesting places to calculate route between our current position // and that place. function findNearestPlace() { var i = interestingPlaces.length; size = interestingPlaces.length; routeResults = []; while (i--) { calcRoute(interestingPlaces[i].latLng, storeResult); } } // A function to calculate the route between our current position and some desired end point. function calcRoute(end, callback) { var request = { origin: currentPosition, destination: end, travelMode: google.maps.TravelMode.DRIVING }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { callback(response); } else { size--; } }); } // Stores a routing result from the API in our global array for routes. function storeResult(data) { routeResults.push(data); if (routeResults.length === size) { findShortest(); } } // Goes through all routes stored and finds which one is the shortest. It then // sets the shortest route on the map for the user to see. function findShortest() { var i = routeResults.length; var shortestIndex = 0; var shortestLength = routeResults[0].routes[0].legs[0].distance.value; while (i--) { if (routeResults[i].routes[0].legs[0].distance.value < shortestLength) { shortestIndex = i; shortestLength = routeResults[i].routes[0].legs[0].distance.value; } } directionsDisplay.setDirections(routeResults[shortestIndex]); } // Expose the initialize function publicly as "init". return { init: initialize };
}();
// Upon page load, lets start the process!
google.maps.event.addDomListener(window, 'load', shortestDistance.init(51.489554, -0.12969));
Simple Google Maps API shortest route calculator - Script Codes
Simple Google Maps API shortest route calculator - Script Codes
Home Page Home
Developer Jason Mayes
Username jasonmayes
Uploaded July 07, 2022
Rating 3.5
Size 3,251 Kb
Views 87,032
Do you need developer help for Simple Google Maps API shortest route calculator?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jason Mayes (jasonmayes) Script Codes
Name
Twitter Post Fetcher - Cube Demo
Google Material Paper-Checkbox
Customizable Animated Timer - CSS only
Twitter Post Fetcher - compiled
Accessibility - voice commands
Simple Particle Engine
Meme Generator Custom Element in Polymer
JS WebCam Motion Detection
Smooth Scroll to Element
CSS3 Selectables with information rollover
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!