{"id":3791,"date":"2013-11-21T21:00:34","date_gmt":"2013-11-21T12:00:34","guid":{"rendered":"https:\/\/y2tech.net\/blog\/?p=3791"},"modified":"2013-11-26T21:23:54","modified_gmt":"2013-11-26T12:23:54","slug":"overlay-gsimap-tiles-on-google-maps","status":"publish","type":"post","link":"https:\/\/y2tech.net\/blog\/computer\/webmap\/overlay-gsimap-tiles-on-google-maps-3791\/","title":{"rendered":"\u5730\u7406\u9662\u5730\u56f3\u30bf\u30a4\u30eb\u3092Google Maps\u306b\u91cd\u306d\u5408\u308f\u305b\u308b"},"content":{"rendered":"<h3>\u5730\u7406\u9662\u5730\u56f3\u30bf\u30a4\u30eb\u3092Google Maps\u3068\u91cd\u306d\u5408\u308f\u305b\u3066\u307f\u308b<\/h3>\r\n<br>\r\n<div style=\"width: 680px; margin: 0 auto; text-align: center;\">\r\n\r\n<iframe src=\"https:\/\/y2tech.net\/CJMapTest\/GSIMapByGoogleAPI.html\" width=660 height=500  border=0 ><\/iframe>\r\n<span>\u53f3\u4e0a\u306e&#8221;Overlay&#8221;\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3053\u3068\u3067 \u5730\u7406\u9662\u5730\u56f3\uff08Std2013\uff09\u306e\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u8868\u793a\u3092\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u3067\u304d\u308b<\/span>\r\n<\/div>\r\n<br>\r\n<span>\u3000\u3010\u3053\u306e\u5730\u56f3\u306e\u4e00\u90e8\u306e\u30c7\u30fc\u30bf\u306f\u300e\u5730\u7406\u9662\u5730\u56f3\u300f\u3092\u5229\u7528\u3057\u3066\u3044\u307e\u3059\uff0e\uff08\u30ed\u30b4\u30de\u30fc\u30af\u304c\u53e4\u3044\u96fb\u5b50\u56fd\u571f\u7248\u306a\u306e\u306f\u3054\u5bb9\u8d66\u4e0b\u3055\u3044\uff09\u3011<\/span>\r\n<span><\/span>\r\n<hr \/>\r\n<br>\r\n<p>\u3053\u306e10\u670830\u65e5\u306b\u56fd\u571f\u5730\u7406\u9662\u306e\u96fb\u5b50\u56fd\u571fWEB\u30de\u30c3\u30d7\u30b7\u30b9\u30c6\u30e0\u304c\u30ea\u30cb\u30e5\u30fc\u30a2\u30eb\u3055\u308c\u3001\u65b0\u3057\u304f\u300e\u5730\u7406\u9662\u5730\u56f3\u300f\u3068\u3057\u3066\u30e6\u30fc\u30b6\u306b\u63d0\u4f9b\u3055\u308c\u308b\u3088\u3046\u306b\u306a\u3063\u305f\uff0e\u307e\u3060\u5730\u56f3\u30c7\u30fc\u30bf\u306e\u6574\u5099\u304c\u5b8c\u4e86\u3057\u3066\u3044\u306a\u3044\u3088\u3046\u306a\u306e\u3067\u73fe\u6bb5\u968e\u3067\u306f\u6771\u65e5\u672c\uff08\u95a2\u6771\u30fb\u6771\u5317\uff09\u3057\u304b\u65b0\u3057\u3044\u5730\u56f3\u304c\u4f9b\u7d66\u3055\u308c\u3066\u3044\u306a\u3044\u304c\u3001\u4eca\u5e74\u5ea6\u672b(2015\u5e743\u6708)\u307e\u3067\u306b\u306f\u5168\u9762\u7684\u306b\u65b0\u3057\u3044\u5730\u56f3\u306b\u5207\u308a\u66ff\u308f\u308b\u7b48\u3060\uff0e<\/p>\r\n<br>\r\n<p>\u5730\u56f3\u30bf\u30a4\u30eb\u306eURL\u30b9\u30ad\u30fc\u30e0\u3082\u56fd\u571f\u5730\u7406\u9662\u72ec\u81ea\u306e\u8907\u96d1\u306a\u3082\u306e\u304b\u3089\u3001\u4e16\u9593\u4e00\u822c\u3067\u5e83\u304f\u4f7f\u308f\u308c\u3066\u3044\u308bXYZ\u30b9\u30ad\u30fc\u30e0\u306b\u5909\u66f4\u3055\u308c\u6c4e\u7528\u6027\u304c\u5897\u3057\u305f\u3060\u3051\u3067\u306f\u306a\u304f\u3001\u5229\u7528\u898f\u7d04\u3082\u6539\u6b63\u3055\u308c\u4e00\u822c\u30e6\u30fc\u30b6\u304c\u5229\u7528\u3057\u6613\u304f\u306a\u3063\u305f\u306e\u306f\u5927\u6b53\u8fce\u306a\u306e\u3060\u304c\u3001\u65b0\u3057\u3044\u5730\u56f3\u306e\u30bf\u30a4\u30eb\u306e\u4e00\u90e8\u306e\u4ed5\u69d8\u304c\u5909\u66f4\u3055\u308c\u3066\u3057\u307e\u3063\u305f\u305f\u3081\u3001\u3061\u3087\u3063\u3068\u56f0\u3063\u305f\u554f\u984c\u3082\u8d77\u304d\u3066\u3044\u308b\uff0e<\/p>\r\n<br>\r\n<p>\u56f0\u3063\u305f\u554f\u984c\u3068\u3044\u3046\u306e\u306f\u3001\u65b0\u3057\u304f\u4f5c\u6210\u3055\u308c\u305f\u6a19\u6e96\u5730\u56f3(2013\u5e74\u7248\uff09\u306e\u30ba\u30fc\u30e0\u30ec\u30d9\u30eb15,16,17\u306e\u30bf\u30a4\u30eb\u753b\u50cf\u306e\u80cc\u666f\u306e\u900f\u904e\u8a2d\u5b9a\u304c\u900f\u904e\u306b\u8a2d\u5b9a\u3055\u308c\u3066\u3057\u307e\u3063\u3066\u3044\u308b\u305f\u3081\u3001\u4e00\u90e8\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u30bd\u30d5\u30c8\u30a6\u30a7\u30a2\u3067\u306f\u80cc\u666f\u304c\u305d\u306e\u307e\u307e\u900f\u3051\u3066\u898b\u3048\u3066\u3057\u307e\u3046\u305f\u3081\u3001\u30ba\u30fc\u30e0\u30ec\u30d9\u30eb15,16,17\u306e\u5730\u56f3\u304c\u975e\u5e38\u306b\u898b\u96e3\u304f\u306a\u3063\u3066\u3057\u307e\u3046\uff0e\u4e00\u822c\u7684\u306aWEB\u30d6\u30e9\u30a6\u30b6\u4e0a\u3067\u5358\u7d14\u306b\u3053\u306e\u30bf\u30a4\u30eb\u753b\u50cf\u3092\u8868\u793a\u3057\u3066\u3082\u80cc\u666f\u304c\u767d\u306b\u8a2d\u5b9a\u3055\u308c\u3066\u3044\u308b\u305f\u3081\u7279\u306b\u652f\u969c\u306f\u306a\u3044\u304c\u3001\u30ec\u30a4\u30e4\u30fc\u3092\u591a\u7528\u3057\u305fWEB\u30a2\u30d7\u30ea\u3092\u4f5c\u6210\u3059\u308b\u5834\u5408\u306b\u306f\u554f\u984c\u306b\u306a\u308a\u305d\u3046\u3060\uff0e<\/p>\r\n<br>\r\n<p>\u300e<a href=\"https:\/\/y2tech.net\/trip\/2013-11-04\/how-to-show-gsij-maps-on-mytracks\/\" title=\"\u201cmyTracks\u201d\uff08Mac\u7248\uff09\u3067\u5730\u7406\u9662\u5730\u56f3\u3092\u8868\u793a\u3055\u305b\u308b\u65b9\u6cd5\" target=\"_blank\">\u201cmyTracks\u201d\uff08Mac\u7248\uff09\u3067\u5730\u7406\u9662\u5730\u56f3\u3092\u8868\u793a\u3055\u305b\u308b\u65b9\u6cd5<\/a>\u300f\u306b\u3053\u306e\u65b0\u3057\u3044\u30bf\u30a4\u30eb\u753b\u50cf\u304c\u30a2\u30d7\u30ea\u4e0a\u3067\u3069\u306e\u3088\u3046\u306b\u8868\u793a\u3055\u308c\u308b\u306e\u304b\u3092\u7d39\u4ecb\u3057\u3066\u3044\u308b\u306e\u3067\u53c2\u8003\u306b\u3057\u3066\u6b32\u3057\u3044\uff0e<\/p>\r\n<br>\r\n<p>\u56fd\u571f\u5730\u7406\u9662\u304c\u4eca\u56de\u306e\u65b0\u3057\u3044\u6a19\u6e96\u5730\u56f3\u30bf\u30a4\u30eb\u306e\u4ed5\u69d8\u3092\u6c7a\u3081\u305f\u7d4c\u7def\u306f\u4e0d\u660e\u3060\u304c\u3001\u3068\u308a\u3042\u3048\u305a\u3053\u306e\u30ba\u30fc\u30e0\u30ec\u30d9\u30eb15,16,17\u306e\u80cc\u666f\u900f\u904e\u4ed5\u69d8\u306e\u30bf\u30a4\u30eb\u3092\u4f7f\u3063\u3066\u904a\u3093\u3067\u307f\u308b\u3053\u3068\u306b\u3059\u308b\uff0e\u80cc\u666f\u304c\u900f\u904e\u306a\u30bf\u30a4\u30eb\u753b\u50cf\u3092\u30d9\u30fc\u30b9\u30ec\u30a4\u30e4\u30fc\u3068\u3057\u3066\u4f7f\u3046\u306b\u306f\u554f\u984c\u304c\u591a\u3044\u304c\u3001\u30d9\u30fc\u30b9\u30ec\u30a4\u30e4\u30fc\u306e\u5730\u56f3\u306b\u91cd\u306d\u5408\u308f\u305b\u308b\u30aa\u30fc\u30d0\u30ec\u30a4\u30ec\u30a4\u30e4\u30fc\u3068\u3057\u3066\u306f\u9006\u306b\u90fd\u5408\u304c\u826f\u3044\uff0e<\/p>\r\n<br>\r\n<p>Google Maps\u306e\u6a19\u6e96\u5730\u56f3\u306f\u8857\u4e2d\u3067\u306f\u304b\u306a\u308a\u306e\u60c5\u5831\u91cf\u3092\u6301\u3063\u3066\u3044\u308b\u304c\u3001\u5c71\u9593\u90e8\u306e\u5730\u5f62\u306a\u3069\u3092\u898b\u3088\u3046\u3068\u3059\u308b\u3068\u307e\u308b\u3067\u4f7f\u3044\u7269\u306b\u306a\u3089\u306a\u3044\uff0eGoogle Maps\u306b\u3082 &#8220;Terrain&#8221; \u3068\u3044\u3046\u7b49\u9ad8\u7dda\u304c\u8868\u793a\u3055\u308c\u308b\u5730\u5f62\u56f3\u7684\u306a\u5730\u56f3\u304c\u7528\u610f\u3055\u308c\u3066\u3044\u308b\u304c\u3001\u767b\u5c71\u306a\u3069\u306e\u7528\u9014\u3067\u306f\u6b86\u3069\u4f7f\u3044\u7269\u306b\u306a\u3089\u306a\u3044\uff0e<\/p>\r\n<br>\r\n<p>\u767b\u5c71\u7528\u306e\u5730\u56f3\u3068\u3057\u3066\u306f\u6614\u304b\u3089\u56fd\u571f\u5730\u7406\u9662\u306e1\/25000\u5730\u5f62\u56f3\u3068\u76f8\u5834\u304c\u6c7a\u307e\u3063\u3066\u3044\u308b\u306e\u3060\u304c\u3001\u3053\u306e\u5730\u56f3\u304cGoogle Maps\u3084Yahoo Map\u3001Bing Map\u306a\u3069\u306e\u4ee3\u7528\u3068\u306a\u308b\u304b\u3068\u3044\u3046\u3068\u3061\u3087\u3068\u7591\u554f\u3060\uff0e\u3044\u305a\u308c\u3082\u300e\u5e2f\u306b\u77ed\u3057\u8977\u306b\u9577\u3057\u300f\u3068\u3044\u3063\u305f\u6240\u3060\u308d\u3046\uff0e<\/p>\r\n<br>\r\n<p>\u305d\u3053\u3067\u4eca\u56de\u306f\u3001Google Maps\u3067\u306f\u8868\u793a\u3055\u308c\u306a\u3044\u5c71\u5cb3\u90e8\u306e\u7b49\u9ad8\u7dda\u60c5\u5831\u3092\u7121\u7406\u77e2\u7406Google Maps\u306e\u4e0a\u306b\u30aa\u30fc\u30d0\u30ec\u30a4\u8868\u793a\u3057\u3066\u3057\u307e\u3046\u3068\u3044\u3046\u8a66\u307f\u3060\uff0e\u3042\u307e\u308a\u5b9f\u7528\u7684\u3067\u306f\u306a\u3044\u304c\u3001Google Maps\u3084\u5730\u7406\u9662\u30de\u30c3\u30d7\u306e\u4f7f\u3044\u65b9\u306e\u7df4\u7fd2\u3068\u3057\u3066\u306f\u9762\u767d\u3044\u3060\u308d\u3046\uff0e\r\n<br>\r\n \u4eca\u56de\u306e\u5185\u5bb9\u306f\u3001\u6628\u5e74\u7d39\u4ecb\u3057\u305f\u8a18\u4e8b\u300e<a href=\"https:\/\/y2tech.net\/blog\/computer\/webmap\/show_cj4_tiles_on_google_map_system-3355\/\" title=\"Google Maps API\u3092\u7528\u3044\u3066\u96fb\u5b50\u56fd\u571fV4\u80cc\u666f\u5730\u56f3\u3092\u8868\u793a\u3059\u308b\" target=\"_blank\">Google Maps API\u3092\u7528\u3044\u3066\u96fb\u5b50\u56fd\u571fV4\u80cc\u666f\u5730\u56f3\u3092\u8868\u793a\u3059\u308b<\/a>\u300f\u306e\u713c\u304d\u76f4\u3057\u7248\u3068\u3044\u3063\u305f\u6240\u3060\u308d\u3046\u304b\uff0e\r\n<br>\r\n\r\n<br>\r\n<p>\u4eca\u56de\u306f\u5358\u306a\u308b\u713c\u304d\u76f4\u3057\u8a18\u4e8b\u306a\u306e\u3067\u3001\u6280\u8853\u7684\u306a\u8aac\u660e\u306f\u884c\u308f\u305a\u306b\u5358\u306bJavascript\u306e\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u3060\u3051\u3092\u7d39\u4ecb\u3059\u308b\uff0e\r\n<br>\r<\/p>\r\n\r\n<h4>\u4e0a\u8a18\u30b5\u30f3\u30d7\u30eb\u306eJavascript\u306e\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9<\/h4>\r\n<br>\r\n<pre><code class=\"language-Markup\">\r\n<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n\t<meta http-equiv=\"content-type\" content=\"text\/html; charset=utf-8\">\r\n\t<title>Google Maps JavaScript API V3 Example [ Show GSI Maps ]<\/title>\r\n\t<script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?sensor=false&#038;language=ja\"><\/script>\r\n\t\r\n<script>\r\n\r\n\t\/\/ GSI Map - Ortho\r\n\tfunction GSIOrthoMapType() {\r\n\r\n\t\tGSIOrthoMapType.prototype.tileSize = new google.maps.Size(256,256);\r\n\t\tGSIOrthoMapType.prototype.minZoom = 15;\r\n\t\tGSIOrthoMapType.prototype.maxZoom = 17;\r\n\t\tGSIOrthoMapType.prototype.name = 'GSI Ortho';\r\n\t\tGSIOrthoMapType.prototype.alt = 'Chirin Map Ortho';\r\n\r\n\t\tGSIOrthoMapType.prototype.getTile = function( tileXY, zoom, ownerDocument ) {\r\n\t\t\tvar tileImage = ownerDocument.createElement('img');\r\n\t\t\t\r\n\t\t\tvar url= \"http:\/\/cyberjapandata.gsi.go.jp\/xyz\/ort\/\" \r\n\t\t\t\t\t\t+ zoom.toString() + \"\/\" + tileXY.x.toString() + \"\/\" \r\n\t\t\t\t\t\t+ tileXY.y.toString() + \".jpg\";\r\n\r\n\t\t\ttileImage.src = url;\r\n\t\t\ttileImage.style.width  = this.tileSize.width  + 'px';\r\n\t\t\ttileImage.style.height = this.tileSize.height + 'px';\r\n\r\n\t\t\treturn tileImage;\r\n\t\t};\r\n\t}\r\n\r\n\t\/\/ Chiriin Map Standard 2012\r\n\tfunction GSIOldStdMapType() {\r\n\r\n\t\tGSIOldStdMapType.prototype.tileSize = new google.maps.Size(256,256);\r\n\t\tGSIOldStdMapType.prototype.minZoom = 15;\r\n\t\tGSIOldStdMapType.prototype.maxZoom = 17;\r\n\t\tGSIOldStdMapType.prototype.name = 'GSI Standard 2012';\r\n\t\tGSIOldStdMapType.prototype.alt = 'Chiriin Standard 2012';\r\n\r\n\t\tGSIOldStdMapType.prototype.getTile = function( tileXY, zoom, ownerDocument ) {\r\n\t\t\tvar tileImage = ownerDocument.createElement('img');\r\n\r\n\t\t\tvar url= \"http:\/\/cyberjapandata.gsi.go.jp\/xyz\/std2012\/\" \r\n\t\t\t\t\t\t+ zoom.toString() + \"\/\" + tileXY.x.toString() + \"\/\" \r\n\t\t\t\t\t\t+ tileXY.y.toString() + \".png\";\r\n\r\n\t\t\ttileImage.src = url;\r\n\t\t\ttileImage.style.width  = this.tileSize.width  + 'px';\r\n\t\t\ttileImage.style.height = this.tileSize.height + 'px';\r\n\t\t\t\r\n\t\t\treturn tileImage;\r\n\t\t};\r\n\t}\r\n\r\n\t\/\/ Chiriin Map Standard 2013 (Overlay)\r\n\tfunction GSIStd2013OverlayedMapType() {\r\n\r\n\t\tGSIStd2013OverlayedMapType.prototype.tileSize = new google.maps.Size(256,256);\r\n\t\tGSIStd2013OverlayedMapType.prototype.minZoom = 15;\r\n\t\tGSIStd2013OverlayedMapType.prototype.maxZoom = 17;\r\n\t\tGSIStd2013OverlayedMapType.prototype.name = 'GSI Std 2013 (Overlay)';\r\n\t\tGSIStd2013OverlayedMapType.prototype.alt = 'Chiriin Map Standard 2013 (Overlay)';\r\n\r\n\t\tGSIStd2013OverlayedMapType.prototype.getTile = function( tileXY, zoom, ownerDocument ) {\r\n\t\t\tvar tileImage = ownerDocument.createElement('img');\r\n\r\n\t\t\tvar url= \"http:\/\/cyberjapandata.gsi.go.jp\/xyz\/std\/\" \r\n\t\t\t\t\t\t+ zoom.toString() + \"\/\" + tileXY.x.toString() + \"\/\" \r\n\t\t\t\t\t\t+ tileXY.y.toString() + \".png\";\r\n\r\n\t\t\ttileImage.src = url;\r\n\t\t\ttileImage.style.width  = this.tileSize.width  + 'px';\r\n\t\t\ttileImage.style.height = this.tileSize.height + 'px';\r\n\t\t\t\r\n\t\t\ttileImage.style.opacity = 0.4; \/\/ <=== Set Opacity\r\n\r\n\t\t\treturn tileImage;\r\n\t\t};\r\n\t}\r\n\r\n\/\/==============================================================================================================\r\n\r\n\tvar GSIOrthoMap   = new GSIOrthoMapType();\r\n\tvar GSIOldStdMap  = new GSIOldStdMapType();\r\n\tvar GSIStd2013Overlay = new GSIStd2013OverlayedMapType();\r\n\r\n\tvar DenshiKokudoLOGO = null;\r\n\t\r\n\tvar gMap;\r\n\r\n\tvar zoomLevel = 16;\r\n\tvar mapCenter = new google.maps.LatLng( 35.541896, 139.250157 );\r\n\r\n\tvar gOverlayControlDiv = document.createElement( 'div' );\r\n\tvar gOverlayControl = new OverlayControl( gOverlayControlDiv, gMap );\r\n\tvar gLastIndex = 0;\r\n\r\n\tfunction OverlayControl( controlDiv, map ) {\r\n\r\n\t\tcontrolDiv.style.padding = '5px';\r\n\r\n\t\t\/\/ Set CSS for the control border\r\n\t\tvar controlUI = document.createElement('div');\r\n\t\tcontrolUI.style.backgroundColor = 'white';\r\n\t\tcontrolUI.style.borderStyle = 'solid';\r\n\t\tcontrolUI.style.borderWidth = '2px';\r\n\t\tcontrolUI.style.cursor = 'pointer';\r\n\t\tcontrolUI.style.textAlign = 'center';\r\n\t\tcontrolUI.title = 'Click to overlay contours';\r\n\t\tcontrolDiv.appendChild( controlUI );\r\n\r\n\t\t\/\/ Set CSS for the control interior\r\n\t\tvar controlText = document.createElement('div');\r\n\t\tcontrolText.style.fontFamily = 'Arial,sans-serif';\r\n\t\tcontrolText.style.fontSize = '12px';\r\n\t\tcontrolText.style.paddingLeft = '4px';\r\n\t\tcontrolText.style.paddingRight = '4px';\r\n\t\tcontrolText.innerHTML = '<b>Overlay<\/b>';\r\n\t\tcontrolUI.appendChild(controlText);\r\n\r\n\t\t\/\/ Setup \"Overlay\" control's click event listener\r\n\t\tgoogle.maps.event.addDomListener( controlUI, 'click', function() {\r\n\r\n\t\t\tvar currentMapTypeID = gMap.getMapTypeId();\r\n\t\t\tvar overlayIndex = gMap.overlayMapTypes.getLength();\r\n\r\n\t\t\tif ( overlayIndex == gLastIndex ) {\r\n\t\t\t\t\/\/gMap.overlayMapTypes.insertAt( overlayIndex, GSIStd2013Overlay );  \/\/ insert overlay\r\n\t\t\t\tgMap.overlayMapTypes.push( GSIStd2013Overlay );\r\n\t\t\t\tif ( currentMapTypeID == google.maps.MapTypeId.ROADMAP ) {\r\n\t\t\t\t\tDenshiKokudoLOGO.style.display = \"inline\";\r\n\t\t\t\t}\r\n\t\t\t} else {\r\n\t\t\t\t\/\/gMap.overlayMapTypes.removeAt( overlayIndex - 1 );  \/\/ remove overlay \r\n\t\t\t\tgMap.overlayMapTypes.pop();\r\n\t\t\t\tif ( currentMapTypeID == google.maps.MapTypeId.ROADMAP ) {\r\n\t\t\t\t\tDenshiKokudoLOGO.style.display = \"none\";\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\t\r\n\t\t\t\r\n\t\t});\r\n\r\n\t}\r\n\r\n\tfunction init_google_map() {\r\n\r\n\t\tvar mapOptions = {\r\n\t\t\tzoom: zoomLevel,\r\n\t\t\tcenter: mapCenter,\r\n\t\t\tstreetViewControl: true,\r\n\t\t\tmapTypeId: google.maps.MapTypeId.ROADMAP,\r\n\t\t\tmapTypeControlOptions: {\r\n\t\t\t\tmapTypeIds: [ google.maps.MapTypeId.ROADMAP, 'GSI OldStd', 'GSI Ortho' ],\r\n\t\t\t\tstyle: google.maps.MapTypeControlStyle.DROPDOWN_MENU\r\n\t\t\t}\r\n\t\t};\r\n\t\t\r\n\t\tvar mapDiv = document.getElementById('map_canvas');\r\n\t\t\r\n\t\tgMap = new google.maps.Map( mapDiv, mapOptions );\r\n\r\n\t\t\/\/ Denshi Kokudo LOGO \r\n\t\tDenshiKokudoLOGO = document.createElement('div');\r\n\t\tDenshiKokudoLOGO.innerHTML = \"<a href='http:\/\/portal.cyberjapan.jp\/' target='_blank'>\" \r\n\t\t\t+ \"<img src='http:\/\/cyberjapan.jp\/images\/icon01.gif' width='32' height='32' alt='Denshi Kokudo'><\/a>\";\r\n\t\tDenshiKokudoLOGO.style.display = \"none\";\r\n\t\tgMap.controls[ google.maps.ControlPosition.BOTTOM_LEFT ].push( DenshiKokudoLOGO );\r\n\r\n\t\t\/\/ register our custom 'maptypeid_changed' event listener\r\n\t\tgoogle.maps.event.addListener( gMap, 'maptypeid_changed', function() {\r\n\r\n\t\t\tvar currentMapTypeID = gMap.getMapTypeId();\r\n\r\n\t\t\t\/\/ hide \"streetViewControl\"\r\n\t\t\tif ( currentMapTypeID == google.maps.MapTypeId.ROADMAP ) {\r\n\t\t\t\tgMap.setOptions( {'streetViewControl': false} );\r\n\t\t\t\tDenshiKokudoLOGO.style.display = \"none\";\r\n\t\t\t} else {\r\n\t\t\t\tDenshiKokudoLOGO.style.display = \"inline\";\r\n\t\t\t}\r\n\r\n\t\t});\r\n\r\n\t\t\/\/ register our custom overlay control\r\n\t\tgOverlayControl.index = 1;\r\n\t\tgMap.controls[google.maps.ControlPosition.TOP_RIGHT].push( gOverlayControlDiv );\r\n\r\n\t\t\/\/ Now attach the GSI Maps to the gMap's registry\r\n\t\tgMap.mapTypes.set( 'GSI OldStd', GSIOldStdMap );\r\n\t\tgMap.mapTypes.set( 'GSI Ortho', GSIOrthoMap );\r\n\r\n\t\tgLastIndex = gMap.overlayMapTypes.getLength();\r\n\t}\r\n<\/script>\r\n\r\n<\/head>\r\n<body onload=\"init_google_map()\">\r\n\t<div id=\"map_canvas\" style=\"width: 640px; height: 480px;\">Map div<\/div>\r\n<\/body>\r\n<\/html>\r\n<\/code><\/pre>\r\n<br>\r\n\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u7f6e\u304d\u5834 : <a href=\"https:\/\/y2tech.net\/CJMapTest\/GSIMapByGoogleAPI.html\" title=\"\u30b5\u30f3\u30d7\u30ebJavascript \u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\" target=\"_blank\">https:\/\/y2tech.net\/CJMapTest\/GSIMapByGoogleAPI.html<\/a>\u3000\r\n \r\n<hr \/>\r\n<h3>\u4f59\u8ac7\uff08\u3067\u3082\u3068\u3066\u3082\u5927\u4e8b\uff09<\/h3>\r\n<br>\r\n<p> \u3000\u6700\u8fd1\u3001\u653f\u5e9c\u7cfb\u306e\u6a5f\u95a2\u306b\u5bfe\u3057\u3066\u4e00\u90e8\u306eWEB\u30de\u30c3\u30d7\u30b5\u30fc\u30d3\u30b9\uff08\u52ff\u8ad6Google Maps\u306e\u4e8b\u3067\u3059\u304c\uff09\u306e\u5730\u56f3\u8868\u8a18\u304c\u653f\u5e9c\uff08\u73fe\u653f\u6a29\u304b\u306a\uff09\u306e\u6c17\u306b\u969c\u3063\u305f\u3088\u3046\u3067\u3001\u4e00\u90e8\u306eWEB\u30de\u30c3\u30d7\u30b5\u30fc\u30d3\u30b9\u3092\u4f7f\u308f\u306a\u3044\u3088\u3046\u306b\u3068\u306e\u304a\u9054\u3057\u304c\u3042\u3063\u305f\u305d\u3046\u306a\uff0e\uff0e\uff0e<\/p>\r\n<br>\r\n<p>\u65e2\u306b\u5e83\u304f\u4e00\u822c\u306b\u666e\u53ca\u3057\u3066\u3044\u308bWEB\u30b5\u30fc\u30d3\u30b9\u306a\u3060\u3051\u306b\u6025\u306b\u5225\u306aWEB\u30de\u30c3\u30d7\u30b7\u30b9\u30c6\u30e0\u306b\u5207\u308a\u66ff\u3048\u308d\u3068\u8a00\u308f\u308c\u3066\u56f0\u60d1\u3057\u3066\u3044\u308b\u95a2\u4fc2\u8005\u3082\u591a\u3044\u4e8b\u3067\u3057\u3087\u3046\uff0e\u5358\u7d14\u306a\u30de\u30fc\u30ab\u30fc\u3092\u8868\u793a\u3059\u308b\u7a0b\u5ea6\u306e\u7c21\u5358\u306a\u7269\u306a\u3089\u76f4\u3050\u306b\u3067\u3082\u5225\u306aWEB\u30de\u30c3\u30d7\u306b\u79fb\u884c\u3067\u304d\u308b\u3060\u308d\u3046\u304c\u3001Google Maps API\u3092\u99c6\u4f7f\u3057\u305f\u3067\u8907\u96d1\u306a\u30b5\u30fc\u30d3\u30b9\u3092\u7d44\u307f\u8fbc\u3093\u3067\u3044\u305f\u3089\u3001\u304a\u3044\u305d\u308c\u3068\u306f\u5225\u306aWEB\u30de\u30c3\u30d7\u30b7\u30b9\u30c6\u30e0\u306b\u79fb\u884c\u3059\u308b\u8a33\u306b\u306f\u884c\u304b\u306a\u3044\u3060\u308d\u3046\uff0e\u5b98\u516c\u5e81\u3084\u5730\u65b9\u81ea\u6cbb\u4f53\u3001\u56fd\u306e\u7a0e\u91d1\u304c\u6295\u5165\u3055\u308c\u3066\u3044\u308b\u56fd\u306e\u606f\u306e\u639b\u304b\u3063\u305f\u69d8\u3005\u306a\u672b\u68a2\u6a5f\u95a2\u306e\u95a2\u4fc2\u8005\u306b\u3068\u3063\u3066\u306f\u3068\u3093\u3060\u707d\u96e3\u3060\u308d\u3046\uff0e<\/p>\r\n<br>\r\n<p>\u3053\u306e\u56fd\u306e\u5730\u56f3\u3092\u53d6\u308a\u4ed5\u5207\u308b\u7dcf\u672c\u5c71\u7684\u7acb\u5834\u306e\u56fd\u571f\u5730\u7406\u9662\u306f\u3001\u6628\u5e74\u304b\u3089Google Maps\u306a\u3069\u306e\u6a19\u6e96\u7684\u306aWEB\u30de\u30c3\u30d7\u30b7\u30b9\u30c6\u30e0\u3067\u4f7f\u7528\u53ef\u80fd\u306a\u30bf\u30a4\u30eb\u753b\u50cf\u65b9\u5f0f\u306eWEB\u30de\u30c3\u30d7\u3092\u7121\u6599\u3067\u63d0\u4f9b\u3057\u3066\u304f\u308c\u3066\u3044\u308b\u306e\u3067\u3001\u305d\u308c\u306b\u5207\u308a\u66ff\u3048\u308c\u3070\u826f\u3044\u3067\u306f\u306a\u3044\u304b\u3068\u3044\u3046\u610f\u898b\u304c\u3042\u308b\u3088\u3046\u3060\u304c\u3001\u305d\u306e\u80cc\u5f8c\u306b\u6f5c\u3080\u672c\u8cea\u7684\u306a\u554f\u984c\u3092\u8003\u3048\u308c\u3070\u305d\u3046\u7c21\u5358\u306b\u53d7\u3051\u5165\u308c\u308b\u8a33\u306b\u306f\u884c\u304b\u306a\u3044\uff0e<\/p>\r\n<br>\r\n<p>\u52ff\u8ad6\u3001\u3053\u308c\u307e\u3067\u56fd\u571f\u5730\u7406\u9662\u306e\u5730\u56f3\u3092\u611b\u7528\u3057\u5fdc\u63f4\u3057\u3066\u304d\u305f\u79c1\u306b\u3068\u3063\u3066\u3001\u56fd\u571f\u5730\u7406\u9662\u306e\u5730\u56f3\u304c\u5e83\u304f\u4e16\u9593\u306b\u5e83\u307e\u308b\u306e\u306f\u5927\u5909\u559c\u3070\u3057\u3044\u4e8b\u306a\u306e\u3060\u304c\u3001\u3068\u3066\u3082\u624b\u653e\u3057\u3067\u559c\u3076\u6c17\u306b\u306f\u306a\u308c\u306a\u3044\uff0e\u56fd\u571f\u5730\u7406\u9662\u306f\u56fd\u306e\u6a5f\u95a2\u3067\u3042\u308a\u3001\u6642\u306e\u653f\u6a29\u306e\u610f\u5411\u3067\u5730\u56f3\u30c7\u30fc\u30bf\u305d\u306e\u3082\u306e\u306b\u5bfe\u3057\u3066\u4f8b\u306e\u300e\u7279\u5b9a\u79d8\u5bc6\u4fdd\u8b77\u6cd5\u6848\u300f\u306e\u6a5f\u5bc6\u5bfe\u8c61\u306b\u3055\u308c\u304b\u306d\u306a\u3044\uff0e\u6c5f\u6238\u6642\u4ee3\u306e\u6614\u304b\u3089\u5730\u56f3\u306f\u56fd\u306e\u6700\u91cd\u8981\u8ecd\u4e8b\u6a5f\u5bc6\u4e8b\u9805\u3067\u5728\u3063\u305f\u3053\u3068\u306f\u78ba\u304b\u3067\u3001\u6c5f\u6238\u6642\u4ee3\u306b\u30b7\u30fc\u30dc\u30eb\u30c8\u304c\u65e5\u672c\u5730\u56f3\u3092\u9577\u5d0e\u306b\u6301\u3061\u51fa\u3057\u3066\u5927\u5909\u306a\u9a12\u52d5\u3068\u306a\u3063\u305f\u4e8b\u304b\u3089\u3082\u660e\u3089\u304b\u3060\uff0e<\/p>\r\n<br>\r\n<p>\u5148\u65e5\u3082\u56fd\u571f\u5730\u7406\u9662\u306e\u5730\u5f62\u56f3\u304b\u3089\u9001\u96fb\u7dda\u3084\u5909\u96fb\u6240\u304c\u6d88\u3055\u308c\u3066\u5927\u554f\u984c\u306b\u306a\u3063\u305f\uff08\u65b0\u3057\u3044\u5730\u56f3\u306b\u95a2\u3057\u3066\u306f\u9001\u96fb\u7dda\u306f\u5fa9\u6d3b\u3057\u3066\u3044\u308b\uff09\u304c\u3001\u518d\u3073\u9001\u96fb\u7dda\u3084\u5909\u96fb\u6240\u3001\u767a\u96fb\u6240\u306e\u985e\u3001\u30c0\u30e0\u3084\u6c34\u9053\u65bd\u8a2d\u3001\u98db\u884c\u5834\u3084\u305d\u306e\u4ed6\u591a\u304f\u306e\u91cd\u8981\u65bd\u8a2d\u304c\u5730\u56f3\u304b\u3089\u6d88\u3048\u3066\u884c\u304f\u3053\u3068\u3060\u308d\u3046\uff0e<\/p>\r\n<br>\r\n<p>\u81ea\u5206\u306f\u516c\u52d9\u54e1\u3067\u306f\u306a\u3044\u304b\u3089\u95a2\u4fc2\u306a\u3044\u3060\u308d\u3046\u306a\u3069\u3068\u601d\u3063\u3066\u3044\u305f\u3089\u5927\u9593\u9055\u3044\uff0e\u6700\u521d\u306f\u624b\u306e\u4ed8\u3051\u3084\u3059\u3044\u516c\u52d9\u54e1\u304b\u3089\u3001\u305d\u3057\u3066\u6b21\u306f\u4e00\u822c\u306e\u5e02\u6c11\u306b\u3082\u53ca\u3076\u4e8b\u306f\u8ab0\u306e\u76ee\u306b\u3082\u660e\u3089\u304b\u3067\u3057\u3087\u3046\uff0e<\/p>\r\n<br>\r\n<p>\u3061\u3063\u307d\u3051\u306a\u7d4c\u6e08\u653f\u7b56\u306e\u304a\u3053\u307c\u308c\u306b\u6388\u304b\u3063\u3066\u6cb9\u65ad\u3057\u304d\u3063\u3066\u3001\u6642\u306e\u653f\u6a29\u306e\u6063\u610f\u7684\u306a\u89e3\u91c8\u3067\u4f55\u3068\u3067\u3082\u306a\u308b\u3053\u306e\u3088\u3046\u306a\u3068\u3093\u3067\u3082\u306a\u3044\u6cd5\u6848\u306e\u5371\u967a\u6027\u306b\u3082\u6c17\u4ed8\u304b\u305a\u306b\u898b\u904e\u3054\u3057\u3066\u3057\u307e\u3063\u3066\u306f\u3044\u3051\u306a\u3044\uff0e<\/p>\r\n<br>\r\n<p>\u653f\u5e9c\u304c\u79d8\u5bc6\u306b\u3057\u305f\u304c\u3063\u3066\u3044\u308b\u60c5\u5831\u304c\u8f09\u3063\u305f\u5730\u56f3\u3092\u3046\u3063\u304b\u308a\u81ea\u5206\u306e\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u306b\u8f09\u305b\u305f\u3089\u6a5f\u5bc6\u6f0f\u6d29\u3067\u902e\u6355\u3068\u3044\u3046\u3088\u3046\u306a\u4e8b\u3082\u7d75\u7a7a\u4e8b\u3068\u306f\u8a00\u3048\u306a\u304f\u306a\u308b\u6642\u4ee3\u304c\u3082\u3046\u3059\u3050\u305d\u3053\u306b\uff0e\uff0e\uff0e\u306a\u3093\u3066\u4e8b\u306b\u306a\u3089\u306a\u3044\u3088\u3046\u306b\u6c17\u3092\u3064\u3051\u306a\u3051\u308c\u3070\uff0e\r\n\r\n<br>\r\n<p>\u3053\u306e\u56fd\u306e\u56fd\u6c11\u306b\u9650\u3089\u305a\u3001\u4eba\u985e\u306e\u6b74\u53f2\u3092\u898b\u308c\u3070\u4eba\u9593\u306f\u904e\u53bb\u306e\u6b74\u53f2\u304b\u3089\u4f55\u3082\u5b66\u3093\u3067\u6765\u306a\u304b\u3063\u305f\u4e8b\u306f\u706b\u3092\u898b\u308b\u3088\u308a\u3082\u660e\u3089\u304b\u3067\u3001\u4eca\u5f8c\u3082\u5909\u308f\u308a\u306f\u3057\u306a\u3044\u3060\u308d\u3046\uff0e<\/p>\r\n<br>\r\n<p>\u3053\u3093\u306a\u767a\u8a00\u3092\u3053\u306e\u30d6\u30ed\u30b0\u3067\u63a1\u308a\u4e0a\u3052\u308b\u3053\u3068\u81ea\u4f53\u7570\u5e38\u306a\u4e8b\u3060\u3068\u306f\u601d\u3046\u304c\u3001\u3069\u3046\u3057\u3066\u3082\u4e00\u8a00\u8a00\u308f\u3056\u308b\u8ca0\u3048\u306a\u3044\u3088\u3046\u306a\u72b6\u6cc1\u306b\u306a\u308a\u3064\u3064\u3042\u308b\u3088\u3046\u3060\uff0e\r\n<br>\r\n","protected":false},"excerpt":{"rendered":"\u4eca\u56de\u306f\u3001Google Maps\u3067\u306f\u8868\u793a\u3055\u308c\u306a\u3044\u5c71\u5cb3\u90e8\u306e\u7b49\u9ad8\u7dda\u60c5\u5831\u3092\u7121\u7406\u77e2\u7406Google Maps\u306e\u4e0a\u306b\u30aa\u30fc\u30d0\u30ec\u30a4\u8868\u793a\u3057\u3066\u3057\u307e\u3046\u3068\u3044\u3046\u8a66\u307f\u3060\uff0e\u3042\u307e\u308a\u5b9f\u7528\u7684\u3067\u306f\u306a\u3044\u304c\u3001Google Maps\u3084\u5730\u7406\u9662\u30de\u30c3\u30d7\u306e\u4f7f\u3044\u65b9\u306e\u7df4\u7fd2\u3068\u3057\u3066\u306f\u9762\u767d\u3044\u3060\u308d\u3046\uff0e","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[561],"tags":[318,579,624,563],"class_list":["post-3791","post","type-post","status-publish","format-standard","hentry","category-webmap","tag-google-maps","tag-579","tag-624","tag-563"],"_links":{"self":[{"href":"https:\/\/y2tech.net\/blog\/wp-json\/wp\/v2\/posts\/3791","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/y2tech.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/y2tech.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/y2tech.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/y2tech.net\/blog\/wp-json\/wp\/v2\/comments?post=3791"}],"version-history":[{"count":0,"href":"https:\/\/y2tech.net\/blog\/wp-json\/wp\/v2\/posts\/3791\/revisions"}],"wp:attachment":[{"href":"https:\/\/y2tech.net\/blog\/wp-json\/wp\/v2\/media?parent=3791"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/y2tech.net\/blog\/wp-json\/wp\/v2\/categories?post=3791"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/y2tech.net\/blog\/wp-json\/wp\/v2\/tags?post=3791"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}