Sinthuja.Chandra
Sinthuja.Chandra

Reputation: 369

Why I can not import the following GeoJson data into Google map

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. enter image description here

Thanks in advance.

Upvotes: 3

Views: 977

Answers (1)

geocodezip
geocodezip

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.

fiddle

screenshot of resulting map

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

Related Questions