1

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"}]
MBS
  • 72
  • 7
  • What does this have to do with the Google Maps Javascript API v3 (google-maps-api-3 tag)? – geocodezip Jul 30 '19 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 Jul 30 '19 at 11:51
  • @geocodezip The function getFeatureById and setProperty are map class functions. Its a Google Maps API class. – MBS Jul 30 '19 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 Jul 30 '19 at 11:54
  • when you say localhost path, do you mean cli or web url? if its cli, you need it to be available via the webserver. if the script is run on a php file on the localhost as well, you can include it in another way. – Anuga Jul 30 '19 at 11:58
  • @Anuga Its on my disk. Even so I am getting data. The same JSON reponse is returned in Chrome Developer Tools > Network > xhr > Response. 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 and subsequently error 2 on line 180 – MBS Jul 30 '19 at 12:01
  • The JSON you posted a link to is not valid GeoJSON. How are you initializing the DataLayer? Please provide a [mcve] that demonstrates your issue. – geocodezip Jul 30 '19 at 12:03
  • post a screenshot out the output of stationdata.php – Anuga Jul 30 '19 at 12:09
  • @geocodezip Actually this is not supposed to be the GeoJSON file. The map is already created using loadGeoJson using a valid GeoJson file and is created successfully. This is a simple JSON file which I am using to project data onto the map – MBS Jul 30 '19 at 12:15
  • @geocodezip sorry bro didn't catch what you said. what should i do exactly? – MBS Jul 30 '19 at 12:32
  • I did it for you. – geocodezip Jul 30 '19 at 13:50
  • @geocodezip thank you so much. Could you figure out the problem using the more info I've provided. Thank you – MBS Jul 30 '19 at 18:40
  • 1
    You have an answer. I agree it is a most likely a timing issue (but can't reproduce it from the information provided). – geocodezip Jul 30 '19 at 20:28
  • @geocodezip 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 – MBS Jul 31 '19 at 07:47

2 Answers2

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

cptnk
  • 2,430
  • 18
  • 29
  • 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 Jul 30 '19 at 11:57
  • I am getting the data for console.log(crimeVariable); and console.log(stationName); thus the variable row is surely not empty – MBS Jul 30 '19 at 12:04
  • The JSON response is exactly the same for both. Actually I copy/pasted the response I got using PHP file and hosted it via myjson.com and used the link instead and it works – MBS Jul 30 '19 at 12:05
  • Regarding the JSON headers, the hosted JSON file which does work does not have a header either. – MBS Jul 30 '19 at 12:10
  • 1
    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 Jul 30 '19 at 12:28
  • I'vejust tried console.log(map.data); above console.log(map.data.getFeatureById(stationName)); //error1 and it gives ouput fine df {gm_accessors_: {…}, map: dh, gm_bindings_: {…}, j: Le, l: Ne, …} – MBS Jul 30 '19 at 12:37
  • Further I've just checked map.hasOwnProperty('data') and it returns true as well – MBS Jul 30 '19 at 12:39
  • can you read this and maybe understand better why it isn't working: https://developers.google.com/maps/documentation/javascript/reference/data#Data.getFeatureById – MBS Jul 30 '19 at 12:43
  • 2
    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. https://hackernoon.com/please-stop-using-console-log-its-broken-b5d7d396cf15 . 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. – cptnk Jul 30 '19 at 14:27
  • but sir the map.data is being loaded using another local JSON file. Now I want to project data in a second json file onto this map. map.data is showing true and map is drawn as well. map.data.getFeatureById(stationName) gives undefined although map.data does contain features of stationName and works fine when the 2nd JSON file output is hosted and URL is used instead of a PHP file which returns the JSON data. Locally stored JSON file does not work either. In both unsuccessful cases, data is still retrieved and output in crimeVariable and stationName. – MBS Jul 30 '19 at 18:26
  • 1
    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 – MBS Jul 31 '19 at 07:48
0

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

craigcaulfield
  • 3,381
  • 10
  • 32
  • 40
Mahesh S
  • 373
  • 1
  • 3
  • 19
  • 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 – MBS Jul 30 '19 at 12:41