Accessing Coordinates in a nested geojson file to draw polygons with Google Maps API v3
Solution 1
points.geometry
is an object, but you're trying to loop through it like an array. To access the coordinates, use:
var coordinates = data.features[y].geometry.coordinates;
Solution 2
I'm prefering to integrate the geojson data => map.data.addGeoJson(data);
where data
is simply your js var containing the features details. here's an example of initialize()
function :
function initialize() {
// Create a simple map.
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 11,
center: {
lat: 42.347727,
lng: -83.058014
},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
// Load a GeoJSON from the same server as our demo.
map.data.addGeoJson(mapdata);
setStyle();
};
roy
You will find me wherever Elon Musk's magnificent rockets will take us.
Updated on June 05, 2022Comments
-
roy almost 2 years
I am having a real pain of trying to draw multiple polygons from a geojson file. Below I have pasted a sample of the geojson file and the javascript used to access it. It seems the main problem I am running into is that I cannot get into that array of coordinates nested in each record as it either returns the error that "coordinates" is undefined or that there is no method "setMap" for undefined. I have been able to return other nested aspects of a similar JSON file (this is a test file, the real one actually has data, just trying to get the polygon drawing here), but getting those coordinates is not working. I am not a javascript master so I can't tell where the code is failing to make the proper access.
thanks in advance.
the json data looks like this:
var data={ "type": "FeatureCollection", "features": [ { "type": "Feature", "id": 1, "properties": { "Name": "", "description": "", "timestamp": "", "begin": "", "end": "", "altitudeMode": "clampToGround", "tessellate": 1, "extrude": -1, "visibility": -1 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -83.126571, 42.348706 ], [ -83.126520, 42.348634 ], [ -83.126516, 42.348635 ], [ -83.126147, 42.348778 ], [ -83.126144, 42.348780 ], [ -83.126195, 42.348852 ], [ -83.126199, 42.348851 ], [ -83.126568, 42.348708 ], [ -83.126571, 42.348706 ] ] ] } }, { "type": "Feature", "id": 2, "properties": { "Name": "", "description": "", "timestamp": "", "begin": "", "end": "", "altitudeMode": "clampToGround", "tessellate": 1, "extrude": -1, "visibility": -1 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -83.132805, 42.356496 ], [ -83.132753, 42.356423 ], [ -83.132751, 42.356424 ], [ -83.132243, 42.356624 ], [ -83.132241, 42.356625 ], [ -83.132294, 42.356698 ], [ -83.132296, 42.356697 ], [ -83.132802, 42.356497 ], [ -83.132805, 42.356496 ] ] ] } }, { "type": "Feature", "id": 3, "properties": { "Name": "", "description": "", "timestamp": "", "begin": "", "end": "", "altitudeMode": "clampToGround", "tessellate": 1, "extrude": -1, "visibility": -1 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -83.126776, 42.351813 ], [ -83.126492, 42.351413 ], [ -83.126189, 42.351525 ], [ -83.126191, 42.351528 ], [ -83.126376, 42.351807 ], [ -83.126776, 42.351813 ] ] ] } } etc... ] }
I've got the javascript as below, using the example used at geojason.info: http://demos.geojason.info/complex-geojson-polygons-google-maps-demo.php
var points; var pointsMore; var polygon; var map; function initializeMap() { map = new google.maps.Map(document.getElementById("map_canvas"), { zoom: 11, center: new google.maps.LatLng(42.347727, -83.058014), mapTypeId: google.maps.MapTypeId.TERRAIN }); var polygon = createPolygons(pointsMore); //this is where the problem is...check nesting. polygon.setMap(map); } function createPolygons(pointsMore) { for (var y = 0; y < data.features.length; y++) { var points = data.features[y]; for (var z = 0; points.geometry.length; z++) { var pointsMore = points.geometry[z]; var coords = pointsMore.coordinates; var paths = []; $.each(coords,function(i,n){ $.each(n, function(j,o){ var path = []; $.each(o,function(k,p){ var ll = new google.maps.LatLng(p[1],[0]); path.push(ll); }); paths.push(path); }); }); var polygon = new google.maps.Polygon({ paths: paths, strokeColor: "#FF7800", strokeOpacity: 1, strokeWeight: 2, fillColor: "#46461F", fillOpacity: 0.25 }); return polygon; } } }