Get landmarks nearby given coordinate in Javascript Asynchronously

Question

I need the important premises ( like hospitals, schools, stores, etc ) around a location defined by longitude and latitude. I implemented that successfully in PHP as follows:

$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 );

Using the information in $json variable I'm able to display the places nearby.

I noticed that when I need to run the same code in loop for each property type ( hospital, school, ... ) my page load time increased to 7 seconds. Which is obviously not desirable by visitors.

So to make UX better I thought using ajax call would be better. So I tried this code:

$(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);
    }
});

I have been stuck in this problem for 3 days. No solution on internet worked. I get following output in console.

Warning:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=27.717807854017007,85.32777655029304&radius=1000&type=hospital&key=AIzaSyBeeGuG4sYloXT54VJZ5JeADQ8DmG9toBc&callback?. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Many solutions suggest to change server side header to Access-Control-Allow-Origin *. But how can I change the server side code of Google API? Why same response was decoded without error in PHP in same site?

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

I'm getting a JSON file in console, I have no idea where it's been displaying from, but it is the json I needed, but there's error in that file. To see the issue yourself you may please visit my site.

The json file is as below:

{
   "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"
      }
...
...

The official documentation of Google.

score 0 · Answer 1 · answered May 10 '18 at 09:42

I ultimately found the solution from google map javascript API documentation which works perfectly just do not forget to bind an event to run this code to document after it loads completely.

  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);
      }
    }
   }

Following line binds above code code with DOM after load.

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

Get landmarks nearby given coordinate in Javascript Asynchronously

1 Answers1