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

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -