"SyntaxError: Unexpected token ':'. Parse error." JSON & ajax

Question

I'm trying to use google maps api with distance matrix api, i'm getting the routes along with distance and time in json format.

an example of the link i'm getting data from:

https://maps.googleapis.com/maps/api/distancematrix/json?origins=place_id:ChIJ7-bxRDmr3oARawtVV_lGLtw&destinations=place_id:ChIJyYB_SZVU2YARR-I1Jjf08F0&key=YOUR_API_KEY&units=imperial

and data is viewed as follows:

{
   "destination_addresses" : [ "2920 Zoo Dr, San Diego, CA 92101, USA" ],
   "origin_addresses" : [
      "San Diego International Airport (SAN), 3225 N Harbor Dr, San Diego, CA 92101, USA"
   ],
   "rows" : [
      {
         "elements" : [
            {
               "distance" : {
                  "text" : "5.2 mi",
                  "value" : 8440
               },
               "duration" : {
                  "text" : "13 mins",
                  "value" : 756
               },
               "status" : "OK"
            }
         ]
      }
   ],
   "status" : "OK"
}

i'm calling a jquery function on button click (ajax) as follows:

$.ajax({
        type: 'GET',
        url: 'https://maps.googleapis.com/maps/api/distancematrix/json?origins=place_id:' + me.originPlaceId + "&destinations=place_id:" + me.destinationPlaceId + "&key=YOUR_API_KEY&units=imperial",
        dataType: "JSONP", // data type expected from server
        accepts: 'application/json',
        success: function(data) {
          console.log(data);
        },
        error: function(error) {
          console.log('Error: ' + error);
        }
});

this code is the result of many other posts but i'm still getting the error:

SyntaxError: Unexpected token ':'. Parse error.

in line 2 of the json data. This error occurs on safari browser, and if i run the code on chrome i get the following error:

jquery-3.4.1.min.js:2 Cross-Origin Read Blocking (CORB) blocked cross-origin response https://maps.googleapis.com/maps/api/distancematrix/json?origins=place_id:ChIJ7-bxRDmr3oARawtVV_lGLtw&destinations=place_id:ChIJyYB_SZVU2YARR-I1Jjf08F0&key=AYOUR_API_KEY&units=imperial&callback=jQuery34106919863879807548_1566930061936&_=1566930061937 with MIME type application/json.

I need help solving these errors please, thank you in advance.

Answer 1

Since you are making a Distance Matrix API web service request in the client-side (front-end) that's why you are getting the Cross-origin blocking error (CORB). Web service requests are meant to be executed server side .

Note that if you intend to use Distance Matrix in client-side, the JavaScript API has a Distance Matrix Service (which prevents the CORB issue). Please refer to this guide: https://developers.google.com/maps/documentation/javascript/distancematrix

Hope this helps!