コース: JavaScript 実践講座:jQueryでGoogle Maps APIを使ってみよう

今すぐコースを受講しましょう

今すぐ登録して、24,900件以上登録されている、業界エキスパート指導のコースを受講しましょう。

マーカーの削除

マーカーの削除

このレッスンでは Google Maps API を使って 地図上に設置したマーカーを 削除する方法について解説いたします まずはダウンロードしてきた こちらの「 marker_delete 」という フォルダの中に入っている これら3つのファイルを エディターで開いてください そしてこれがそれらのファイルを 開いた状態です これらのファイルを使って 今回のレッスンの 解説を進めていきたいと思います それでは早速レッスンを始めていきましょう それでは javascript.js をエディターで開きます そうすると現状 このようになっていますね これは前回のレッスンから引き続き スカイツリーを地図の中心とした ズームレベルが 16 の地図を制作していて そして そのスカイツリーには マーカーを設置している状態となっています 今回はこのスカイツリーに 設置されたマーカーを 削除する方法についてやってみたいと思います それでは 具体的にプログラムを 書いてみたいと思います 現在はこちらの「 marker.setMap(map); 」で マーカーが設置されている状態ですが これを削除する場合にはこのように書きます 同じく変数「 marker. 」と書いて こちらも同じく「 setMap 」と書きます そして ( ) ; と書いて こちらの「 setMap 」の括弧の中 引数に前回とは違って 「 null 」と書いてあげます この「 null 」とは 中身が何も入っていないデータ という意味になります こうすることによって 設置したマーカーを動的に 削除することができるようになります それでは この状態で javascript.js を 保存します そして index.html をブラウザで開いて 実際にマーカーが削除されているか 確認してみたいと思います こちらの index.html をブラウザで開きます すると ここにマーカーがあったものが 今は消えていますね このようにマップ上に設置したマーカーは 後から簡単に削除することも できるようになっています それではエディターに戻ります 以上でレッスンは終了です 今回は Google Maps API を使って 地図上に設置したマーカーを 削除する方法について解説いたしました 以降のレッスンでは…

目次