Utilizing JSON data from Google Maps Matrix with JavaScript

Question

Utilizing JSON data from Google Maps Matrix with JavaScript

I am trying to fetch the real-time duration of a particular route on Google Maps through my JavaScript code. However, I seem to be stuck. Here's what I have written so far:

$(document).ready(function Duration() {
    var d = new Date();
$.ajax({
    url: 'http://maps.googleapis.com/maps/api/distancematrix/json?origins=91058%20Haupt%20Str.%6+DE&destinations=91058%20Cauerstr.%208+DE&mode=driving&language=de-DE&sensor=false&traffic_model=best_guess&departure_time='+(d.getTime()+300000),
    dataType: "json"
}).done(function(data) {
        var dur = data.rows[0].elements[0].duration.text;
        $("#duration").text(dur);         
    });
});

Simply want to display in HTML using:

<div id="duration"></div>

Would appreciate some assistance! Thank you in advance :)

javascript json ajax parsing

Answer 1

Answer №1

For a successful execution of this task, it is essential to consult Google's documentation. Due to cross-domain restrictions, loading the requested resources may not be feasible. However, the provided code snippet should solve the issue: https://jsfiddle.net/Lw3Ls4yd/

Start by obtaining a Google Maps API key by registering here: https://developers.google.com/maps/documentation/javascript/get-api-key

Once you have acquired the key, insert it into your page at the appropriate location.

<script async defer src="https://maps.googleapis.com/maps/api/js?key'KEY HERE' type="text/javascript"></script>

Next, include the following JavaScript in your local environment:

var distanceService = new google.maps.DistanceMatrixService();
var d= new Date();
distanceService.getDistanceMatrix({
    origins: [ "Cauerstraße 8, 91058 Erlangen, Deutschland" ],
    destinations: [ "Hauptstraße 6, 48607 Ochtrup, Deutschland" ],
    travelMode: google.maps.TravelMode.DRIVING,
    unitSystem: google.maps.UnitSystem.METRIC,
    transitOptions: {
            departureTime:d
        },
    durationInTraffic: true,
    avoidHighways: false,
    avoidTolls: false
},
function (response, status) {
    if (status !== google.maps.DistanceMatrixStatus.OK) {
        console.log('Error:', status);
    } else {
        console.log(response);
        $('#duration').text(response.rows[0].elements[0].duration.text);
    }
});

Answer 2

For a successful execution of this task, it is essential to consult Google's documentation. Due to cross-domain restrictions, loading the requested resources may not be feasible. However, the provided code snippet should solve the issue: https://jsfiddle.net/Lw3Ls4yd/

Start by obtaining a Google Maps API key by registering here: https://developers.google.com/maps/documentation/javascript/get-api-key

Once you have acquired the key, insert it into your page at the appropriate location.

<script async defer src="https://maps.googleapis.com/maps/api/js?key'KEY HERE' type="text/javascript"></script>

Next, include the following JavaScript in your local environment:

var distanceService = new google.maps.DistanceMatrixService();
var d= new Date();
distanceService.getDistanceMatrix({
    origins: [ "Cauerstraße 8, 91058 Erlangen, Deutschland" ],
    destinations: [ "Hauptstraße 6, 48607 Ochtrup, Deutschland" ],
    travelMode: google.maps.TravelMode.DRIVING,
    unitSystem: google.maps.UnitSystem.METRIC,
    transitOptions: {
            departureTime:d
        },
    durationInTraffic: true,
    avoidHighways: false,
    avoidTolls: false
},
function (response, status) {
    if (status !== google.maps.DistanceMatrixStatus.OK) {
        console.log('Error:', status);
    } else {
        console.log(response);
        $('#duration').text(response.rows[0].elements[0].duration.text);
    }
});

Utilizing JSON data from Google Maps Matrix with JavaScript

Answer №1

Similar questions

When the clearOnBlur setting is set to false, Material UI Autocomplete will not

From Google Assistant to Python Results

Display every even number within the keys of objects that have values ending with an odd number

Unable to view cross domain cookies within the browser's development tools

When an item in the accordion is clicked, the modal's left side scroll bar automatically scrolls to the top. Is there a solution to prevent this behavior and

What steps should I take to successfully install using npm if I keep encountering the same error?

What is the best way to retrieve data from the server for individual div elements?

Creating a form submission event through Asp.net code behind

Dynamic Filtering with jQuery List

Navigating within fixed-positioned divs

Incorporating live text into a tag while arranging items by price in both ascending and descending order

Exploring VBA-JSON to extract a JSON array within a JSON object seamlessly in VBA Excel

What are some strategies for stopping a form from redirecting me while utilizing ReactJS and ExpressJS?

What is the reason behind the undefined value of "this" in this particular class method?

Guide on sending JSON data to a server and receiving JSON/XML in response with JSP

Tips on retrieving the API response using AJAX

Reorganize the layout of a Python dictionary with the help of recursion

Python script used to extract data from Vine platform

Displaying paginated results in the header instead of using JSON in Laravel 5

Setting up Socket.io results in numerous transport polling GET requests being initiated