【Maps JavaScript API】マーカーを配置・削除するボタンを設置してみよう

今回は以前解説した「マーカーを追加する方法」をベースに、マーカーを配置・削除する方法について解説していきたいと思います。

マーカーを地図から削除する

まず、「マーカーを追加する方法」の手順に沿って、地図にマーカーを設置しましょう。
削除ボタンをクリックした時のイベントには、マーカーを削除する処理を行いたいと思います。
地図に配置したマーカーを地図から削除するには、「setMap」メソッドを使い引数に"null"を指定します。

//マーカーを地図から削除する
marker.setMap(null);

マーカーを削除する処理の記載方法は、これだけです。とても簡単ですね。

マーカーを地図に配置する

それでは次に、削除されたマーカーを再度配置させるために、配置ボタンをクリックした時のイベントに、マーカーを配置する処理を行いたいと思います。
地図にマーカーを配置するには、削除の時と同様、「setMap」メソッドを使い引数に"map"を指定しましょう。

//地図にマーカーを配置する
marker.setMap(map);

これで、配置ボタンと削除ボタンをクリックした時に、マーカーが配置されたり削除される処理を確認することができるようになります。
それでは、以下サンプルで全体のソースと実際の挙動を確認してみましょう。

マーカーを配置・削除するボタンを設置する

 <script>
var map, marker;
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,
  map: map,
 });
}
//削除ボタンクリック時にマーカーを削除
function del() {
 marker.setMap(null);
}
//配置ボタンクリック時にマーカーを配置
function set() {
 marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>

サンプルページはこちら

マーカーを非表示にする

マーカーを削除せずに、地図に配置したままの状態で非表示にしたいというケースもあります。
そのような時には、Markerクラスで用意されている「setVisible」メソッドを使って非表示にしましょう。

//マーカーを非表示にする
marker.setVisible(false);

引数に"true"を指定するとマーカーが表示され、引数に"false"を指定するとマーカーが非表示になります。
尚、上記メソッドを使う代わりに、MarkerOptionsオブジェクトの「visible」プロパティに"false"を指定しても同様に非表示となりますので、どちらを使用しても問題ありません。

以上でマーカーを配置・削除する方法の解説を終わります。
マーカーを配置、削除、非表示するなどの処理はとても頻繁に使います。
今回のサンプルでは1つのマーカーに対して処理させていますが、実際に地図システムを開発する場合、大量のマーカーの同時に処理させる必要性が出てくることでしょう。
まずは、基本の動作をしっかりと理解した上で、徐々に活用できる機能へと発展させていきましょう。

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

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

Tweet