質問編集履歴

タイトル変更

2017/11/04 13:17

投稿

suraisu

スコア6

test CHANGED Viewed

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

test CHANGED Viewed

File without changes

誤字、カッコの対応の修正⇒posが定義されない

2017/11/04 13:17

投稿

suraisu

スコア6

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -10,7 +10,7 @@
 ```
-Uncaught SyntaxError: Unexpected identifier
+pos is not defined
 ```
@@ -236,49 +236,7 @@
     	<option value="柏市松葉町五丁目３番地">柏市立松葉第一小学校</option>
-    	<option value="柏市松葉町二丁目１６番地">柏市立松葉第二小学校</option>
+    	<option value="柏市松葉町二丁目１６番地">柏市立松葉第二小学校
-    	<option value="柏市松葉町三丁目１４番地">柏市立松葉中学校</option>
-    	<option value="柏市松葉町四丁目６番">松葉第一近隣公園</option>
-    	<option value="柏市松葉町四丁目１３番">松葉第二近隣公園</option>
-    	<option value="柏市松ヶ崎１１８２番地の９">柏市立柏第四小学校</option>
-    	<option value="柏市高田３７６番地の３">柏市立高田小学校</option>
-    	<option value="柏市高田９１９番地の１">柏市立柏第五中学校</option>
-    	<option value="柏市松ヶ崎８８４番地の１">千葉県立柏中央高等学校</option>
-    	<option value="柏市大山台１番">松ヶ崎中央公園</option>
-    	<option value="柏市豊四季台四丁目２番１号">柏市立柏第六小学校</option>
-    	<option value="柏市篠籠田７２３番地の１">柏市立柏第七小学校</option>
-    	<option value="柏市明原四丁目１番１号">柏市立柏中学校</option>
-    	<option value="柏市篠籠田９８７番地の１">柏市立柏第三中学校</option>
-    	<option value="柏市明原三丁目１番">西口第一公園</option>
-    	<option value="柏市旭町六丁目５番１７号">柏市立旭小学校</option>
-    	<option value="柏市旭町五丁目３番９号">柏市立旭東小学校</option>
-    	<option value="柏市旭町三丁目２番１号">千葉県立東葛飾高等学校</option>
-    	<option value="柏市旭町７丁目４番８１号">気象大学校</option>
-    	<option value="柏市豊四季３１０番地">柏市立柏第二小学校</option>
-    	<option value="柏市豊四季２８７番地の７">柏市立豊四季中学校</option>
-    	<option value="柏市豊四季２２４番地の３">豊四季庚塚緑地</option>
-    	<option value="柏市あけぼの一丁目７番６号">柏市立柏第一小学校</option>
@@ -302,213 +260,245 @@
     <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);
-    }, 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: false,
-  //  map: map,
-  //  panel: document.getElementById('right-panel')
-});
-    directionsService.route({
-      otrigin: pos
-      destination: document.getElementById('end').value,
-      waypoints: waypts,
-      optimizeWaypoints: true,
-      travelMode: 'WALKING'
-    },
-  }
-    directionsDisplay.addListener('directions_changed', function() {
-      computeTotalDistance(directionsDisplay.getDirections());
-    });//ここまで
-    directionsDisplay.setMap(map);
-    document.getElementById('submit').addEventListener('click', function() {
-      calculateAndDisplayRoute(directionsService, directionsDisplay);
-    });//送信ボタンのJS
-    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>';
+    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
         }
-      } 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 + ' 分';
-}
+      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 + ' 分';
+      }
@@ -638,11 +628,9 @@
 ###試したこと
+位置情報検索でposを初期位置にするのですが、うまく定義できません。
-現在地を変数にしたposを初期位置にするためにfunction initmapを全部に囲ったのですが、目的地を指定するところでエラーになってしまいます。
+posを初期位置にするために変数範囲を広くしたりしたのですがどうもうまくいきません…
-試しにorigin値をdocument.getElementById('end').value,にすると通ってしまい、次のエラーに行きつきます。
-これはどういう事なのでしょうか…