<!DOCTYPE html> <html> <head> <style> /* Set the size of the div element that contains the map */ #map { height: 400px; /* The height is 400 pixels */ width: 600px; /* The width is 600 pixels */ } </style> </head> <body> <!--The div element for the map --> <div id="map"></div> <script> // Initialize and add the map let map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { zoom: 6, center: {lat: 41, lng: -86} }); const cities = [ {lat: 41.88, lng: -87.62}, // Chicago {lat: 43.05, lng: -87.95}, // Milwaukee {lat: 42.33, lng: -83.04}, // Detroit {lat: 39.76, lng: -86.15}, // Indianapolis {lat: 38.62, lng: -90.19} // St. Louis ]; // Loop through cities, adding markers for (let i=0; i<cities.length; i++) { let position = cities[i]; // location of one city // create marker for a city let mk = new google.maps.Marker({position: position, map: map}); } // Add Distance Matrix here } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY &callback=initMap"> </script> </body> </html>
<!DOCTYPE html>
<html>
<head>
<style>
/* Set the size of the div element that contains the map */
#map {
height: 400px; /* The height is 400 pixels */
width: 600px; /* The width is 600 pixels */
}
</style>
</head>
<body>
<!--The div element for the map -->
<div id="map"></div>
<script>
// Initialize and add the map
let map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {lat: 41, lng: -86}
});
const cities = [
{lat: 41.88, lng: -87.62}, // Chicago
{lat: 43.05, lng: -87.95}, // Milwaukee
{lat: 42.33, lng: -83.04}, // Detroit
{lat: 39.76, lng: -86.15}, // Indianapolis
{lat: 38.62, lng: -90.19} // St. Louis
];
// Loop through cities, adding markers
for (let i=0; i<cities.length; i++) {
let position = cities[i]; // location of one city
// create marker for a city
let mk = new google.maps.Marker({position: position, map: map});
// Add Distance Matrix here
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY
&callback=initMap">
</body>
</html>
const service = new google.maps.DistanceMatrixService(); // instantiate Distance Matrix service const matrixOptions = { origins: ["41.8848274,-87.6320859", "41.878729,-87.6301087", "41.8855277,-87.6440611"], // technician locations destinations: ["233 S Wacker Dr, Chicago, IL 60606"], // customer address travelMode: 'DRIVING', unitSystem: google.maps.UnitSystem.IMPERIAL }; // Call Distance Matrix service service.getDistanceMatrix(matrixOptions, callback); // Callback function used to process Distance Matrix response function callback(response, status) { if (status !== "OK") { alert("Error with distance matrix"); return; } console.log(response); }
const service = new google.maps.DistanceMatrixService();
// instantiate Distance Matrix service
const matrixOptions = {
origins: ["41.8848274,-87.6320859", "41.878729,-87.6301087",
"41.8855277,-87.6440611"], // technician locations
destinations: ["233 S Wacker Dr, Chicago, IL 60606"], // customer address
travelMode: 'DRIVING',
unitSystem: google.maps.UnitSystem.IMPERIAL
};
// Call Distance Matrix service
service.getDistanceMatrix(matrixOptions, callback);
// Callback function used to process Distance Matrix response
function callback(response, status) {
if (status !== "OK") {
alert("Error with distance matrix");
return;
console.log(response);
{ "originAddresses": [ "120 W Randolph St, Chicago, IL 60602, USA", "204 S Clark St, Chicago, IL 60604, USA", "629 N Desplaines St, Chicago, IL 60661, USA" ], "destinationAddresses": [ "233 S Wacker Dr, Chicago, IL 60606, USA"], "rows": [ { "elements": [ { "status": "OK", "duration": { "Value": 458, "text": "8 mins" }, "distance": { "value": 1911, "text": "1.2 mi" } }], { "elements": [ { "status": "OK", "duration": { "value": 220, "text": "4 mins" }, "distance": { "value": 924, "text": "0.6 mi" } }], { "elements": [ { "status": "OK", "duration": { "value": 383, "text": "6 mins" }, "distance": { "value": 1531, "text": "1.0 mi" } }] }] }
{
"originAddresses": [ "120 W Randolph St, Chicago, IL 60602, USA", "204 S Clark St, Chicago, IL 60604, USA", "629 N Desplaines St, Chicago, IL 60661, USA" ],
"destinationAddresses": [ "233 S Wacker Dr, Chicago, IL 60606, USA"],
"rows": [ {
"elements": [ {
"status": "OK",
"duration": {
"Value": 458,
"text": "8 mins"
},
"distance": {
"value": 1911,
"text": "1.2 mi"
}], {
"value": 220,
"text": "4 mins"
"value": 924,
"text": "0.6 mi"
"value": 383,
"text": "6 mins"
"value": 1531,
"text": "1.0 mi"
}]
rows
console.log
let routes = response.rows[0].elements; const leastseconds = 86400; // 24 hours let drivetime = ""; let closest = ""; for (let i=0; i<routes.length; i++) { const routeseconds = routes[i].elements[0].duration.value; if (routeseconds > 0 && routeseconds < leastseconds) { leastseconds = routeseconds; // this route is the shortest (so far) drivetime = routes[i].elements[0].duration.text; // hours and minutes closest = response.originAddresses[i]; // city name from destinations } } alert("The closest location is " + closest + " (" + drivetime + ")");
let routes = response.rows[0].elements;
const leastseconds = 86400; // 24 hours
let drivetime = "";
let closest = "";
for (let i=0; i<routes.length; i++) {
const routeseconds = routes[i].elements[0].duration.value;
if (routeseconds > 0 && routeseconds < leastseconds) {
leastseconds = routeseconds; // this route is the shortest (so far)
drivetime = routes[i].elements[0].duration.text; // hours and minutes
closest = response.originAddresses[i]; // city name from destinations
alert("The closest location is " + closest + " (" + drivetime + ")");
Set-Cookie: widget_session=abc123; SameSite=None; Secure
