如何克服html页面中的这个问题？

Question

下面是我的代码，用于查找两个lat / lon值之间的距离和时间。在jQuery AJAX中进行Google API调用时，会出现类似

的错误

  

否＆＃39;访问控制 - 允许 - 来源＆＃39;标头出现在请求的资源上。

以下是访问以下代码时控制台中显示的错误

  

jquery.min.js：2无法加载https://maps.googleapis.com/maps/api/directions/json?origin=16.980053%2C82.237960&destination=17.412955%2C78.454724&mode=driving&key=xxxxxxxx&_=1528379851172：否＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。起源＆＃39; null＆＃39;因此不允许访问。

如何解决此问题？

 function FindDistanceTime() {
     var ori = $("#txtori").val();
     var dest = $("#txtDes").val();
     $.ajax({
         url: "https://maps.googleapis.com/maps/api/directions/json",
         type: "GET",
         crossDomain: true,
         dataType: 'json',
         cache: false,
         data: {
             origin: ori,
             destination: dest,
             mode: "driving",
             key: "xxxxxxxxx"
         },
         async: false,
         success: function (data) {
             console.log(JSON.parse(data));
         }
     });
 }