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"}]

What does this have to do with the Google Maps Javascript API v3 (google-maps-api-3 tag)? — geocodezip
– geocodezip, Commented Jul 30, 2019 at 11:40
if the file is available on your webserver, then just find out the path... xhr.open('GET', '/path/to/data/stationdata.php', true); — Anuga
– Anuga, Commented Jul 30, 2019 at 11:51
@geocodezip The function getFeatureById and setProperty are map class functions. Its a Google Maps API class. — MBS
– MBS, Commented Jul 30, 2019 at 11:53
@Anuga Yeah but as I mentioned its not working xhr.open('GET', './data/stationdata.php', true) does not work (its on the localhost path) — MBS
– MBS, Commented Jul 30, 2019 at 11:54
You have an answer. I agree it is a most likely a timing issue (but can't reproduce it from the information provided). — geocodezip
– geocodezip, Commented Jul 30, 2019 at 20:28

cptnk · Accepted Answer · 2019-07-30 14:37:29Z

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

edited Jul 30, 2019 at 14:37

answered Jul 30, 2019 at 11:43

cptnk

2,42020 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

MBS Over a year ago

Yeah sure, I am getting data. The lines console.log(crimeVariable); and console.log(stationName); work well and ouput data but when console.log(map.data.getFeatureById(stationName)); is reached, it outputs undefined if I am using the local PHP file

MBS Over a year ago

I am getting the data for console.log(crimeVariable); and console.log(stationName); thus the variable row is surely not empty

cptnk Over a year ago

You are getting a is undefined on map.data.getFeatureById(stationName) because map.data is undefined at that exact moment in time. Can you use a type check on the map.data variable or check it with map.hasOwnProperty('data')

cptnk Over a year ago

As I said before I mean that your map.data isn't defined at the given time the code tries to access it. Meaning that using console.log() to debug this use case is giving you false positives. hackernoon.com/… . Make sure that your map.data is loaded before you access it. As to why it works if you use the 3rd party vendor, it is probably because it takes longer to load then the google maps request so maps.data is allways filled. The moment you use the local approach this isnt the case anymore because it is done faster.

MBS Over a year ago

Yeah merci bien. it was indeed so. I used a different function to create the map and from there I called showStation() to add the data layer. Its resolved. Creating the map and creating the data layer in the same function was causing the problem. A timing issue it was

|

craigcaulfield · Accepted Answer · 2019-07-30 22:58:32Z

0

It seems that the map.data.getFeatureById(stationName) or either the stationName is not available in map.data or map.data is undefined.

edited Jul 30, 2019 at 22:58

craigcaulfield

3,54810 gold badges37 silver badges46 bronze badges

answered Jul 30, 2019 at 11:52

Mahesh S

3951 gold badge6 silver badges20 bronze badges

1 Comment

MBS Over a year ago

No bro map.data is defined. console.log(map.data) returns output fine as well but dont know somehow why the getFeatureById is not working

Collectives™ on Stack Overflow

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

2 Answers 2

11 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related