{"id":3496,"date":"2014-04-21T10:24:49","date_gmt":"2014-04-21T01:24:49","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=3496"},"modified":"2014-04-21T10:27:24","modified_gmt":"2014-04-21T01:27:24","slug":"post-3496","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/google-map-api\/3496","title":{"rendered":"Google Map\u4e0a\u306b\u5e73\u621026\u5e74\u9ad8\u5d0e\u5e02\u306e\u516c\u793a\u5730\u4fa1(GeoJSON\u30c7\u30fc\u30bf)\u3092\u8868\u793a\u3059\u308b"},"content":{"rendered":"<p><a href=\"http:\/\/shimz.me\/datavis\/gunma\/takasaki\/H26landprice\/\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2014\/04\/deabo000011.jpg\" alt=\"\u9ad8\u5d0e\u5e02\u3000\u5e73\u621026\u5e74\u5730\u4fa1\u516c\u793a\" width=\"509\" height=\"366\" class=\"aligncenter size-full wp-image-3497\" srcset=\"https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2014\/04\/deabo000011.jpg 509w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2014\/04\/deabo000011-209x150.jpg 209w\" sizes=\"auto, (max-width: 509px) 100vw, 509px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/shimz.me\/datavis\/gunma\/takasaki\/H26landprice\/\">example<\/a><\/p>\n<p>Google Maps API\u3067\u30b5\u30dd\u30fc\u30c8\u3055\u308c\u305fGeoJSON\u8868\u793a\u6a5f\u80fd\u3092\u4f7f\u3063\u3066\u3001\u9ad8\u5d0e\u5e02\u306e\u516c\u793a\u5730\u4fa1\u3092\u5730\u56f3\u4e0a\u306b\u30d7\u30ed\u30c3\u30c8\u3057\u3066\u307f\u307e\u3057\u305f\u3002\uff08\u4e00\u90e8\u3001D3.js\u3092\u4f7f\u7528\u3057\u3066\u3044\u307e\u3059\uff09<br \/>\n\u8d64\u3044\u30b5\u30fc\u30af\u30eb\u304c\u524d\u5e74\u5ea6\u3088\u308a\u30d7\u30e9\u30b9\u306b\u306a\u3063\u305f\u5834\u6240\u3067\u3059\u3002<br \/>\n\u300c\u9ad8\u5d0e\u30d1\u30d6\u30ea\u30c3\u30af\u30bb\u30f3\u30bf\u30fc\u300d\u4e88\u5b9a\u5730\u5468\u8fba\u306e\u5730\u4fa1\u304c\u3084\u306f\u308a\u4e0a\u304c\u3063\u3066\u3044\u308b\u3088\u3046\u3067\u3059\u3002<\/p>\n<p>\u3010\u53c2\u7167\u3011<br \/>\n<a href=\"https:\/\/gunmagisgeek.com\/blog\/google-map-api\/3445\">Google Map\u4e0a\u306bGeoJSON\u30c7\u30fc\u30bf\u3092\u8868\u793a\u3059\u308b <\/a><\/p>\n<h2>\u30b5\u30f3\u30d7\u30eb<\/h2>\n<pre class=\"lang:js decode:true \" >google.maps.event.addDomListener(window, 'load', function() {\r\n\t\/\/\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u8981\u7d20\u3092\u8ffd\u52a0\r\n\tvar tooltip = d3.select(\"body\")\r\n\t\t.append(\"div\")\r\n\t\t.attr(\"class\", \"tooltip\")\r\n\t\t.style(\"position\", \"absolute\")\r\n\t\t.style(\"z-index\", \"999999\")\r\n\t\t.style(\"visibility\", \"hidden\")\r\n\r\n\t\r\n\t\/\/Google Maps\u521d\u671f\u5316\r\n\tvar map = new google.maps.Map(document.getElementById('map-canvas'), {\r\n\t\tcenter: { lat: 36.322356, lng: 139.013057 },\r\n\t\tzoom: 13,\r\n\t\tmapTypeId: google.maps.MapTypeId.TERRAIN,\r\n\t\tdisableDefaultUI: true\r\n\t});\r\n\r\n\t\r\n\t\/\/\u30de\u30fc\u30ab\u30fc\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u6307\u5b9a\r\n\tvar styleFeature =\u3000function(max){\r\n\t\t\/\/\u6b63\u898f\u5316\u95a2\u6570\r\n\t\tvar rScale = d3.scale.sqrt().domain([0, max]).range([0, 20]);\r\n\t\treturn \tfunction(feature) {\r\n\t\t\t\r\n\t\t\tvar color = function(){\r\n\t\t\t\tif(\/\u25b3\/.test(feature.getProperty('\u5bfe\u524d\u5e74\u5909\u52d5\u7387'))){\r\n\t\t\t\t\treturn 'gray'  \/\/\u524d\u5e74\u5ea6\u3088\u308a\u4e0b\u304c\u3063\u305f\u5730\u57df\r\n\t\t\t\t}else if(feature.getProperty('\u5bfe\u524d\u5e74\u5909\u52d5\u7387') == 0){\r\n\t\t\t\t\treturn 'white' \/\/\u5909\u52d5\u306a\u3057\r\n\t\t\t\t}else{\r\n\t\t\t\t\treturn 'red' \/\/\u524d\u5e74\u5ea6\u3088\u308a\u4e0a\u304c\u3063\u305f\u5730\u57df\r\n\t\t\t\t}\r\n\t\t\t};\r\n\t\t\t\r\n\t\t\treturn {\r\n\t\t\t\ticon: {\t\/\/icon\u306e\u30b9\u30bf\u30a4\u30eb\u6307\u5b9a\r\n\t\t\t\t\tpath: google.maps.SymbolPath.CIRCLE,\r\n\t\t\t\t\tscale:  rScale(+feature.getProperty('\u4fa1\u683c')),\r\n\t\t\t\t\tfillColor: color(),\r\n\t\t\t\t\tfillOpacity: 0.9,\r\n\t\t\t\t\tstrokeColor: \"black\",\r\n\t\t\t\t\tstrokeWeight: 3\r\n\t\t\t\t}\r\n\t\t\t};\r\n\t\t};\t\t\r\n\t}\r\n\r\n\t\/\/\u30b9\u30c8\u30ea\u30fc\u30c8\u30d3\u30e5\u30fc\u521d\u671f\u5316\r\n\tvar streetViewDiv = document.getElementById(\"streetview\");\r\n\tvar stOptions = {\r\n\t\tpov: {\r\n\t\t\theading: 00,\r\n\t\t\tpitch: 0,\r\n\t\t\tzoom: 2\r\n\t\t}\r\n\t};\r\n\t\/\/\u30b9\u30c8\u30ea\u30fc\u30c8\u30d3\u30e5\u30fc\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u751f\u6210\r\n\tvar streetViewPanorama = new google.maps.StreetViewPanorama(streetViewDiv, stOptions);\r\n\tvar streetViewService = new google.maps.StreetViewService();\r\n\t\r\n\t\/\/GeoJSON\u30c7\u30fc\u30bf\u8aad\u307f\u8fbc\u307f\r\n\td3.json('landprice.geojson', function(data) {\t\t\r\n\t\t\/\/\u30c7\u30fc\u30bf\u30ec\u30a4\u30e4\u30fc\u306b\u8ffd\u52a0\r\n\t\tmap.data.addGeoJson(data);\r\n\t\t\r\n\t\t\/\/\u4fa1\u683c\u306e\u6700\u5927\u5024\u53d6\u5f97\r\n\t\tvar max = d3.max(data.features, function(d){ return +d.properties['\u4fa1\u683c'] })\r\n\r\n\t\t\/\/\u30c7\u30fc\u30bf\u30ec\u30a4\u30e4\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u6307\u5b9a\r\n\t\tmap.data.setStyle(styleFeature(max));\r\n\t\t\r\n\t\t\/\/\u30a4\u30d9\u30f3\u30c8\u8a2d\u5b9a\r\n\t\tmap.data.addListener('click', mouseClick);\r\n\t\tmap.data.addListener('mouseover', mouseOmover);\r\n\t\tmap.data.addListener('mouseout', mouseOut);\t\t\r\n\t});\r\n\t\r\n\tfunction mouseClick(e) {\r\n\t\t\/\/features-&gt;properties\u306eaddress\u30c7\u30fc\u30bf\u3092\u30af\u30ea\u30c3\u30af\u6642\u306b\u8868\u793a\u3059\u308b\r\n\t\tshowStreetView(e.feature.getGeometry().get());\r\n\t}\r\n\t\r\n\tfunction mouseOmover(e){\r\n\t\t\/\/\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u3092\u8868\u793a\r\n\t\ttooltip.style(\"visibility\", \"visible\");\r\n\t\tvar content = \"&lt;center&gt;\"+e.feature.getProperty('\u4f4f\u6240');\r\n\t\t\tcontent += \"&lt;p&gt;\u4fa1\u683c:\"+addFigure(e.feature.getProperty('\u4fa1\u683c'))+\"&lt;\/p&gt;\";\r\n\t\t\tcontent += \"&lt;p&gt;\u5bfe\u524d\u5e74\u5909\u52d5\u7387:\"+e.feature.getProperty('\u5bfe\u524d\u5e74\u5909\u52d5\u7387')+\"&lt;\/p&gt;\";\r\n\t\t\tcontent +=\"&lt;\/center&gt;\";\r\n\t\t\t\r\n\t\t\tcontent += \"&lt;ul&gt;\";\r\n\t\t\tcontent += \"&lt;li&gt;\u6a19\u6e96\u5730\u756a\u53f7:\"+e.feature.getProperty('\u6a19\u6e96\u5730\u756a\u53f7')+\"&lt;\/li&gt;\";\r\n\t\t\tcontent += \"&lt;li&gt;\u5730\u7a4d:\"+e.feature.getProperty('\u5730\u7a4d')+\"&lt;\/li&gt;\";\r\n\t\t\tcontent += \"&lt;li&gt;\u5f62\u72b6:\"+e.feature.getProperty('\u5f62\u72b6')+\"&lt;\/li&gt;\";\r\n\t\t\t\r\n\t\ttooltip\r\n\t\t .style(\"top\", (e.Va.pageY-10)+\"px\")\r\n\t\t .style(\"left\",(e.Va.pageX+10)+\"px\")\r\n\t\t .html(content);\r\n\t}\r\n\t\r\n\tfunction mouseOut(e) {\r\n\t\t\/\/\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u3092\u975e\u8868\u793a\r\n\t\ttooltip.style(\"visibility\", \"hidden\");\r\n\t}\r\n\t\r\n\r\n\t\r\n\t\/\/\u30b9\u30c8\u30ea\u30fc\u30c8\u30d3\u30e5\u30fc\u3092\u8868\u793a\r\n\tfunction showStreetView(latlng){\r\n\t\t\/\/var latlng = new google.maps.LatLng(d['\u7def\u5ea6'], d['\u7d4c\u5ea6']);\r\n\t\tstreetViewPanorama.setVisible(false);\r\n\t\tstreetViewService.getPanoramaByLocation(latlng, 50, function(status){\r\n\t\t\tif(status){\r\n\t\t\t\tstreetViewPanorama.setPosition(latlng);\r\n\t\t\t\tstreetViewPanorama.setVisible(true);\r\n\t\t\t}else{\r\n\t\t\t\talert(\"StreetView \u975e\u5bfe\u5fdc\u30a8\u30ea\u30a2\u3067\u3059\");\r\n\t\t\t};    \r\n\t\t});\r\n\t}\t\r\n \r\n\tfunction addFigure(d){\r\n\t\treturn String(d).replace( \/(d)(?=(ddd)+(?!d))\/g, '$1,' ) + \"\u5186\";\r\n\t}\r\n});<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>example Google Maps API\u3067\u30b5&hellip;<\/p>\n","protected":false},"author":1,"featured_media":3497,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[37],"tags":[],"class_list":["post-3496","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-google-map-api","has-post-thumbnail-archive"],"_links":{"self":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/3496","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/comments?post=3496"}],"version-history":[{"count":0,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/3496\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/3497"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=3496"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=3496"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=3496"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}