CODEWITHSUNDEEP
google-maps-api-3geojson
seek
seek

Reputation: 1105

Google maps v3 data.feature Editable?

I have polygons loaded using method

map.data.loadGeoJson('geo.json',{ idPropertyName: 'ID' });

Now I want to make editable one of loaded from geojson polygons.

I was tried:

map.data.getFeatureById(1).setProperty('editable', true);

But it seems that data.feature don't have editable property?

Any ideas how to make it in easiest way? Only one idea that I have in this moment is to make my own parser from geoJson and draw all shapes as google.maps.Polygon().

Upvotes: 11

Views: 4091

Answers (4)

Rui Silva
Rui Silva

Reputation: 433

I think this is the simplest way to do it:

map.data.overrideStyle(map.data.getFeatureById(1), { editable: true });

Upvotes: 10

Dmitry Karyakin
Dmitry Karyakin

Reputation: 123

Part code of this tool https://google-developers.appspot.com/maps/documentation/utils/geojson/

  // Initialise the map.
  map = new google.maps.Map(document.getElementById('map-holder'), {
    center: {lat: 0, lng: 0},
    zoom: 3
  });
  map.data.setControls(['Point', 'LineString', 'Polygon']);
  map.data.setStyle({
    editable: true,
    draggable: true
  });

Full editor code: https://google-developers.appspot.com/maps/documentation/utils/geojson/editor.js

Upvotes: 4

Mir Shakeel Hussain
Mir Shakeel Hussain

Reputation: 517

google.maps.event.addListener(nowEditingShape, 'mouseover', function(event) {
        this.setEditable(true);
});

Upvotes: -2

seek
seek

Reputation: 1105

Maybe it isn't best solution but it works for me now. I'm duplicating shape geometry from feature and creating new polygon in place.

var shape = [];
for (var i = 0; i < map.data.getFeatureById(ID).getGeometry().getLength(); i++) {
        var shapeData = map.data.getFeatureById(ID).getGeometry().getAt(i).getArray();
        shape.push(shapeData);
    }

    nowEditingShape = new google.maps.Polygon({
      paths: shape,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
    editable: true
    });
    map.data.remove(map.data.getFeatureById(ID));
    nowEditingShape.setMap(map);

Upvotes: 6

Related Questions