【Maps JavaScript API】マーカーをドラッグアンドドロップで移動してみよう

今回は以前解説した「マーカーを追加する方法」をベースに、マーカーをドラッグアンドドロップで移動する方法について解説していきたいと思います。

マーカーのdraggableを設定する

まず、ユーザーがマーカーをドラッグアンドドロップでマップ上の別の場所に移動できるようにするには、marker optionでdraggableをtrueに設定する必要があります。

//マーカーの初期プロパティを指定
marker = new google.maps.Marker({
 position: myLatlng,
 //ドラッグを許可
 draggable: true,
 map: map,
});

この設定でマーカーをドラッグアンドドロップで移動させることが可能となります。
では、次にドラッグアンドドロップしたマーカーの緯度経度を取得させてみましょう。

ドラッグアンドドロップしたマーカーの緯度経度を取得する

上記の通り、まずはマーカーオプションでdraggableをtrueに設定し、ドラッグを可能にします。
マーカーのドラッグ終了イベントを定義し、そのイベントから緯度経度を取得して表示させます。
以下サンプルを確認してください。
マーカーをドラッグアンドドロップすると、ドラッグが終了した時にマーカーの経度緯度を確認することができます。

このようにイベントから経度緯度を取得する方法は、地図システムを開発する上で頻繁使います。
ソースをそのまま使用しても表示できますので、まずはコピーしてマーカーのドラッグアンドドロップの挙動を確認してみましょう。

 <script>
var map;
function initMap() {
 var myLatlng = new google.maps.LatLng(35.681167, 139.767052);
 //インスタンスを作成
 map = new google.maps.Map(document.getElementById('map'), {
  //地図のオプション
  //初期のズームレベル
  zoom: 12,
  //地図の中心点
  center: myLatlng
 });
 //マーカーの初期プロパティを指定
 marker = new google.maps.Marker({
  position: myLatlng,
  //ドラッグを許可
  draggable: true,
  map: map,
 });
 //マーカーのドロップ（ドラッグ終了）時のイベント
 google.maps.event.addListener(marker, 'dragend', function(e) {
  //イベントの引数eの、プロパティ.latLngがmarkerの緯度経度。
  $('#lat').text('マーカーの緯度' + e.latLng.lat());
  $('#lng').text('マーカーの経度' + e.latLng.lng());
 });
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>

サンプルページはこちら
以上でマーカーをドラッグアンドドロップで移動させる方法の解説を終わります。
マーカーを単純に表示させる方法から、イベントを定義してそのイベントの情報を取得する方法へと発展していきました。
Google Maps APIを使って地図システムを開発する時には、様々な機能を組み合わせて地図の表現を豊かにしていきます。
一つ一つの出来ることをしっかりと理解しながら、自分なりの活用方法を見つけていきましょう。

ご質問などございましたら、お気軽に下記コメント欄にお寄せください。

※当サイトで使用しているコンテンツについて
Googleマップの地図画面については、自作コンテンツを使用しています。
地図画像の使用については地図の共有、埋め込み方法についてをご確認ください。
また、手順説明に使用してるGoogleのホームページ、プロダクトページなどのキャプチャ画像についてはガイドラインに従った形で掲載しています。
詳しくはGoogle ブランド使用許諾ブランド利用規約の概要、よくある質問の内容をご確認ください。
（※上記説明内では、「必ず一切加工せずに使用してください。」と記載がありますが。当サイトで使用する場合、個人情報等保護のため、一部モザイク処理をしています。）
万が一、当サイトに規約違反となる画像等を発見した場合は、直ちにご報告ください。
尚、当サイトに掲載されている文章、画像等の著作権は、当社または文章、画像等の提供者にあります。これらの著作物は、「私的利用のための複製」や「引用」などの著作権法上認められた場合を除き、無断で転用・引用することはできません。ご利用になりたいものがありましたら、Google＋よりお問い合わせください。

Maps Flow!

このブログを検索