Q&A
前提
現在GoogleMap上で周辺検索をし店舗を保存して道案内をするというGoogleMapの酷似版のアプリを制作しています
GoogleMapの周辺検索の機能まではできているのですが表示された店舗のピンをクリックしたら吹き出しが表示され、吹き出し内の保存ボタンを押したら店舗の情報がDBに保持されるようにしたいところ思った通りに動かないため質問させていただきます
実現したいこと
- 吹き出し内の保存ボタンをクリックするとcreateアクションが実行され、店舗名がDBに保存されるようにしたいです
発生している問題・エラーメッセージ
- 検証ツール上でshop_nameがないとのエラーが出ています
Uncaught ReferenceError: shop_name is not defined at submitForm (search:154:32) at <anonymous>:1:1
該当のソースコード
function SearchGo(){ let initPos = {lat: <%= rodging.latitude %>, lng: <%= rodging.longitude %>}; let mapOptions = { center : initPos, mapTypeId : google.maps.MapTypeId.ROADMAP }; // #map要素にMapクラスの新しいインスタンスを作成 myMap = new google.maps.Map(document.getElementById("map"), mapOptions); service = new google.maps.places.PlacesService(myMap); // input要素に入力されたキーワードを検索の条件に設定 let myword = document.getElementById("search"); let request = { query: myword.value, location: myMap.getCenter() }; service.textSearch(request, result_search); } // 検索の結果を受け取る function result_search(results) { let bounds = new google.maps.LatLngBounds(); let contentButton = '<br><a class="btn btn-outline btn-success btn-sm mt-1" href="javascript:submitForm()" tabindex="0">保存</a>'; for(let i = 0; i < results.length; i++){ let shop_name = results[i].name; createMarker({ //createMarker関数を呼び出している position : results[i].geometry.location, text : `<a href="https://www.google.com/search?q=${results[i].name}" tabindex="0">${results[i].name}</a>`, button : contentButton, map : myMap }); bounds.extend(results[i].geometry.location); } myMap.fitBounds(bounds); } // 該当する位置にマーカーを表示 function createMarker(options) { // マップ情報を保持しているmyMapオブジェクトを指定 options.map = myMap; // Markcrクラスのオブジェクトmarkerを作成 let marker = new google.maps.Marker(options); // 各施設の吹き出し(情報ウインドウ)に表示させる処理 let infoWnd = new google.maps.InfoWindow(); infoWnd.setContent(options.text + options.button); // addListenerメソッドを使ってイベントリスナーを登録 google.maps.event.addListener(marker, 'click', function(){ infoWnd.open(myMap, marker); }); return marker; } function submitForm(){ let form = document.createElement('form'); document.body.appendChild(form); let input = document.createElement('input'); input.setAttribute('type','hidden'); input.setAttribute('name','shop[address]'); input.setAttribute('value',''); ←ここに店舗名を入れるとできるようにしているのですが、 result_search関数のところで{results[i].name}をvalueのところに持ってきたらできるのかなと思うのですが、他の関数内で定義された変数は持ってこれないみたいです form.appendChild(input); form.setAttribute('action',`/rodgings/<%= rodging.id %>/shops`); form.setAttribute('method','post'); form.submit(); }
試したこと
submitForm()
関数内でinput.setAttribute('value','')
の部分をresult_search(results)
関数内で定義した変数をinput.setAttribute('value',shop_name)
のようにしましたがそんな変数なんかない
とのことです
回答2件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。