google maps API - "toGeoJson" returns object with geometry null

Question

I'am using the google maps Drawing Layer (Library) to draw shapes on my map.

Once finished drawing all the shapes I call "toGeoJson" function from the google maps api.

The object i receive look like this:

object received when calling "toGeoJSON"

I can't figure out what I'am doing wrong.

I am just trying to create a GeoJson out of the shapes drawn on the map.

I am not pasting any code because the drawing part is all done by the drawing library and the "toGeoJson" function is done by the google maps API.

Answer 1

There is no toGeoJSON method on the drawing manager, that only exists on the Data class

Drawing objects on the map with the drawing manager doesn't add them to the DataLayer.

You can add the objects from the drawing manager to the Data Layer, then call toGeoJson on that.

To prevent adding duplicate objects to the map, use a separate Data object, rather than the one on the map.

proof of concept fiddle

(some code from the related question: Export geoJSON data from Google Maps)

code snippet:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 8
  });

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.MARKER,
        google.maps.drawing.OverlayType.CIRCLE,
        google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.POLYLINE,
        google.maps.drawing.OverlayType.RECTANGLE
      ]
    },
    markerOptions: {
      icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
    },
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);
  var dataLayer = new google.maps.Data();
  // from https://stackoverflow.com/questions/25072069/export-geojson-data-from-google-maps
  // from http://jsfiddle.net/doktormolle/5F88D/
  google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
    switch (event.type) {
      case google.maps.drawing.OverlayType.MARKER:


        dataLayer.add(new google.maps.Data.Feature({
          geometry: new google.maps.Data.Point(event.overlay.getPosition())
        }));
        break;
      case google.maps.drawing.OverlayType.RECTANGLE:
        var b = event.overlay.getBounds(),
          p = [b.getSouthWest(), {
              lat: b.getSouthWest().lat(),
              lng: b.getNorthEast().lng()
            },
            b.getNorthEast(), {
              lng: b.getSouthWest().lng(),
              lat: b.getNorthEast().lat()
            }
          ]
        dataLayer.add(new google.maps.Data.Feature({
          geometry: new google.maps.Data.Polygon([p])
        }));
        break;
      case google.maps.drawing.OverlayType.POLYGON:
        dataLayer.add(new google.maps.Data.Feature({
          geometry: new google.maps.Data.Polygon([event.overlay.getPath().getArray()])
        }));
        break;
      case google.maps.drawing.OverlayType.POLYLINE:
        dataLayer.add(new google.maps.Data.Feature({
          geometry: new google.maps.Data.LineString(event.overlay.getPath().getArray())
        }));
        break;
      case google.maps.drawing.OverlayType.CIRCLE:
        dataLayer.add(new google.maps.Data.Feature({
          properties: {
            radius: event.overlay.getRadius()
          },
          geometry: new google.maps.Data.Point(event.overlay.getCenter())
        }));
        break;
    }
  });
  google.maps.event.addDomListener(document.getElementById('save'), 'click', function() {
    dataLayer.toGeoJson(function(obj) {
      document.getElementById('geojson').innerHTML = JSON.stringify(obj);
    });
  })
}
google.maps.event.addDomListener(window, 'load', initMap);

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map {
  height: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<input id="save" value="save" type="button" />
<div id="geojson"></div>
<div id="map"></div>