在HTML文本区域中显示谷歌地图数据层

如何在HTML文本区域中显示谷歌地图数据层？

我需要能够保存用户使用绘图工具对地图所做的更改。

这就是我要做的事情。

1. 在html文本区域显示谷歌地图数据层
2. 当用户点击"保存地图"时，文本区域中的内容将保存在数据库，以便用户以后可以查看/编辑地图

我已经添加了来自现有JSFiddle的代码。JSFiddle显示第二个地图。我希望第二个映射只显示GeoJSON数据。

JSFiddle:

jsfiddle{dot}net/mikestratton/z988k7na/    
function initialize() { 
// Create a simple map.
  map = new google.maps.Map(document.getElementsByTagName('TD')[0].firstChild, {
    zoom: 9,
    center: {
      lat: 41,
      lng: -81
    },
    disableDefaultUI: true
  });
  // test result
  map2 = new google.maps.Map(document.getElementsByTagName('TD')[1].firstChild, {
    zoom: map.getZoom(),
    center: map.getCenter()
  });
  map2.bindTo('zoom', map, 'zoom');
  map2.bindTo('center', map, 'center');
  // END test result
  map.data.setStyle(function(feature) {
    if (feature.getProperty('radius') && feature.getGeometry().getType() === 'Point') {
      return {
        visible: false
      };
    }
    return {
    };
  });'
  // test result
  map2.data.setStyle(function(feature) {
    if (feature.getProperty('radius') && feature.getGeometry().getType() === 'Point') {
      new google.maps.Circle({
        map: map2,
        center: feature.getGeometry().get(),
        radius: feature.getProperty('radius')
      });
      return {
        visible: false
      };
    }
    return {
    };
  });
// END test result
  map.data.loadGeoJson('https://storage.googleapis.com/maps-devrel/google.json');
  google.maps.event.addListenerOnce(map.data, 'addfeature', function() {
    var btn = document.createElement('input');
    btn.type = 'button';
    btn.value = 'save data layer to test result';
    google.maps.event.addDomListener(btn, 'click', function() {
      map2.data.forEach(function(f) {
        map2.data.remove(f);
      });
      map.getGeoJson(function(geo) {
        console.log(map2.data.addGeoJson(geo));
      });
    });
    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(btn);
  });
  var drawingManager = new google.maps.drawing.DrawingManager({
    map: map,
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.RIGHT_TOP,
      drawingModes: [
        google.maps.drawing.OverlayType.MARKER,
        google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.POLYLINE,
        google.maps.drawing.OverlayType.CIRCLE,
        google.maps.drawing.OverlayType.RECTANGLE
      ]
    }
  });
  google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
    switch (event.type) {
      case google.maps.drawing.OverlayType.MARKER:
        map.data.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()
          }]
        map.data.add(new google.maps.Data.Feature({
          geometry: new google.maps.Data.Polygon([p])
        }));
        break;
      case google.maps.drawing.OverlayType.POLYGON:
        map.data.add(new google.maps.Data.Feature({
          geometry: new google.maps.Data.Polygon([event.overlay.getPath().getArray()])
        }));
        break;
      case google.maps.drawing.OverlayType.POLYLINE:
        map.data.add(new google.maps.Data.Feature({
          geometry: new google.maps.Data.LineString(event.overlay.getPath().getArray())
        }));
        break;
      case google.maps.drawing.OverlayType.CIRCLE:
        map.data.add(new google.maps.Data.Feature({
          properties: {
            radius: event.overlay.getRadius()
          },
          geometry: new google.maps.Data.Point(event.overlay.getCenter())
        }));
        break;
    }
  });

}


google.maps.Map.prototype.getGeoJson = function(callback) {
  var geo = {
      "type": "FeatureCollection",
      "features": []
    },
    fx = function(g, t) {
      var that = [],
        arr,
        f = {
          MultiLineString: 'LineString',
          LineString: 'Point',
          MultiPolygon: 'Polygon',
          Polygon: 'LinearRing',
          LinearRing: 'Point',
          MultiPoint: 'Point'
        };
      switch (t) {
        case 'Point':
          g = (g.get) ? g.get() : g;
          return ([g.lng(), g.lat()]);
          break;
        default:
          arr = g.getArray();
          for (var i = 0; i < arr.length; ++i) {
            that.push(fx(arr[i], f[t]));
          }
          if (t == 'LinearRing' &&
            that[0] !== that[that.length - 1]) {
            that.push([that[0][0], that[0][1]]);
          }
          return that;
      }
    };
  this.data.forEach(function(feature) {
    var _feature = {
      type: 'Feature',
      properties: {}
    }
    _id = feature.getId(),
      _geometry = feature.getGeometry(),
      _type = _geometry.getType(),
      _coordinates = fx(_geometry, _type);
    _feature.geometry = {
      type: _type,
      coordinates: _coordinates
    };
    if (typeof _id === 'string') {
      _feature.id = _id;
    }
    geo.features.push(_feature);
    feature.forEachProperty(function(v, k) {
      _feature.properties[k] = v;
    });
  });
  if (typeof callback === 'function') {
    callback(geo);
  }
  return geo;
}

google.maps.event.addDomListener(window, 'load', initialize);