{"id":2338,"date":"2015-04-24T16:32:38","date_gmt":"2015-04-24T07:32:38","guid":{"rendered":"http:\/\/taitan916.info\/blog\/?p=2338"},"modified":"2024-01-13T12:59:35","modified_gmt":"2024-01-13T03:59:35","slug":"post-2338","status":"publish","type":"post","link":"https:\/\/taitan916.info\/blog\/archives\/2338","title":{"rendered":"Google Maps API\u3067\u73fe\u5728\u5730\u53d6\u5f97\u3068\u76ee\u7684\u5730\u307e\u3067\u306e\u30eb\u30fc\u30c8\u3092\u8868\u793a\u3055\u305b\u308b\u65b9\u6cd5"},"content":{"rendered":"<p>Google Maps API\u3092\u4f7f\u3063\u3066\u73fe\u5728\u5730\u3092\u53d6\u5f97\u3057\u3064\u3064\u3001\u76ee\u7684\u5730\u307e\u3067\u306e\u30eb\u30fc\u30c8\u3092\u8868\u793a\u3055\u305b\u305f\u304b\u3063\u305f\u3002\u4ed6\u306b\u3082\u30de\u30fc\u30ab\u30fc\u3092\u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u306f\u306a\u304f\u4efb\u610f\u306e\u753b\u50cf\u30a2\u30a4\u30b3\u30f3\u3092\u4f7f\u3063\u305f\u308a\u3001\u76ee\u7684\u5730&amp;\u73fe\u5728\u5730\u4ee5\u5916\u306b\u3082\u30de\u30fc\u30ab\u30fc\u7acb\u3066\u305f\u308a\u3068\u8272\u3005\u30ab\u30b9\u30bf\u30e0\u3057\u305f\u304b\u3063\u305f\u3002\u4ee5\u4e0b\u306b\u5bfe\u5fdc\u65b9\u6cd5\u3092\u30e1\u30e2\u3002<\/p>\n<p>&nbsp;<\/p>\n<h2><strong><span style=\"font-size: 14pt;\">\u4ed5\u69d8<\/span><\/strong><\/h2>\n<ul>\n<li>\u57fa\u672c\u7684\u306b\u306f\u73fe\u5728\u5730\u3092\u53d6\u5f97\u3057\u3066\u76ee\u7684\u5730\u307e\u3067\u306e\u30eb\u30fc\u30c8\u7dda\u3092\u5f15\u3044\u305f\u30de\u30c3\u30d7<\/li>\n<li>\u76ee\u7684\u5730\u3084\u73fe\u5728\u5730\u306e\u30de\u30fc\u30ab\u30fc\u306f\u3053\u3061\u3089\u3067\u7528\u610f\u3057\u305f\u753b\u50cf\u3092\u4f7f\u3046<\/li>\n<li>\u30eb\u30fc\u30c8\u7dda\u306e\u8272\u3084\u592a\u3055\u3092\u5909\u3048\u305f\u3044<\/li>\n<li>\u76ee\u7684\u5730\u3001\u73fe\u5728\u5730\u4ee5\u5916\u306b\u3082\u30de\u30fc\u30ab\u30fc\u3092\u7acb\u3066\u308b\u5834\u5408\u3082\u3042\u308a<\/li>\n<li>\u73fe\u5728\u5730\u304c\u53d6\u5f97\u3067\u304d\u306a\u3044\u5834\u5408\u306f\u76ee\u7684\u5730\u3068\u305d\u306e\u4ed6\u30de\u30fc\u30ab\u30fc\u306e\u307f\u7acb\u3066\u308b<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-size: 14pt;\"><strong>\u30b5\u30f3\u30d7\u30eb<\/strong><\/span><\/h2>\n<p><a href=\"https:\/\/taitan916.info\/sample\/maproot\/\" target=\"_blank\" rel=\"noopener\">https:\/\/taitan916.info\/sample\/maproot\/<\/a><\/p>\n<p>\u76ee\u7684\u5730\u306f\u901a\u5929\u95a3\u3067\u98db\u884c\u6a5f\u306e\u30de\u30fc\u30ab\u30fc\u3001\u73fe\u5728\u5730\u306f\u30cf\u30fc\u30c8\u306e\u30de\u30fc\u30ab\u30fc\u3001\u305d\u306e\u4ed6\u3068\u3057\u3066\u5927\u962a\u57ce\u3092\u30de\u30b0\u30ab\u30c3\u30d7\u306e\u30de\u30fc\u30ab\u30fc\u3067\u8a2d\u7f6e\u3057\u3066\u3044\u308b\u3002<\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-size: 14pt;\"><strong>\u30bd\u30fc\u30b9<\/strong><\/span><\/h2>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;!DOCTYPE html \"-\/\/W3C\/\/DTD XHTML 1.0 Strict\/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-strict.dtd\"&gt;\r\n&lt;html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"&gt;\r\n&lt;head&gt;\r\n&lt;meta http-equiv=\"content-type\" content=\"text\/html; charset=utf-8\" \/&gt;\r\n&lt;meta id=\"viewport\" name=\"viewport\" content=\"width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;\" \/&gt;\r\n&lt;title&gt;GoogleMapAPI\u3067\u73fe\u5728\u5730\u306e\u53d6\u5f97\u3068\u76ee\u7684\u5730\u307e\u3067\u306e\u30eb\u30fc\u30c8\u8868\u793a&lt;\/title&gt;\r\n&lt;style type=\"text\/css\"&gt;\r\n#map_canvas {\r\n    height: 100%;\r\n    width: 100%;\r\n}\r\n&lt;\/style&gt;\r\n&lt;script type=\"text\/javascript\" src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.9.1\/jquery.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\" src=\"http:\/\/maps.google.com\/maps\/api\/js?sensor=true\"&gt;&lt;\/script&gt; \r\n&lt;script&gt;\r\nvar currentWindow = null;\r\ndestinationList = {    \/\/\u76ee\u7684\u5730\u306e\u914d\u5217\r\n    'title' : '\u901a\u5929\u95a3', \r\n    'lat' : '34.652499', \r\n    'long' : '135.506306'\r\n}\r\nrendererOptions = {\r\n    draggable: true,    \/\/\u30c9\u30e9\u30c3\u30b0\u64cd\u4f5c\u306e\u6709\u52b9\/\u7121\u52b9\r\n    preserveViewport: true,    \/\/\u30ba\u30fc\u30e0\u306e\u6709\u7121\r\n    suppressMarkers: true,    \/\/\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u30de\u30fc\u30ab\u30fc\u3092\u975e\u8868\u793a\r\n    polylineOptions: {    \/\/\u30eb\u30fc\u30c8\u306e\u8272\u3068\u592a\u3055\u306f\u3053\u3053\u3067\u5909\u3048\u308b\r\n        strokeColor:\"#f00\",    \/\/\u8272\r\n        strokeWeight:3    \/\/\u592a\u3055\r\n    }\r\n};\r\nvar directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);\r\nvar directionsService = new google.maps.DirectionsService();\r\nvar map;\r\n\r\n\r\n\/\/\u73fe\u5728\u5730\u306e\u53d6\u5f97\r\nfunction getGps(){\r\n    var tmp = new Array();\r\n    if( navigator.geolocation ){\r\n        navigator.geolocation.getCurrentPosition(\r\n            function( pos ){ \/\/\u4f4d\u7f6e\u53d6\u5f97\u6210\u529f\r\n                tmp['long'] = pos.coords.longitude; \/\/\u7d4c\u5ea6\r\n                tmp['lat'] = pos.coords.latitude; \/\/\u7def\u5ea6\r\n                initialize( tmp );\r\n            },\r\n            function( error ){ \/\/\u5931\u6557\r\n                switch( error.code ){\r\n                    case 1: tmp['msg'] = \"\u4f4d\u7f6e\u60c5\u5831\u306e\u5229\u7528\u304c\u8a31\u53ef\u3055\u308c\u3066\u3044\u307e\u305b\u3093\"; break;\r\n                    case 2: tmp['msg'] = \"\u30c7\u30d0\u30a4\u30b9\u306e\u4f4d\u7f6e\u304c\u5224\u5b9a\u3067\u304d\u307e\u305b\u3093\"; break;\r\n                    case 3: tmp['msg'] = \"\u30bf\u30a4\u30e0\u30a2\u30a6\u30c8\u3057\u307e\u3057\u305f\"; break;\r\n                }\r\n                initialize( tmp );\r\n            }\r\n        );\r\n    } else { \/\/\u4f7f\u7528\u4e0d\u53ef\u306e\u30d6\u30e9\u30a6\u30b6\r\n        tmp['msg'] = '\u3053\u306e\u30d6\u30e9\u30a6\u30b6\u3067\u306f\u4f4d\u7f6e\u53d6\u5f97\u304c\u51fa\u6765\u307e\u305b\u3093\u3002';\r\n        initialize( tmp );\r\n    }\r\n}\r\n\r\n\r\n\/\/MAP\u306e\u751f\u6210\r\nfunction initialize( data ) {\r\n    if( data.msg ){    \/\/\u73fe\u5728\u5730\u304c\u53d6\u5f97\u3067\u304d\u306a\u3044\u5834\u5408\u306f\u76ee\u7684\u5730\u3092\u4e2d\u5fc3\u306b\u8a2d\u5b9a\r\n        alert( data.msg );    \/\/\u30a8\u30e9\u30fc\u5185\u5bb9\u3092\u30a2\u30e9\u30fc\u30c8\u8868\u793a\r\n        var center = new google.maps.LatLng(destinationList.lat, destinationList.long);\r\n    } else { \/\/\u73fe\u5728\u5730\u3092\u53d6\u5f97\u3067\u304d\u308c\u3070\u73fe\u5728\u5730\u3092\u4e2d\u5fc3\u306b\u8a2d\u5b9a\r\n        gps = data;\r\n        var center = new google.maps.LatLng(data.lat, data.long);\r\n    }\r\n    var zoom = 12;\r\n    var mapTypeId = google.maps.MapTypeId.ROADMAP\r\n\r\n    var opts = {\r\n        center: center,\r\n        zoom: zoom,\r\n        mapTypeId: mapTypeId\r\n    };\r\n    map = new google.maps.Map(document.getElementById(\"map_canvas\"),opts);\r\n    directionsDisplay.setMap(map);\r\n    google.maps.event.addListener(directionsDisplay,'directions_changed', function(){});\r\n\r\n    var mapData = {    \/\/\u76ee\u7684\u5730\u306e\u30de\u30fc\u30ab\u30fc\u3092\u4f5c\u6210\r\n        'x':destinationList.lat, \r\n        'y':destinationList.long,\r\n        'icon':'.\/img\/1.png',\r\n        'balloon':'\u76ee\u7684\u5730\u30d0\u30eb\u30fc\u30f3\u5185&lt;br&gt;&lt;span style=\"color:#f00;\"&gt;HTML\u4f7f\u7528\u53ef\u80fd&lt;\/span&gt;'\r\n    };\r\n    makeMarker(mapData);\r\n\r\n    var mapData = {    \/\/\u305d\u306e\u4ed6\u306e\u30de\u30fc\u30ab\u30fc\u3092\u4f5c\u6210\r\n        'x':'34.687315', \r\n        'y':'135.526201',\r\n        'icon':'.\/img\/2.png',\r\n        'balloon':'\u5927\u962a\u57ce\u30d0\u30eb\u30fc\u30f3\u5185&lt;br&gt;&lt;span style=\"color:#f00;\"&gt;HTML\u4f7f\u7528\u53ef\u80fd&lt;\/span&gt;'\r\n    };\r\n    makeMarker(mapData);\r\n\r\n    if( data.msg ){    \/\/\u73fe\u5728\u5730\u3092\u53d6\u5f97\u3067\u304d\u306a\u3044\u5834\u5408\u306f\u30eb\u30fc\u30c8\u691c\u7d22\u4e0d\u8981\u306a\u306e\u3067\u3053\u3053\u3067\u7d42\u4e86\r\n        return false;\r\n    }\r\n\r\n    var mapData = {    \/\/\u73fe\u5728\u5730\u306e\u30de\u30fc\u30ab\u30fc\u3092\u4f5c\u6210\r\n        'x':gps.lat, \r\n        'y':gps.long,\r\n        'icon':'.\/img\/3.png',\r\n        'balloon':'\u73fe\u5728\u5730\u30d0\u30eb\u30fc\u30f3\u5185&lt;br&gt;&lt;span style=\"color:#f00;\"&gt;HTML\u4f7f\u7528\u53ef\u80fd&lt;\/span&gt;'\r\n    };\r\n    makeMarker(mapData);\r\n\r\n    calcRoute();\r\n}\r\n\r\n\r\n\/\/\u30eb\u30fc\u30c8\u8a2d\u5b9a\r\nfunction calcRoute() {\r\n    var request = {\r\n        origin: gps.lat+','+gps.long,    \/\/\u73fe\u5728\u5730(\u5fc5\u9808)\u3002\u7d4c\u5ea6\u7def\u5ea6\u304b\u30c6\u30ad\u30b9\u30c8\u5165\u529b\u3002\r\n        destination: destinationList.lat+','+destinationList.long,    \/\/\u76ee\u7684\u5730(\u5fc5\u9808)\u3002\u7d4c\u5ea6\u7def\u5ea6\u304b\u30c6\u30ad\u30b9\u30c8\u5165\u529b\u3002\r\n        travelMode: google.maps.DirectionsTravelMode.DRIVING,    \/\/\u4ea4\u901a\u624b\u6bb5(\u5fc5\u9808)\u3002\u3053\u308c\u3060\u3068\u9053\u8def\u7db2\u3092\u4f7f\u7528\u3057\u305f\u6a19\u6e96\u306e\u904b\u8ee2\u30eb\u30fc\u30c8\u3002\r\n\/\/        travelMode: google.maps.DirectionsTravelMode.WALKING,    \/\/\u4ea4\u901a\u624b\u6bb5(\u5fc5\u9808)\u3002\u3053\u308c\u3060\u3068\u6b69\u884c\u8005\u5c02\u7528\u9053\u8def\u3068\u6b69\u9053\uff08\u4f7f\u7528\u3067\u304d\u308b\u5834\u5408\uff09\u3092\u4f7f\u7528\u3057\u305f\u5f92\u6b69\u30eb\u30fc\u30c8\u3002\r\n\/\/        travelMode: google.maps.DirectionsTravelMode.BICYLING,    \/\/\u4ea4\u901a\u624b\u6bb5(\u5fc5\u9808)\u3002\u3053\u308c\u3060\u3068\u81ea\u8ee2\u8eca\u30d1\u30b9\u3068\u512a\u5148\u9053\u8def\u3092\u4f7f\u7528\u3059\u308b\u81ea\u8ee2\u8eca\u30eb\u30fc\u30c8\u3002\r\n        optimizeWaypoints: true,    \/\/\u6700\u9069\u5316\u3057\u3066\u3001\u6700\u77ed\u30eb\u30fc\u30c8\u3092\u53d6\u5f97\u3059\u308b\u3088\u3046\u306b\u6307\u5b9a\r\n        avoidHighways: false,    \/\/\u9ad8\u901f\u9053\u8def\u3092\u4f7f\u3046\u304b\u3069\u3046\u304b\u3002true\u3060\u3068\u9ad8\u901f\u9053\u8def\u3092\u53ef\u80fd\u306a\u9650\u308a\u30eb\u30fc\u30c8\u306e\u8a08\u7b97\u304b\u3089\u9664\u5916\r\n        avoidTolls: false    \/\/\u6709\u6599\u9053\u8def\u3092\u4f7f\u3046\u304b\u3069\u3046\u304b\u3002true\u3060\u3068\u6709\u6599\u9053\u8def\u3092\u53ef\u80fd\u306a\u9650\u308a\u30eb\u30fc\u30c8\u306e\u8a08\u7b97\u304b\u3089\u9664\u5916\r\n    };\r\n\r\n    directionsService.route(request, function(response,status){\r\n        if (status == google.maps.DirectionsStatus.OK){\r\n            directionsDisplay.setDirections(response);\r\n        }\r\n    });\r\n}\r\n\r\n\r\n\/\/\u30de\u30fc\u30ab\u30fc\u4f5c\u6210\r\nfunction makeMarker( mapData ){\r\n    var marker = new google.maps.Marker({\r\n        position : new google.maps.LatLng(mapData.x,mapData.y), \r\n        map: map, \r\n        icon: mapData.icon\r\n    });\r\n\r\n    var infoWindow = new google.maps.InfoWindow();\r\n    google.maps.event.addListener(marker, 'click', function() {\r\n        if (currentWindow) {\r\n            currentWindow.close();\r\n        }\r\n        infoWindow.setContent(mapData.balloon);\r\n        infoWindow.open(map,marker);\r\n        currentWindow = infoWindow;\r\n    });\r\n}\r\n&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body onload=\"getGps()\"&gt;\r\n    &lt;div id=\"map_canvas\"&gt;\u30de\u30c3\u30d7\u8aad\u307f\u8fbc\u307f\u4e2d\u2026\u2026&lt;div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-size: 14pt;\"><strong>\u305d\u306e\u4ed6<\/strong><\/span><\/h2>\n<h3><strong>\u975e\u540c\u671f\u901a\u4fe1<\/strong><\/h3>\n<p>\u975e\u540c\u671f\u901a\u4fe1\u304c\u7d61\u3080\u307f\u305f\u3044\u3067\u51e6\u7406\u3055\u308c\u3066\u3044\u304f\u9806\u756a\u3084\u3001\u30b9\u30b3\u30fc\u30d7\u304c\u3069\u3046\u306a\u308b\u306e\u304b\u304c\u3061\u3087\u3063\u3068\u3088\u304f\u5206\u304b\u3089\u306a\u304b\u3063\u305f\u3002<\/p>\n<h3><strong>\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u66f4\u65b0<\/strong><\/h3>\n<p>\u51fa\u6765\u308b\u306e\u304b\u5206\u304b\u3089\u306a\u3044\u3051\u3069\u30ab\u30fc\u30ca\u30d3\u307f\u305f\u3044\u306b\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u3067\u73fe\u5728\u5730\u3092\u5909\u66f4\u3057\u3064\u3064\u3001\u30eb\u30fc\u30c8\u7dda\u3082\u5909\u66f4\u3067\u304d\u308b\u3088\u3046\u306a\u5f62\u306b\u4f5c\u308a\u5909\u3048\u305f\u3044\u3002\u65b9\u6cd5\u8abf\u3079\u308b\u3002<\/p>\n<h3><strong>\u4f7f\u7528\u5236\u9650<\/strong><\/h3>\n<p>GoogleMapAPI\u306e\u4f7f\u7528\u5236\u9650\u3068\u3057\u3066\u3001\u5730\u56f3\u306e\u8aad\u307f\u8fbc\u307f\u306f1\u65e5\u3042\u305f\u308a\u6700\u592725000\u56de\u307e\u3067\u3068\u306e\u3053\u3068\u3002\u500b\u4eba\u5229\u7528\u3084\u3001\u5e97\u8217\u7d39\u4ecb\u3050\u3089\u3044\u306a\u3089\u5927\u4e08\u592b\u305d\u3046\u3060\u3051\u3069\u3001\u30de\u30c3\u30d7\u304c\u30e1\u30a4\u30f3\u306e\u30b5\u30fc\u30d3\u30b9\u306e\u5834\u5408\u306f\u3072\u3063\u304b\u304b\u308a\u305d\u3046\u306a\u306e\u3067\u899a\u3048\u3066\u304a\u304f\u3002<\/p>\n<p>&nbsp;<\/p>\n<h2><strong>\u516c\u5f0f\u30ea\u30d5\u30a1\u30ec\u30f3\u30b9<\/strong><\/h2>\n<p><a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/directions?hl=ja\" target=\"_blank\" rel=\"noopener\">https:\/\/developers.google.com\/maps\/documentation\/javascript\/directions?hl=ja<\/a><\/p>\n<p>&nbsp;<\/p>\n<h2><strong>\u53c2\u8003\u30b5\u30a4\u30c8<\/strong><\/h2>\n<p><a href=\"http:\/\/www.google-mapi.com\/googlemaps\/route-two_points.html\" target=\"_blank\" rel=\"noopener\">http:\/\/www.google-mapi.com\/googlemaps\/route-two_points.html<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Google Maps API\u3092\u4f7f\u3063\u3066\u73fe\u5728\u5730\u3092\u53d6\u5f97\u3057\u3064\u3064\u3001\u76ee\u7684\u5730\u307e\u3067\u306e\u30eb\u30fc\u30c8\u3092\u8868 ... <\/p>\n","protected":false},"author":1,"featured_media":1423,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[71,70],"tags":[],"class_list":["post-2338","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-google-maps-api","category-google"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/posts\/2338","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/comments?post=2338"}],"version-history":[{"count":0,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/posts\/2338\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/media\/1423"}],"wp:attachment":[{"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/media?parent=2338"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/categories?post=2338"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/tags?post=2338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}