google maps - Plotting POINTS using GeoJSON -
i trying plot points on map using geojson. read documention states:
you can load , display geojson file calling loadgeojson() method of data object
(https://developers.google.com/maps/documentation/javascript/datalayer )
however, sample code on same page shows:
map.data.loadgeojson( ...)
so use code example, ie: .loadgeojson() instead of .loadgeojson() ...
i have geojson data file 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 loads above file, "url_to_geojson_file" url data shown above (verified cutting , pasting url browser; file exists , downloadable).
try { map.data.loadgeojson( "url_to_geojson_file" ); } catch( ex ) { alert("error loading geojson:" + ex.tostring()); }
nothing shows on map although map renders. no errors caught try/catch block. set center point same coordinates in geojson file. tried using .setstyle() various options no effect.
does have working example displays 1 or more points geojson data file?
i have found examples of polygons , lines have not come across simple example demonstrates use of points.
surfing web found example adapted needs. hope 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 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 icons var iconbase = '/static/images/icons/'; //load json show places map.data.loadgeojson('http://localhost/geo.json'); } google.maps.event.adddomlistener(window, 'load', initialize); </script> </body> </html>
put json below in http://localhost/geo.json file 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 tallest building in world dominates lincoln's skyline.", "icon": "/static/images/icons/map-marker-do.png" } } ] }
Comments
Post a Comment