Can't import geojson value as string in google maps with firebase web

Question

So, I set up my firebase to communicate with my web app which uses google maps api and my goal is this: When a user draws a shape on the map(polygon, linestring), I want to send the geoJson value of it to the firebase(currently sending it as a String), and then retrieve it back so it appears on the map for everyone(since it's getting synced from the firebase database). My problem is that when I try to retrieve the geoJson data back and add it on google maps, at the line map.data.addGeoJson(geoJsonString);(geoJsonString = geoJson value that is stored in firebase) I get an error saying:

Uncaught Jb {message: "not a Feature or FeatureCollection", name: "InvalidValueError", stack: "Error↵ at new Jb (https://maps.googleapis.com/m…tatic.com/firebasejs/4.13.0/firebase.js:1:278304)"}

For some reason google maps api doesnt accept the geoJson value even though console.log(geoJsonString); returns a valid geoJson value (checked at http://geojsonlint.com/)

Now the strange part is that if I try to import the same geoJson value manually(storing the geoJson value in a var and then map.data.addGeoJson(geoJsonString);) it works just fine.

This function syncs firebase with the web app

 function gotData(data){
  paths = data.val();
  if(paths == null){
  console.log("firebase null");
  alert('Database is empty! Try adding some paths.');
  }
  else{
      var keys = Object.keys(paths);
      for(var i = 0; i < keys.length; i++){
      var k = keys[i];
      var geoJsonString = paths[k].geoJsonString;
      console.log(geoJsonString);
      map.data.addGeoJson(geoJsonString);
      }
 } 
 }

This function updates and pushes data in firebase

function updateData(){
  data = {
  geoJsonString: geoJsonOutput.value
 }
  ref = database.ref('firebasePaths');
  ref.push(data);
}

In this function(which is used to store geoJson values locally in a file), I call updateData function), after a new path is drawn on the map

// Refresh different components from other components.
function refreshGeoJsonFromData() {
map.data.toGeoJson(function(geoJson) {
geoJsonOutput.value = JSON.stringify(geoJson);
updateData();
refreshDownloadLinkFromGeoJson();
 });
}

Example of my firebase that contains 2 random geoJson

I can't trace where the problem is. Any ideas?

Dimitris Diamadopoulos Dimitris Diamadopoulos · Accepted Answer · 2018-05-06T15:47:24

Update: I managed to fix this issue by parsing the string with JSON.parse("retrieved string from firebase"), saving it to a variable and then adding it to the map with map.data.addgeoJson(parsed variable).

Can't import geojson value as string in google maps with firebase web

2 Answers