学習44日目

内容

google mapの検索機能

前提

• google mapの表示実装済
• google mapの緯度と経度のDB保存実装済
• form内のhidden_fieldにlatitudeとlongitudeを格納
• 追記部分以外は省略

手順

住所入力部分を記述する。
views/hoges/new.html.erb

<input type="text" id="input_address">
<button id="search_address">検索</button>

javascriptを記述する。
views/hoges/new.html.erb

<script>
    let searchBtn = document.getElementById('search_address')
    searchBtn.addEventListener('click', (e) => {
        e.preventDefault()
        inputStr = document.getElementById('input_address').value
        geocoder.geocode({'address': inputStr}, function(results, status){
            if (status == 'OK') {
                latitude = results[0].geometry.location.lat()
                longitude = results[0].geometry.location.lng()
                document.getElementById("hidden_latitude").value = latitude
                document.getElementById("hidden_longitude").value = longitude
            map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: latitude, lng: longitude},
                zoom: 12,
            });
            marker = new google.maps.Marker({
                position: {lat: latitude, lng: longitude},
                map: map,
                draggable: true,
            });
            } else {
                alert('該当の住所が見つかりませんでした')
            }
        })
    })
</script>

コメント

最初text_fieldに対してinputやchangeイベントが起こった際の処理を記述しようと考えていたが、うまくできなかった。