建物の位置情報が大量に乗っているgeojsonファイルを用いてgoogle map上にマーカーを置きたいです。
以下のサイトと同じようにデモをしたいです。
参考サイト
APIkeyは自分のAPIkeyを入れていますが、ここでは都合上消させていただきます。
今のところ、google mapは表示されるのですがマーカーはつかず...
ご助力をお願いします
HTML
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 6<title>geojson</title> 7<style type="text/css"> 8html, body, #map-canvas { 9height: 100%; 10margin: 0px; 11padding: 0px 12} 13</style> 14<script src="https://maps.googleapis.com/maps/api/js?key=APIkey&callback=initMap"></script> 15<!-- D3.jsを読み込む --> 16<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 17 18<script> 19google.maps.event.addDomListener(window, 'load', function() { 20 21 //Google Maps初期化 22 var map = new google.maps.Map(document.getElementById('map-canvas'), { 23 center: {lat:37.953144299100003, lng: 139.14128375000001 }, 24 zoom: 12 25 }); 26 27 //GeoJSONデータ読み込み 28 d3.json('niigata.geojson', function(data) { 29 //データレイヤーに追加 30 map.data.addGeoJson(data); 31 //イベント(マーカークリック時)を設定 32 map.data.addListener('click', mouseClick); 33 }); 34 35 function mouseClick(e) { 36 //features->propertiesのaddressデータをクリック時に表示する 37 alert(e.feature.getProperty('address')); 38 } 39 40}); 41 42 43 44 </script> 45 </head> 46 <div id="map-canvas"></div> 47 </body> 48</html> 49 50
geojsonの記述はもう少し長いのですが、省略しました。
geojsonのファイル名はniigata.geojsonです。
geojson
1 2{ 3"type": "FeatureCollection", 4"name": "niigata", 5"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::4612" } }, 6"features": [ 7{ "type": "Feature", "properties": { "P20_001": "15101", "P20_002": "あかしあ公園", "P20_003": "新潟県新潟市北区松浜3丁目19番地8", "P20_004": "一時避難場所", "P20_005": 1700, "P20_006": 3401, "P20_007": 0, "P20_008": 0, "P20_009": 0, "P20_010": 0, "P20_011": 0, "P20_012": 1, "レベル": 1, "備考": null, "緯度": 37.953144299100003, "経度": 139.14128375000001, "NO": "1" }, "geometry": { "type": "Point", "coordinates": [ 139.141283750000014, 37.953144299100003 ] } }, 8{ "type": "Feature", "properties": { "P20_001": "15101", "P20_002": "おやま公園", "P20_003": "新潟県新潟市北区木崎837番地30", "P20_004": "一時避難場所", "P20_005": 2146, "P20_006": 4292, "P20_007": 0, "P20_008": 0, "P20_009": 0, "P20_010": 0, "P20_011": 0, "P20_012": 1, "レベル": 1, "備考": null, "緯度": 37.934128039100003, "経度": 139.18262866000001, "NO": "2" }, "geometry": { "type": "Point", "coordinates": [ 139.18262866, 37.934128039100003 ] } }, 9{ "type": "Feature", "properties": { "P20_001": "15101", "P20_002": "かやま保育園", "P20_003": "新潟県新潟市北区嘉山1-2-41", "P20_004": "避難所", "P20_005": 276, "P20_006": 553, "P20_007": 1, "P20_008": 0, "P20_009": 0, "P20_010": 0, "P20_011": 0, "P20_012": 0, "レベル": 1, "備考": null, "緯度": 37.912491, "経度": 139.21868, "NO": "3" }, "geometry": { "type": "Point", "coordinates": [ 139.21868, 37.912491 ] } }, 10{ "type": "Feature", "properties": { "P20_001": "15101", "P20_002": "さくら公園", "P20_003": "新潟県新潟市北区白新町4丁目54番1号", "P20_004": "一時避難場所", "P20_005": 2120, "P20_006": 4240, "P20_007": 0, "P20_008": 0, "P20_009": 0, "P20_010": 0, "P20_011": 0, "P20_012": 1, "レベル": 1, "備考": null, "緯度": 37.914792539099999, "経度": 139.21185556, "NO": "4" }, "geometry": { "type": "Point", "coordinates": [ 139.21185556, 37.914792539099999 ] } } 11] 12} 13
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/31 05:43