CODEWITHSUNDEEP
javascriptjqueryjsongoogle-mapsundefined
adin
adin

Reputation: 833

Cannot read property 'geometry' of undefined Google Maps JSON

I am unable get the property of a JSON object to be read to create a marker from. In the past, I've used feature.geometry.coordinates[0] and feature.geometry.coordinates[1] to be able to read the coordinates for the marker.

This is an example of what I am trying to do. As I understand it, it's the same thing by reading into the properties of the JSON (in this case, a var) object.

I have Google Maps and the Stamen Toner base map loaded before the JavaScript fires so I don't think it's not having the div loaded before I call the JSON but I could definitely be wrong.

What am I doing wrong?

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Maryland Prisoner Map</title>
    <!--jQuery-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <!--Google Maps API-->
    <script src="http://maps.googleapis.com/maps/api/js"></script>
    <!--Stamen Basemaps-->
    <script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
    <!--CSS-->
    <link href="style.css" rel="stylesheet" type="text/css">
    <!--JavaScript-->
    <script src="script.js" type="text/javascript"></script>
</head>
<body class="page-wrap">
    <div>
        <h1 id="header">Maryland Prisoner Map</h1>
        <p></p>
        <div id="map"></div>
    </div>
    <footer class="site-footer">Thank you for checking out my website!</footer>
</body>
</html>

CSS:

    #header {
    text-align: center;
}

#map {
    height: 800px;
    width: 80%;
    margin: 0 auto;
    border: 1px solid black;
    box-shadow: 2px 2px 1px 2px gray;
}

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
    margin-bottom: -90px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
    height: 90px; 
}
.site-footer {
  background: orange;
}

JavaScript:

$(document).ready(function() {
    var layer = "toner-lite";
    var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(39.290385, -76.612189),
        zoom: 10,
        mapTypeId: layer,
        mapTypeControlOptions: {
            mapTypeIds: [layer]
        }
    });
    map.mapTypes.set(layer, new google.maps.StamenMapType(layer));
    //Get some JSON
    $.getJSON("JSON/County.geojson", function(data) {
        console.log("The JSON has been sought");
        $.each(data, function(i, data) {
            createMarker(data);
        });
    });

    function createMarker(data) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(data.feature.geometry.coordinates[0], data.features.geometry.coordinates[1]),
            map: map,
            title: data.features.name
        });
    }
});

Sample JSON:

{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },

"features": [
{ "type": "Feature", "properties": { "OBJECTID": 1, "Address": "14300 McMullen Highway SW", "City": "Cumberland", "State": "MD", "Zip_Code": 21502, "Type": "Detention Center", "Agency_Nam": "Allegany County Detention Center", "County": "Allegany" }, "geometry": { "type": "Point", "coordinates": [ -78.823195987258302, 39.598971947812366 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 2, "Address": "131 Jennifer Road", "City": "Annapolis", "State": "MD", "Zip_Code": 21401, "Type": "Detention Center", "Agency_Nam": "Anne Arundel County Detention Center", "County": "Anne Arundel" }, "geometry": { "type": "Point", "coordinates": [ -76.530041483218611, 38.988903980495373 ] } }, . . .

Upvotes: 0

Views: 12495

Answers (1)

geocodezip
geocodezip

Reputation: 161334

You have more than one issue with your code:

  1. (the one that is generating the error in the title) The GeoJson is not in the format your code is expecting. You want to process the array of features (not the top level feature collection object)

    $.each(geoJsonData.features, function (i, data) {
    createMarker(data);
});

  2. the coordinates are a property of the feature (which is now data)

  3. You are processing the latitude and longitude backwards. coordinates[1] is latitude, coordinates[0] is longitude:

    function createMarker(data) {
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(data.geometry.coordinates[1], data.geometry.coordinates[0]),
        map: map,
        title: data.properties.Agency_Nam
    });
}

proof of concept fiddle

code snippet:

$(document).ready(function() {
  var layer = "toner-lite";
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(39.290385, -76.612189),
    zoom: 10,
    mapTypeId: layer,
    mapTypeControlOptions: {
      mapTypeIds: [layer]
    }
  });
  map.mapTypes.set(layer, new google.maps.StamenMapType(layer));
  var bounds = new google.maps.LatLngBounds();
  //Get some JSON
  // $.getJSON("JSON/County.geojson", function(data) {
  console.log("The JSON has been sought");
  $.each(geoJsonData.features, function(i, data) {
    createMarker(data);
  });
  // });

  function createMarker(data) {
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(data.geometry.coordinates[1], data.geometry.coordinates[0]),
      map: map,
      title: data.properties.Agency_Nam
    });
    bounds.extend(marker.getPosition());
    map.fitBounds(bounds);
  }
});

var geoJsonData = {
  "type": "FeatureCollection",
  "crs": {
    "type": "name",
    "properties": {
      "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
    }
  },

  "features": [{
    "type": "Feature",
    "properties": {
      "OBJECTID": 1,
      "Address": "14300 McMullen Highway SW",
      "City": "Cumberland",
      "State": "MD",
      "Zip_Code": 21502,
      "Type": "Detention Center",
      "Agency_Nam": "Allegany County Detention Center",
      "County": "Allegany"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-78.823195987258302, 39.598971947812366]
    }
  }, {
    "type": "Feature",
    "properties": {
      "OBJECTID": 2,
      "Address": "131 Jennifer Road",
      "City": "Annapolis",
      "State": "MD",
      "Zip_Code": 21401,
      "Type": "Detention Center",
      "Agency_Nam": "Anne Arundel County Detention Center",
      "County": "Anne Arundel"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-76.530041483218611, 38.988903980495373]
    }
  }]
};
body,
html {
  height: 100%;
  width: 100%;
}
#header {
  text-align: center;
}
#map {
  height: 85%;
  width: 80%;
  margin: 0 auto;
  border: 1px solid black;
  box-shadow: 2px 2px 1px 2px gray;
}
* {
  margin: 0;
}
html,
body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -90px;
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer,
.page-wrap:after {
  /* .push must be the same height as footer */
  height: 90px;
}
.site-footer {
  background: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
<div style="height:100%; width: 100%">
  <h1 id="header">Maryland Prisoner Map</h1>

  <p></p>
  <div id="map"></div>
</div>
<footer class="site-footer">Thank you for checking out my website!</footer>

Upvotes: 1

Related Questions