GoogleMapAPIでクリックした座標にマーカーを設置する方法
2024/02/20
GoogleMapAPIでクリックした位置にマーカーを設置し、座標の経度緯度をテキストボックスに自動で入力させたかった。また、既に設置されているマーカーは削除、新しく設置したマーカーがマップの中心に来るよう移動させたい。以下に方法をメモ。
リファレンス
https://developers.google.com/maps/documentation/javascript/reference/map?hl=ja#Map.panTo
HTML部分
<!-- 住所 --> <input type="text" name="address" id="address"> <!-- 住所 --> <!-- 緯度 --> <input type="text" name="lat" id="lat"> <!-- 緯度 --> <!-- 経度 --> <input type="text" name="long" id="long" class="form-control form-control-sm"> <!-- 経度 --> <!-- GoogleMap --> <div id="map_canvas" style="width: 100%; height: 300px;"></div> <!-- GoogleMap -->
javascript部分
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true&key=xxxxxxxxxxxxxxxxx"></script> <script> var map; var marker; //GoogleMap初期表示 var init_latlng = {'lat' : '35.681236', 'long' : '139.767125'}; var latlng = new google.maps.LatLng(init_latlng.lat, init_latlng.long); var myOptions = { zoom: 12, gestureHandling: "greedy" , center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, "streetViewControl": false, "fullscreenControl": false, "styles": false, "disableDoubleClickZoom": false, "mapTypeControl": false, }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var mapData = { 'x':init_latlng.lat, 'y':init_latlng.long }; //マーカー設置 makeMarker(mapData); //マーカー作成用関数 function makeMarker( mapData ){ marker = new google.maps.Marker({ position : new google.maps.LatLng(mapData.x,mapData.y), map: map, }); } //クリックで経度緯度取得 map.addListener('click', clickLatLng); function clickLatLng(event){ //クリックした位置の座標を取得 var click_latlng = event.latLng; //経度緯度をテキストボックスに入力 $('#lat').val(click_latlng.lat()); $('#long').val(click_latlng.lng()); //既存マーカーを消去 marker.setMap(null); //マーカー設置 mapData = { 'x':click_latlng.lat(), 'y':click_latlng.lng() }; makeMarker(mapData); //マーカー位置に移動 map.panTo(new google.maps.LatLng(click_latlng.lat(),click_latlng.lng())); } </script>
関連記事
-
-
GoogleMapAPIのジオコードで存在するはずの住所が見つからない場合の原因について(ZERO_RESULTS)
GoogleMapAPIを利用したプログラムで確かに存在するはずの住所をジオコー ...
-
-
Advanced Custom FieldsでGoogleMapの使用する方法
Advanced Custom FieldsでGoogleMapを使用したかった ...
-
-
Google map APIでマーカー(アイコン)を好きな画像に変える
Googleマップでユーザーにマーカー画像をアップロードさせて、それをマップ表示 ...
-
-
Google Maps APIでメインカラーを変更する方法
GoogleMapAPIを用いたMAPでカラー変更をしたかった。カラーコードの指 ...
-
-
スマホでページ内リンクからGoogleMapアプリを開く
スマホでWebページにあるリンクをクリックした際にGoogleMapアプリを表示 ...