質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

Q&A

1回答

874閲覧

現在地から目的地を一覧から距離計測、位置情報で取得した値を初期位置に設定する。

suraisu

総合スコア6

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

0グッド

0クリップ

投稿2017/11/04 11:01

編集2022/01/12 10:55

###google map API java script を使って距離計測
google map APIを使って言語をjava scriptにして現在地から目的地を一覧から選択して、距離と時間を計測する機能を実装中に以下のエラーメッセージが発生しました。

###発生している問題・エラーメッセージ

pos is not defined

###問題のコード(HTML)

java

1```<!DOCTYPE html> 2<html> 3 <head> 4 <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 5 <meta charset="utf-8"> 6 <title>ハザードマップ</title> 7 <style> 8 / #right-panel { 9 font-family: 'Hiragino Sans','sans-serif'; 10 line-height: 30px; 11 padding-left: 10px; 12 } 13 14 15 16 #map { 17 height: 100%; 18 float: left; 19 width: 63%; 20 height: 100%; 21 } 22 23 #left-panel {/*追加*/ 24 font-family: 'Roboto','sans-serif'; 25 line-height: 30px; 26 padding-left: 10px; 27 } 28 #left-panel select, #leftt-panel input { 29 font-size: 15px; 30 } 31 #left-panel select { 32 width: 100%; 33 } 34 #left-panel d { 35 font-size: 12px; 36 } 37 html, body { 38 height: 100%; 39 margin: 0; 40 padding: 0; 41 } 42 43 #left-panel { 44 margin: 1px; 45 border-width: 20px; 46 width: 20%; 47 height: 400px; 48 float: left; 49 text-align: left; 50 padding-top: 0; 51 }/*追加*/ 52 53 54 55 #directions-panel { 56 margin-top: 10px; 57 background-color: #FFEE77; 58 padding: 10px; 59 }/*追加*/ 60 61 62 63 </style> 64 </head> 65 <body> 66 <div id="map"></div> 67 68 <p>目的地までの距離: <span id="total"></span></p> 69 <p>所要時間: <span id="time"></span></p> 70 71 <div id="left-panel"> 72 <div> 73 <b>初期位置:現在地</b> 74 75 <br> 76 <b>目的地:</b> 77 <select id="end"> 78 <option value="柏駅">柏駅</option> 79 <option value="柏の葉高校">柏の葉高校</option> 80 <option value="柏市大青田1536番地の1">柏市立田中北小学校</option> 81 <option value="柏市柏の葉四丁目4番地の1">柏市立十余二小学校</option> 82 <option value="柏市大室1193番地の3">柏市立田中小学校</option> 83 <option value="柏市花野井1652番地の34">柏市立花野井小学校</option> 84 <option value="柏市十余二348番地51中央404街区1">柏市立柏の葉小学校</option> 85 <option value="柏市大室249番地の9">柏市立田中中学校</option> 86 <option value="柏市船戸山高野325番地の1">柏市立柏高等学校</option> 87 <option value="柏市柏の葉六丁目1番地">千葉県立柏の葉高等学校</option> 88 <option value="柏市十余二313番地の92">柏市青少年センター</option> 89 <option value="柏市柏の葉一丁目10番">中十余二第一公園</option> 90 <option value="柏市柏の葉二丁目16番">中十余二第二公園</option> 91 <option value="柏市大室1311番地の6">柏ビレジ近隣公園</option> 92 <option value="柏市船戸1805番地">北部緑地</option> 93 <option value="柏市花野井974番地1">旧吉田家住宅歴史公園(芝生広場)</option> 94 <option value="柏市西原四丁目17番1号">柏市立西原小学校</option> 95 <option value="柏市西原六丁目13番1号">柏市立西原中学校</option> 96 <option value="柏市十余二1番地の20">流通経済大学付属柏高校</option> 97 <option value="柏市布施84番地の2">柏市立富勢西小学校</option> 98 <option value="柏市布施2176番地の2">柏市立富勢東小学校</option> 99 <option value="柏市布施925番地の1">柏市立富勢小学校</option> 100 <option value="柏市根戸467番地の1">柏市立富勢中学校</option> 101 <option value="柏市布施254番地">千葉県立柏高等学校</option> 102 <option value="柏市根戸507番地">富勢運動場</option> 103 <option value="柏市布施1940番地">あけぼの山公園</option> 104 <option value="柏市北柏三丁目9番">北柏第二公園</option> 105 <option value="柏市布施新町二丁目4番">布施第二公園</option> 106 <option value="柏市北柏二丁目9番">北柏第三公園</option> 107 <option value="柏市呼塚新田270番地の1">北柏ふるさと公園</option> 108 <option value="柏市松葉町五丁目3番地">柏市立松葉第一小学校</option> 109 <option value="柏市松葉町二丁目16番地">柏市立松葉第二小学校 110 111 </select> 112 <br> 113 <input type="submit" id="submit"> 114 </div> 115 <div id="directions-panel"></div> 116 </div> 117 </div> 118 119 120 <script> 121function initMap() { 122 var directionsService = new google.maps.DirectionsService; 123 var directionsDisplay = new google.maps.DirectionsRenderer; 124 /*var map = new google.maps.Map(document.getElementById('map'), { 125 zoom: 10, 126 center: {lat: 35.681, lng: 140.02} //初期 127 });*/ 128 var map = new google.maps.Map(document.getElementById('map'), { 129 center: {lat: 35.891820616597954, lng: 139.94462999999996}, 130 zoom: 16, 131 }); 132 var infoWindow = new google.maps.InfoWindow({map: map}); 133 134 // 位置情報検索. 135 if (navigator.geolocation) { 136 navigator.geolocation.getCurrentPosition(function(position) { 137 var pos = { 138 lat: position.coords.latitude, 139 lng: position.coords.longitude 140 }; 141 //infoWindow.setPosition(pos); 142 //infoWindow.setContent('現在地です'); 143 map.setCenter(pos); 144 var marker = new google.maps.Marker({ 145 position: pos, 146 map: map, 147 title: '現在地です' 148 }); 149 }, function() { 150 handleLocationError(true, infoWindow, map.getCenter()); 151 }); 152 } else { 153 // Browser doesn't support Geolocation 154 handleLocationError(false, infoWindow, map.getCenter()); 155 } 156 function handleLocationError(browserHasGeolocation, infoWindow, pos) { 157 infoWindow.setPosition(pos); 158 infoWindow.setContent(browserHasGeolocation ? 159 'Error: The Geolocation service failed.' : 160 'Error: Your browser doesn\'t support geolocation.') 161 } 162 //元のほう追加 163 var directionsService = new google.maps.DirectionsService; 164 var directionsDisplay = new google.maps.DirectionsRenderer({ 165 draggable: true, 166 // map: map, 167 // panel: document.getElementById('right-panel') 168 }); 169 directionsDisplay.addListener('directions_changed', function() { 170 computeTotalDistance(directionsDisplay.getDirections()); 171 });//ここまで 172 173 174 directionsDisplay.setMap(map); 175 176 177 document.getElementById('submit').addEventListener('click', function() { 178 calculateAndDisplayRoute(directionsService, directionsDisplay); 179 });//送信ボタンのJS 180 } 181 function calculateAndDisplayRoute(directionsService, directionsDisplay) { 182 var waypts = []; 183 var checkboxArray = document.getElementById('waypoints'); 184 for (var d = 0; d < checkboxArray.length; d++) { 185 if (checkboxArray.options[d].selected) { 186 waypts.push({ 187 location: checkboxArray[d].value, 188 stopover: true 189 }); 190 } 191 } 192 directionsService.route({ 193 origin: pos, 194 destination: document.getElementById('end').value, 195 waypoints: waypts, 196 optimizeWaypoints: true, 197 travelMode: 'WALKING' 198 }, function(response, status) { 199 if (status === 'OK') { 200 directionsDisplay.setDirections(response); 201 var route = response.routes[0]; 202 var summaryPanel = document.getElementById('directions-panel'); 203 summaryPanel.innerHTML = ''; 204 // For each route, display summary information. 205 for (var d = 0; d < route.legs.length; d++) { 206 var routeSegment = d + 1; 207 summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment + 208 '</b><br>'; 209 summaryPanel.innerHTML += route.legs[d].start_address + ' to '; 210 summaryPanel.innerHTML += route.legs[d].end_address + '<br>'; 211 summaryPanel.innerHTML += route.legs[d].distance.text + '<br><br>'; 212 } 213 } else { 214 window.alert('Directions request failed due to ' + status); 215 } 216 }); 217 } 218 219 220 221 function computeTotalDistance(result) { 222 var total = 0; 223// var time = distance/speed;//追加 224 var time = 0; 225 var myroute = result.routes[0]; 226 for (var i = 0; i < myroute.legs.length; i++) { 227 total += myroute.legs[i].distance.value; 228 } 229 230 total = total / 1000; 231 time = total / 4.8; 232 time = time * 60; 233 time = Math.round(time); 234 235 236 237 document.getElementById('total').innerHTML = total + ' km'; 238 document.getElementById('time').innerHTML = time + ' 分'; 239 240 } 241 242</script> 243<script async defer 244src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBeI8QXa4QyrZBz1JhVoP95o31b-jhI7gc&callback=initMap"> 245</script> 246</body> 247</html> 248 249###問題のコード(CSS) 250 251 / #right-panel { 252 font-family: 'Hiragino Sans','sans-serif'; 253 line-height: 30px; 254 padding-left: 10px; 255 } 256 257 258 259 #map { 260 height: 100%; 261 float: left; 262 width: 63%; 263 height: 100%; 264 } 265 266 #left-panel {/*追加*/ 267 font-family: 'Roboto','sans-serif'; 268 line-height: 30px; 269 padding-left: 10px; 270 } 271 #left-panel select, #leftt-panel input { 272 font-size: 15px; 273 } 274 #left-panel select { 275 width: 100%; 276 } 277 #left-panel d { 278 font-size: 12px; 279 } 280 html, body { 281 height: 100%; 282 margin: 0; 283 padding: 0; 284 } 285 286 #left-panel { 287 margin: 1px; 288 border-width: 20px; 289 width: 20%; 290 height: 400px; 291 float: left; 292 text-align: left; 293 padding-top: 0; 294 }/*追加*/ 295 296 297 298 #directions-panel { 299 margin-top: 10px; 300 background-color: #FFEE77; 301 padding: 10px; 302 }/*追加*/ 303 304###試したこと 305位置情報検索でposを初期位置にするのですが、うまく定義できません。 306posを初期位置にするために変数範囲を広くしたりしたのですがどうもうまくいきません… 307 308###補足情報(言語/FW/ツール等のバージョンなど) 309言語 java script 310ツール Atom

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2017/11/04 12:35

とりあえず、otrigin: pos の末尾カンマ忘れがあります。あと、otrigin じゃなくて origin ではないかな、と。
Lhankor_Mhy

2017/11/04 12:39

そして、travelMode: 'WALKING' }, の余分なカンマとカッコ閉じ忘れもありますね。あと、function(response, status) { 終わりの閉じカッコも対応が取れてなさそう。とりあえず、文法エラーぐらいは自力で直せるようになったほうがいいと思いますよ。
suraisu

2017/11/04 13:16

大変初歩的なミスで申し訳ないです…ある程度書き直したところ、やはりposを初期位置にもっていくところでどうも詰まってしまいます。
kei344

2017/11/05 06:31

質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、「java script」ではなく「JavaScript」です。
guest

回答1

0

calculateAndDisplayRoute関数の中でpos変数が定義されていないまま使われています。initMap関数で定義されている同名の変数を使いたいのだと思いますので、スコープを見直すか、引数に取れば解決するのではないかと思います。

投稿2017/11/06 12:18

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

suraisu

2017/11/08 08:41

ありがとうございます。'''calculateAndDisplayRoute内に’’’posを定義したのですが、 別のエラー’’’InvalidValueError: in property origin: not a string; and not a LatLng or LatLngLiteral: not an Object; and not an Object が出ました。valueのエラーかな?と思って調べても全く情報が見当たらないので困っています…
Lhankor_Mhy

2017/11/08 09:20

どのようなコードで定義されましたか?
suraisu

2017/11/09 06:26

function calculateAndDisplayRoute(directionsService, directionsDisplay, pos)です。
Lhankor_Mhy

2017/11/09 06:38

呼び出し側からもposを渡していますか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問