Получить ориентиры поблизости от заданной координаты в Javascript Асинхронно

Question

Мне нужны важные помещения (например, больницы, школы, магазины и т. Д.) Вокруг местоположения, определяемого долготой и широтой. Я успешно реализовал это в PHP следующим образом:

$lat = "27.71158601970849";
$lon = "85.3187467697085";
$type = "hospital";
$json = json_decode(file_get_contents("https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=$lat,$lon&radius=1000&type=$type&key=AIzaSyBeeGuG4sYloXT54VJZ5JeADQ8DmG9toBc") , true );

Используя информацию в переменной $json, я могу отображать места поблизости.

Я заметил, что когда мне нужно запустить один и тот же код в цикле для каждого типа свойства (больницы, школы, ...), мой page load time increased to 7 seconds. Что явно нежелательно для посетителей.

Так что сделать UX лучше Я думал, что использование ajax call будет лучше. Поэтому я попробовал этот код:

$(document).ready(function(){
    if(typeof latitude !== typeof undefined){
        var lat = latitude;
        var lon = longitude;
        var type = "hospital";
        $.ajax({
            type:"GET",
            url:"https://maps.googleapis.com/maps/api/place/nearbysearch/json?location="+lat+","+lon+"&radius=1000&type="+type+"&key=AIzaSyBeeGuG4sYloXT54VJZ5JeADQ8DmG9toBc&callback?",
            dataType:"json",
            crossDomain: true,
            contentType: "application/json; charset=utf-8;",
            // async: true,
            success: function(results){
                console.log(results);
            },
             error: function (xhr, textStatus, errorThrown) {
                 console.log('Error in Operation');
                 console.log(xhr);
                 console.log(textStatus);
                 console.log(errorThrown);
             },
            jsonpCallback: function(result)
            { 
                console.log(result); 
            }
        });
        // console.log(latitude , longitude);
    }
});

Я застрял в этой проблеме на 3 дня. Ни одно решение в интернете не сработало. Я получаю следующий вывод в консоли.

Warning: 

Запрос на перекрестное происхождение заблокирован: одна и та же политика происхождения запрещает чтение удаленный ресурс на https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=27.717807854017007,85.32777655029304&radius=1000&type=hospital&key=AIzaSyBeeGuG4sYloXT54VJZ5JeADQ8DmG9toBc&callback?. (Причина: отсутствует заголовок CORS ‘Access-Control-Allow-Origin’).

Многие решения предлагают изменить заголовок на стороне сервера на Access-Control-Allow-Origin *. Но как я могу изменить серверный код Google API? Почему тот же ответ был без ошибок декодирован в PHP на том же сайте?

Error in Operation
parsererror
SyntaxError: unexpected token: ':'[Learn More]

Я получаю файл JSON в консоли, я не знаю, откуда он отображается, , но мне нужен был json, но в этом файле есть ошибка. Чтобы увидеть проблему самостоятельно, посетите мой сайт .

Файл json выглядит следующим образом:

{
   "html_attributions" : [],
   "next_page_token" : "CvQD5QEAAKjJw1utsQJW5CkIGPIFiu-3qtZEZs_MTNBiGLQnTWR3Z_8GTrtQ06cq_2x9TFtRunS-ZTswJQegZmB2A4d42ML0NBqkHqrZkQy4doNCeRY2f3A_7RKPzSHqIMhrfHr75LhVhAylbiwb9ee_og9pm7mRnLAXRC3FkyTCnRH8gz_Ef3Zfr39NOyVwYDUP5uDy_YW425Um_WA4KSuasuc8sxQlb5QlWW9Ol9Zd6MtEanWcPGoCeabJQRuwQjMqM78eokRYfo_pyVsd_duVn7r0Np4WXvETSpwjLQwSW7E34O9o3xAB7_Kjx9qkQRGiLrYpuzqCLZaUaliQ1K00sScWmNbsnTOyrmQf1pqzkQkCwsEILherFOJLVCxyEXGN9Pa1C9gZfJhR7KOVcDW__BIo7n0mcps1JO4GEMgNpbULpQMRGSGdT3-2vtOITQJYzvPtnpYewvyEJtLvJOTX3_f-VqYG1OAbArH6riGJ1kYXTQN4ZX6w2LbiEWDRKCEr50RuHnRstvbfv-O74yfJUhrnYsI14b2XtFSQGADPIJqBCcqUHUSx5li2BF8f5da3IcmZVjKHGn-2dozfVYE190aIDYYYcwqGNWJIjE20fnwaR6302mFzJ8ssHL2liDzcpAxcrWjfVdM86riwWBhEPmIyKUMSENYZmjWNGgkpGJbRElNeyoAaFJ2QH902uDsBeXzEGM9tBSe9OWVZ",
   "results" : [
      {
         "geometry" : {
            "location" : {
               "lat" : 27.718038,
               "lng" : 85.32124039999999
            },
            "viewport" : {
               "northeast" : {
                  "lat" : 27.7193869802915,
                  "lng" : 85.3225893802915
               },
               "southwest" : {
                  "lat" : 27.71668901970849,
                  "lng" : 85.31989141970848
               }
            }
         },
         "icon" : "https://maps.gstatic.com/mapfiles/place_api/icons/doctor-71.png",
         "id" : "38f6d1f517223601b130cc35bdf6bfb95b205ef5",
         "name" : "Dental Imaging Centre",
         "opening_hours" : {
            "open_now" : true,
            "weekday_text" : []
         },
         "photos" : [
            {
               "height" : 3480,
               "html_attributions" : [
                  "\u003ca href=\"https://maps.google.com/maps/contrib/116325705698031818585/photos\"\u003eSangam Dhakal\u003c/a\u003e"
               ],
               "photo_reference" : "CmRaAAAA6u3e7yL6fwG77PVsWJN07knD6jmQMa2dRL7vmtToFh9x6KaViDf2WHhYtiYPacZTlzCAB2npe8z45hR18UbQfrTRCLXt2wAPHGYLNRqGD7zwfuPRETZ0nh5nIlr72VAlEhDItbx5uxo24kxLQ0_CT29ZGhTvzKiIkyyyRSfF8bjlKVsz_Csjjw",
               "width" : 4640
            }
         ],
         "place_id" : "ChIJheuuJxsZ6zkRlgeZX3mXoMI",
         "rating" : 4,
         "reference" : "CmRSAAAATXt4gZlyejOUAKP4DL2ECCIGIC7cCxxiQv03oA7IdSKZ1OpP1HPyoTG37IuJ3xZyavW3G4H5eEiavjJKwIAss8yM6xIeDla_FdDnrM6NhbOzJ5FaH0uufIcAHGtxBkBsEhB4RdTC6Zvx9nnHecH7s4snGhQpfzxe5vDMtigmAoPQ_cDN-xZO1g",
         "scope" : "GOOGLE",
         "types" : [ "hospital", "point_of_interest", "establishment" ],
         "vicinity" : "Kathmandu"
      }
...
...

Официальная документация Google .

Answer 1

В конечном итоге я нашел документацию из API Google Maps javascript , которая прекрасно работает, просто не забудьте связать событие для запуска этого кода с документом после его полной загрузки .

  function initMap() {
    console.log('latit',latitude);
    var myLatLng = {lat: latitude, lng: longitude};
    var map1 = new google.maps.Map(document.getElementById('map_detail'), {
      zoom: 15,
      center: myLatLng
    });

    var marker1 = new google.maps.Marker({
      position: myLatLng,
      map: map1,
    });
    service = new google.maps.places.PlacesService(map1);
    Object.keys(nearbyLandmarksArr).forEach(function(key) {
      var request = {
        location: myLatLng,
        radius: '1000',
        query: key
      };  
      service.textSearch(request, callback);
      // console.log(key, obj[key]);
    });
  }

  function callback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) { 
      for (var i = 0; i < results.length; i++) {
        console.log( results[i] , place.types);
      }
    }
   }

Следующая строка связывает вышеуказанный код с DOM после загрузки.

google.maps.event.addDomListener(window, 'load', initMap);