google-maps google-maps-api-3 geojson points

Plotting POINTS using GeoJSON

I am trying to plot points on a map using GeoJSON. I read the documention which states:

You can load and display a GeoJSON file by calling the loadGeoJSON() method of the data object

(https://developers.google.com/maps/documentation/javascript/datalayer )

However, the sample code on the same page shows:

map.data.loadGeoJson( ...)

So I use the code example, ie: .loadGeoJson() instead of .loadGeoJSON() ...

I have a GeoJson data file that I validated using www.geojsonlint.com, ie:

{
"type": "FeatureCollection",
"features": [
    {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [
                -80.87088507656375,
                35.21515162500578
            ]
        },
        "properties": {
            "name": "ABBOTT NEIGHBORHOOD PARK",
            "address": "1300  SPRUCE ST"
        }
    }
]
}

The code block that loads the above file, where "url_to_geojson_file" is the URL to the data shown above (verified by cutting and pasting the URL into a browser; so the file exists and is downloadable).

   try {
       map.data.loadGeoJson( "url_to_geojson_file" );
   }
   catch( ex ) {
       alert("Error loading GeoJson:" + ex.toString());
   }

Nothing shows up on the map although the map renders. No errors are caught by the try/catch block. I even set the center point to the same coordinates as in the GeoJson file. I also tried using .SetStyle() with various options with no effect.

Does anyone have a working example that displays one or more points from a GeoJson data file?

I have found examples of polygons and lines but I have not come across a simple example that demonstrates the use of points.

Solution

Surfing the web I found an example that I adapted to your needs. I hope you will be useful.

<!DOCTYPE html>
<html>
  <head>
    <title>Simple json test</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
   <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

  </head>
  <body>
    <div id="map-canvas"></div>
  <script>
  var map;
  function initialize() {

    //Initialise the map
    var myLatLng = new google.maps.LatLng(53.231472,-0.539783);
    map = new google.maps.Map(document.getElementById('map-canvas'), {
      zoom: 13,
      center: myLatLng,
      scrollwheel: false,
      panControl: false,
      zoomControl: false,
      scaleControl: true,
      disableDefaultUI: true
    });

    //Initialise base folder for icons
    var iconBase = '/static/images/icons/';

    //Load the JSON to show places
    map.data.loadGeoJson('http://localhost/geo.json');

  }

  google.maps.event.addDomListener(window, 'load', initialize);
  </script>
  </body>
</html>

Put the json below in your http://localhost/geo.json file for your local test

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "icon": "/static/images/icons/map-marker-do.png",
        "coordinates": [
          -0.53743,
          53.23437
        ]
      },
      "properties": {
        "name": "Cathedral",
        "description": "One of European's finest Gothic buildings, once the tallest building in the world that dominates Lincoln's skyline.",
        "icon": "/static/images/icons/map-marker-do.png"
      }
    }
  ]
}