How to use JSON data returned from a local PHP file in Google Maps API instead of an online hosted JSON file?

Question

While combining data on a map using Google Maps API, I use a local PHP file which returns the same JSON result which I store online via hosting using a site like myjson. However I cannot use the local PHP file as I want (which would mean it returns a dynamic JSON file if I update database) and get an error.

There's a similar example at this page which too uses a hosted static JSON file but not a JSON file returned using PHP queries using a PHP file as I want it to be

Further this (https://developers.google.com/maps/documentation/javascript/reference/data#Data.getFeatureById ) does not help either as the feature does exist in the collection

function showStation(crimeType) {
    var map;

    map = new google.maps.Map(document.getElementById('map'),{
            zoom:9,
            center: {lat: 32.815939, lng: 73.305297}
        });


        map.data.loadGeoJson('stations.js', { idPropertyName: 'name' });

        var xhr = new XMLHttpRequest();

xhr.open('GET', 'https://api.myjson.com/bins/1e0rkl', true); //works
//xhr.open('GET', './data/stationdata.php', true); //does not work

xhr.onload = function() {
     var crimeData = JSON.parse(xhr.responseText);

     crimeData.forEach(function(row){          //line 170

       var crimeVariable = row[crimeType];
       console.log(crimeVariable);
       var stationName = row.stationName;
       console.log(stationName);

       console.log(map.data.getFeatureById(stationName)); //error1

       map.data.getFeatureById(stationName).            //Line 180
       setProperty(crimeType, crimeVariable); //error2
  }); 
}

xhr.send();
        map.data.setStyle(styleFeature);

} 

I get errors: undefined for //error1 and for //error2 I get:

Uncaught TypeError: Cannot read property 'setProperty' of undefined at functions2.js:180 at Array.forEach (<anonymous>) at XMLHttpRequest.xhr.onload (functions2.js:170)

This is the response from stationdata.php:

[{"stationName":"PS Chotala","murder":"0.5238"},{"stationName":"PS City","murder":"0.6984"},{"stationName":"PS Civil Lines","murder":"0.5238"},{"stationName":"PS Dina","murder":"0.6984"},{"stationName":"PS Domeli","murder":"1.2222"},{"stationName":"PS Jalalpur Sharif","murder":"0.8730"},{"stationName":"PS Lilla","murder":"0.7857"},{"stationName":"PS Mangla Cantt","murder":"1.1349"},{"stationName":"PS Pind Dadan Khan","murder":"0.6984"},{"stationName":"PS Saddar","murder":"0.6984"},{"stationName":"PS Sohawa","murder":"3.1429"}] 

Answer 1

It seems that your row variable is empty or is missing required attributes/array keys.

You did not share your PHP portion of the application nor a folder/file structure so its pretty hard to pinpoint the error per se.

Are you sure your getting a good response code from './data/stationdata.php'? You can check your browsers networking tab to see if that XHR requests returns a error codes like 400, 500, 401.

If on the other hand you are getting a good response code, your JSON encoding might be faulty or you are missing a JSON header within your PHP file.

You can find a example with a JSON header here: Returning JSON from a PHP Script

EDIT: As I mentioned in the comments section this could also be a timing issue. It is possible to attach a callback function to the gmaps script tag that will access your custom javascript once it is fully loaded. https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API