Is there built-in support or any library to export geoJSON data from the google.maps.Data layer or google.maps.Data.Feature or google.maps.Data.Geometry or even using Marker,Polyline and Polygon.I have code like this,for example:
var point=new google.maps.Data.Point(m.getPosition());
activeFeature.setGeometry(point);
console.log(activeFeature.getGeometry());
equiLayer.add(activeFeature);
I would like to export this data to the server as geojson.Something like the toGeoJson method in leaflet?
Is there built-in support or any library to export geoJSON data from the google.maps.Data layer or google.maps.Data.Feature or google.maps.Data.Geometry or even using Marker,Polyline and Polygon.I have code like this,for example:
var point=new google.maps.Data.Point(m.getPosition());
activeFeature.setGeometry(point);
console.log(activeFeature.getGeometry());
equiLayer.add(activeFeature);
I would like to export this data to the server as geojson.Something like the toGeoJson method in leaflet?
- developers.google.com/live/shows/7750088-8001 at 13:27 – aa333 Commented Aug 1, 2014 at 3:04
- @aa333 I dont have a JS/JSON source for my data like the developer in the video does,the data is created on the map and then exported. – vamsiampolu Commented Aug 1, 2014 at 3:39
- 3 If this is your Google Maps Javascript API v3 map (not clear to me from your question), there is no native support for exporting it as GeoJSON, but it shouldn't be difficult to write code to do that. – geocodezip Commented Aug 1, 2014 at 16:43
3 Answers
Reset to default 8A sample-function:
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;
}
The function creates an object with the data. You may pass a callback as argument which will be executed with the object as argument.
Sample-call:
//map is the google.maps.Map-instance
map.getGeoJson(function(o){console.log(o)});
Demo: http://jsfiddle.net/doktormolle/5F88D/
Note: the Demo also stores circles, but circles are not supported in GeoJSON. As a workaround it stores circles as a POINT with a radius-property.
When a POINT with a radius-property will be loaded into the data-layer the demo hides the marker and creates a circle based on geometry and the radius-property instead.
<edit>: there is now a built-in method available for geoJSON-export: google.maps.Data.toGeoJson()
See Save Map Instance outside of Google Maps for an example
Hi i would like to share what I did to export geojson data from google maps to an html textarea.
This was my html view
<article id="article3" style="">
<div style="margin: 2px 0px 2px 0px;">
<button onclick= "exportData()">Save</button>
</div>
<textarea id="geojson-input" placeholder="..." class="" style="height: 97%; width: 100%"></textarea>
</article>
This was my javascript
map.data.toGeoJson(function (data) {
document.querySelector('#geojson-input').innerHTML = JSON.stringify(data);
});
The function togeojson which is a function of map.data class, will get all data from the maps and return on object. To display that object on my textarea, I had to convert that object to a string by using JSON.stringify(data);
Hopes that will help!
None of these worked for me. I figured out a way to export custom Polygons which may be useful for other shapes as well.
Here's the key export function:
function getPathArray(polygon) {
return polygon.getPath().getArray().map(p => {
return { lat: p.lat(), lng: p.lng() }
})
}
Here's a full example:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: { lat: 25.774, lng: -70.190 }, // bermuda triangle
});
const bermudaTriangle = new google.maps.Polygon({
paths: [
{ lat: 25.774, lng: -80.190 },
{ lat: 18.466, lng: -66.118 },
{ lat: 32.321, lng: -64.757 },
],
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
editable: true,
draggable: false
});
bermudaTriangle.setMap(map);
bermudaTriangle.getPaths().forEach(function (path, index) {
google.maps.event.addListener(path, 'insert_at', function () {
var data = getPathArray(bermudaTriangle)
console.log(JSON.stringify(data))
})
google.maps.event.addListener(path, 'remove_at', function () {
var data = getPathArray(bermudaTriangle)
console.log(JSON.stringify(data))
})
google.maps.event.addListener(path, 'set_at', function () {
var data = getPathArray(bermudaTriangle)
console.log(JSON.stringify(data))
})
})
google.maps.event.addListener(bermudaTriangle, 'dragend', function () {
console.log("dragged")
})
}
function getPathArray(polygon) {
return polygon.getPath().getArray().map(p => {
return { lat: p.lat(), lng: p.lng() }
})
}
Then use the json that gets printed to the console and import it
bermudaTriangle.setPath(JSON.parse(myJson))