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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Google マップ

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

Q&A

解決済

1回答

3001閲覧

JavaScriptでテキストボックスから配列でデータを取得する方法がわからない

RoimyZomsa

総合スコア15

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Google マップ

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

0グッド

0クリップ

投稿2017/07/05 06:21

html

1<!DOCTYPE html> 2 3<html> 4 <head> 5 <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 6 <meta charset="utf-8"> 7 <link href="./css/map-layout.css" rel="stylesheet"> 8 <link href="./font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"> 9 <script src="./javascript/jquery-3.1.1.min.js" type="text/javascript"></script> 10 <script src="./javascript/jquery-easing.js" type="text/javascript"></script> 11 <script src="./javascript/map-script.js" type="text/javascript"></script> 12 <script src="./javascript/menubar.js" type="text/javascript"></script> 13 <title>地図</title> 14 </head> 15 16 <body> 17 <div id="floating-panel"> 18 19 <div id="column1"> 20 <label for="start">出発地点: 21 <input type="text" id="start" value="池袋駅"> 22 </label> 23 </div> 24 25 <div id="column2"> 26 <label for="waypoint">中間地点: 27 <ul> 28 <li><input type="text" id="waypoint" value="新宿駅" name="waypoints[]"></li> 29 </ul> 30 </label> 31 </div> 32 33 <div id="column3"> 34 <label for="end">到着地点: 35 <input type="text" id="end" value="渋谷駅"> 36 </label> 37 </div> 38 39 <div id="column4"> 40 <label for="mode"> 41 <select id="mode"> 42 <option value="DRIVING"></option> 43 <option value="WALKING">徒歩</option> 44 <!--<option value="TRANSIT">公共交通機関</option> 日本未対応--> 45 </select> 46 </label> 47 48 <button id='submit'>検索</button> 49 </div> 50 51 </div> 52 53 <div id="menu-switch"><p><i class="fa fa-bars" aria-hidden="true"></i></p></div> 54 <div id="menu" class="on-scroll"> 55 <ul> 56 <li><i class="fa fa-thumbs-up" aria-hidden="true"></i>営業先到着報告</li> 57 <li><i class="fa fa-coffee" aria-hidden="true"></i>就業報告</li> 58 <li><i class="fa fa-book" aria-hidden="true"></i>ノウハウ編集</li> 59 <li><i class="fa fa-building" aria-hidden="true"></i>企業情報</li> 60 <li><i class="fa fa-calendar" aria-hidden="true"></i>曜日選択</li> 61 <li><i class="fa fa-sign-out" aria-hidden="true"></i>ログアウト</li> 62 </ul> 63 </div> 64 <div id="map"></div> 65 <div id="right-panel"></div> 66 <script async defer 67 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRKlebsO-abTBOAAvofP87F1Ajvk1aDjA&callback=initMap"> 68 </script> 69 </body> 70</html> 71

JavaScript

1function initMap() { 2 let directionsDisplay = new google.maps.DirectionsRenderer; 3 let directionsService = new google.maps.DirectionsService; 4 let map = new google.maps.Map(document.getElementById('map'), { 5 zoom: 12, 6 center: {lat: 35.6964431, lng: 139.7684526}, 7 mapTypeId: 'hybrid' 8 }); 9 10 directionsDisplay.setMap(map); 11 directionsDisplay.setPanel(document.getElementById('right-panel')); 12 13 let control = document.getElementById('floating-panel'); 14 control.style.display = 'block'; 15 map.controls[google.maps.ControlPosition.TOP_CENTER].push(control); 16 17 let onChangeHandler = function() { 18 calculateAndDisplayRoute(directionsService, directionsDisplay); 19 }; 20 21 document.getElementById('submit').addEventListener('click', onChangeHandler); 22} 23 24function calculateAndDisplayRoute(directionsService, directionsDisplay) { 25 let start = document.getElementById('start').value; 26 let end = document.getElementById('end').value; 27 let mode = document.getElementById('mode').value; 28 let waypoint = document.getElementsByName('waypoints[]'); 29 let waypts = [{location: waypoint, stopover: true}]; 30 31 //waypts.push({location: waypoint}); 32 33 directionsService.route({ 34 origin: start, 35 destination: end, 36 waypoints: waypts, 37 //optimizeWaypoints: true, 38 travelMode: mode 39 }, 40 function(response, status) { 41 if (status === 'OK') { 42 directionsDisplay.setDirections(response); 43 } else { 44 window.alert("ディレクションリクエストは" + status + "のために失敗しました。"); 45 } 46 }); 47} 48

テキストのところのname に→[]を付ければ送れると思ったのですがちがうのかな

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

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

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

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

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

guest

回答1

0

ベストアンサー

javascript

1let waypoint = document.getElementsByName('waypoints[]'); 2```の部分は、HTMLCollectionが返ります。 3ですので、 4```javascript 5let waypts = [{location: waypoint, stopover: true}]; 6```はおかしいですね。HTMLCollectionはforEachメソッドがないので、 7`[].forEach.call``Array.prototype.forEach.call`と同じ意味)でループしてやるといいですね。 8 9```javascript 10let waypoint = document.getElementsByName('waypoints[]'); 11let waypts = []; 12[].forEach.call(waypoint, function(ele) { 13 waypts.push({location: ele.value, stopover: true}); 14}); 15```ちょっと`waypts`の配列をどういう風に処理するか分からなかったので適当です。

投稿2017/07/05 06:30

編集2017/07/05 06:42
shi_ue

総合スコア4437

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問