Reputation: 369
What's wrong with the GeoJson data.
data= {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"letter":"f"},"geometry":{"type":"Polygon","coordinates":[[[-0.467823,51.8881],[-0.461189,51.883591],[-0.45952,51.882457],[-0.4584,51.881558],[-0.455638,51.87973],[-0.453644,51.879704],[-0.447352,51.879806],[-0.442062,51.879798],[-0.439082,51.879388],[-0.435922,51.878419],[-0.433059,51.877516],[-0.430189,51.876799],[-0.427409,51.876391],[-0.424125,51.8761],[-0.420636,51.875991],[-0.419732,51.876164],[-0.41987,51.877772],[-0.41932,51.879371],[-0.418517,51.879484],[-0.417789,51.880339],[-0.415227,51.88222],[-0.419205,51.882644],[-0.426901,51.885218],[-0.428296,51.886369],[-0.429248,51.885188],[-0.431001,51.885025],[-0.431131,51.884162],[-0.431451,51.883549],[-0.434041,51.883707],[-0.435319,51.88428],[-0.438299,51.88469],[-0.440777,51.885217],[-0.443263,51.885497],[-0.445256,51.885585],[-0.446127,51.8864],[-0.44839,51.887356],[-0.449782,51.887498],[-0.455175,51.887446],[-0.458568,51.88749],[-0.462862,51.887423],[-0.465357,51.887455],[-0.467487,51.888167]]]}}]}
am adding it as map.data.addGeoJson(data); and getting the error below.
Thanks in advance.
Upvotes: 3
Views: 977
Reputation: 161334
The error I get (in Chrome) is:
in property "features": at index 0: in property "geometry": in property "coordinates": at index 0: first and last positions are not equal
Fixing that (by copying the first point and adding it to the end of the array), displays the polygon.
code snippet:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(51.883707, -0.434041),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
map.data.addGeoJson(data);
}
google.maps.event.addDomListener(window, "load", initialize);
var data = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"letter": "f"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-0.467823, 51.8881],
[-0.461189, 51.883591],
[-0.45952, 51.882457],
[-0.4584, 51.881558],
[-0.455638, 51.87973],
[-0.453644, 51.879704],
[-0.447352, 51.879806],
[-0.442062, 51.879798],
[-0.439082, 51.879388],
[-0.435922, 51.878419],
[-0.433059, 51.877516],
[-0.430189, 51.876799],
[-0.427409, 51.876391],
[-0.424125, 51.8761],
[-0.420636, 51.875991],
[-0.419732, 51.876164],
[-0.41987, 51.877772],
[-0.41932, 51.879371],
[-0.418517, 51.879484],
[-0.417789, 51.880339],
[-0.415227, 51.88222],
[-0.419205, 51.882644],
[-0.426901, 51.885218],
[-0.428296, 51.886369],
[-0.429248, 51.885188],
[-0.431001, 51.885025],
[-0.431131, 51.884162],
[-0.431451, 51.883549],
[-0.434041, 51.883707],
[-0.435319, 51.88428],
[-0.438299, 51.88469],
[-0.440777, 51.885217],
[-0.443263, 51.885497],
[-0.445256, 51.885585],
[-0.446127, 51.8864],
[-0.44839, 51.887356],
[-0.449782, 51.887498],
[-0.455175, 51.887446],
[-0.458568, 51.88749],
[-0.462862, 51.887423],
[-0.465357, 51.887455],
[-0.467487, 51.888167],
[-0.467823, 51.8881]
]
]
}
}]
}
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>
Upvotes: 8