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

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

ただいまの
回答率

90.76%

  • JavaScript

    15353questions

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

  • Google API

    485questions

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

  • Atom (テキストエディタ)

    482questions

  • Google Map

    336questions

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

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

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 491

suraisu

score 2

google map API java script を使って距離計測

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

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

pos is not defined

問題のコード(HTML)

java script <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>ハザードマップ</title>
<style>
/ #right-panel {
font-family: 'Hiragino Sans','sans-serif';
line-height: 30px;
padding-left: 10px;
}

map {

height: 100%;
float: left;
width: 63%;
height: 100%;
}

left-panel {/*追加*/

font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}

left-panel select, #leftt-panel input {

font-size: 15px;
}

left-panel select {

width: 100%;
}

left-panel d {

font-size: 12px;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}

left-panel {

margin: 1px;
border-width: 20px;
width: 20%;
height: 400px;
float: left;
text-align: left;
padding-top: 0;
}/*追加*/

directions-panel {

margin-top: 10px;
background-color: #FFEE77;
padding: 10px;
}/*追加*/

</style>
</head>
<body>
<div id="map"></div>

<p>目的地までの距離: <span id="total"></span></p>
<p>所要時間: <span id="time"></span></p>

<div id="left-panel">
<div>
<b>初期位置:現在地</b>

<br>
<b>目的地:</b>
<select id="end">
<option value="柏駅">柏駅</option>
<option value="柏の葉高校">柏の葉高校</option>
<option value="柏市大青田1536番地の1">柏市立田中北小学校</option>
<option value="柏市柏の葉四丁目4番地の1">柏市立十余二小学校</option>
<option value="柏市大室1193番地の3">柏市立田中小学校</option>
<option value="柏市花野井1652番地の34">柏市立花野井小学校</option>
<option value="柏市十余二348番地51中央404街区1">柏市立柏の葉小学校</option>
<option value="柏市大室249番地の9">柏市立田中中学校</option>
<option value="柏市船戸山高野325番地の1">柏市立柏高等学校</option>
<option value="柏市柏の葉六丁目1番地">千葉県立柏の葉高等学校</option>
<option value="柏市十余二313番地の92">柏市青少年センター</option>
<option value="柏市柏の葉一丁目10番">中十余二第一公園</option>
<option value="柏市柏の葉二丁目16番">中十余二第二公園</option>
<option value="柏市大室1311番地の6">柏ビレジ近隣公園</option>
<option value="柏市船戸1805番地">北部緑地</option>
<option value="柏市花野井974番地1">旧吉田家住宅歴史公園(芝生広場)</option>
<option value="柏市西原四丁目17番1号">柏市立西原小学校</option>
<option value="柏市西原六丁目13番1号">柏市立西原中学校</option>
<option value="柏市十余二1番地の20">流通経済大学付属柏高校</option>
<option value="柏市布施84番地の2">柏市立富勢西小学校</option>
<option value="柏市布施2176番地の2">柏市立富勢東小学校</option>
<option value="柏市布施925番地の1">柏市立富勢小学校</option>
<option value="柏市根戸467番地の1">柏市立富勢中学校</option>
<option value="柏市布施254番地">千葉県立柏高等学校</option>
<option value="柏市根戸507番地">富勢運動場</option>
<option value="柏市布施1940番地">あけぼの山公園</option>
<option value="柏市北柏三丁目9番">北柏第二公園</option>
<option value="柏市布施新町二丁目4番">布施第二公園</option>
<option value="柏市北柏二丁目9番">北柏第三公園</option>
<option value="柏市呼塚新田270番地の1">北柏ふるさと公園</option>
<option value="柏市松葉町五丁目3番地">柏市立松葉第一小学校</option>
<option value="柏市松葉町二丁目16番地">柏市立松葉第二小学校

</select>
<br>
<input type="submit" id="submit">
</div>
<div id="directions-panel"></div>
</div>
</div>

<script>
function initMap() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
/*var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: 35.681, lng: 140.02}  //初期
});*/
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 35.891820616597954, lng: 139.94462999999996},
zoom: 16,
});
var infoWindow = new google.maps.InfoWindow({map: map});

// 位置情報検索.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
//infoWindow.setPosition(pos);
//infoWindow.setContent('現在地です');
map.setCenter(pos);
var marker = new google.maps.Marker({
position: pos,
map: map,
title: '現在地です'
});
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.')
}
//元のほう追加
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer({
draggable: true,
//  map: map,
//  panel: document.getElementById('right-panel')
});
directionsDisplay.addListener('directions_changed', function() {
computeTotalDistance(directionsDisplay.getDirections());
});//ここまで

directionsDisplay.setMap(map);

document.getElementById('submit').addEventListener('click', function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
});//送信ボタンのJS
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
var waypts = [];
var checkboxArray = document.getElementById('waypoints');
for (var d = 0; d < checkboxArray.length; d++) {
if (checkboxArray.options[d].selected) {
waypts.push({
location: checkboxArray[d].value,
stopover: true
});
}
}
directionsService.route({
origin: pos,
destination: document.getElementById('end').value,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: 'WALKING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
var route = response.routes[0];
var summaryPanel = document.getElementById('directions-panel');
summaryPanel.innerHTML = '';
// For each route, display summary information.
for (var d = 0; d < route.legs.length; d++) {
var routeSegment = d + 1;
summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment +
'</b><br>';
summaryPanel.innerHTML += route.legs[d].start_address + ' to ';
summaryPanel.innerHTML += route.legs[d].end_address + '<br>';
summaryPanel.innerHTML += route.legs[d].distance.text + '<br><br>';
}
} else {
window.alert('Directions request failed due to ' + status);
}
});
}

function computeTotalDistance(result) {
var total = 0;
//    var time = distance/speed;//追加
var time = 0;
var myroute = result.routes[0];
for (var i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}

total = total / 1000;
time = total / 4.8;
time = time * 60;
time = Math.round(time);

document.getElementById('total').innerHTML = total + ' km';
document.getElementById('time').innerHTML = time + ' 分';

}

</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBeI8QXa4QyrZBz1JhVoP95o31b-jhI7gc&callback=initMap">
</script>
</body>
</html>

問題のコード(CSS)

/ #right-panel {
font-family: 'Hiragino Sans','sans-serif';
line-height: 30px;
padding-left: 10px;
}

map {

height: 100%;
float: left;
width: 63%;
height: 100%;
}

left-panel {/*追加*/

font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}

left-panel select, #leftt-panel input {

font-size: 15px;
}

left-panel select {

width: 100%;
}

left-panel d {

font-size: 12px;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}

left-panel {

margin: 1px;
border-width: 20px;
width: 20%;
height: 400px;
float: left;
text-align: left;
padding-top: 0;
}/*追加*/

directions-panel {

margin-top: 10px;
background-color: #FFEE77;
padding: 10px;
}/*追加*/

試したこと

位置情報検索でposを初期位置にするのですが、うまく定義できません。
posを初期位置にするために変数範囲を広くしたりしたのですがどうもうまくいきません…

補足情報(言語/FW/ツール等のバージョンなど)

言語 java script
ツール Atom

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Lhankor_Mhy

    2017/11/04 21:35

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

    キャンセル

  • Lhankor_Mhy

    2017/11/04 21:39

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

    キャンセル

  • suraisu

    2017/11/04 22:16

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

    キャンセル

  • kei344

    2017/11/05 15:31

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

    キャンセル

回答 1

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/08 17:41

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

    キャンセル

  • 2017/11/08 18:20

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

    キャンセル

  • 2017/11/09 15:26

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

    キャンセル

  • 2017/11/09 15:38

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

    キャンセル

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

  • ただいまの回答率 90.76%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    15353questions

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

  • Google API

    485questions

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

  • Atom (テキストエディタ)

    482questions

  • Google Map

    336questions

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