学習35日目

内容

google mapの実装(ドラッグしたマーカーの緯度・経度を取得)

前提

• google mapの表示を実装済
• 追記したコードのみ記述し、他は省略

手順

xxxx.html.erb

<script>
    function initMap() {
      const map = new google.maps.Map(document.getElementById("map"), {
        zoom: 12,
        center: { lat: 35.6895, lng: 139.6917 }, 
      });
      const marker = new google.maps.Marker({
        position: { lat: 35.6895, lng: 139.6917 },
        map: map,
        draggable: true,
      });
      google.maps.event.addListener(marker, 'dragend', function(e){
        const latitude = e.latLng.lat();
        const longitude = e.latLng.lng();
        document.getElementById("hidden_latitude").value = latitude;
        document.getElementById("hidden_longitude").value = longitude;
      });
    }
</script>

コメント

• clickイベントを考えていたが、マーカー部分を改めてクリックするのはユーザー側の手間になるので、dragendに変更した
• 次は編集画面で、登録した経度・緯度に対応したマーカー表示となるようにする