地図に表示したマーカー(アイコン)をクリックして削除する方法
この記事(地図をクリックして、マーカー(アイコン)を追加/全てのマーカー(アイコン)を一括で削除する方法)のソースに、マーカークリックイベントを追加し、setMapメソッドにnullを指定すればok。
スポンサードリンク
地図に表示したマーカー(アイコン)をクリックして削除する方法
この記事(地図をクリックして、マーカー(アイコン)を追加/全てのマーカー(アイコン)を一括で削除する方法)のソースに、マーカークリックイベントを追加し、setMapメソッドにnullを指定すればok。
このデモマップに複数のマーカーを表示させることは出来ますか?・・とのコメントを頂きました。出来ます。基本的にもともとのソースは変更せずに、足りないソースを追加していきます。
1.アイコンの表示設定
地図にどんなアイコンを表示させましょうか。Google Mapの標準アイコンもあれば、自作アイコンなどもありますよね。ここでは、Googel Mapで使用されている標準アイコンを使うことにします。
表現のソースはコチラのページ ”マーカー(アイコン)の種類、画像、サイズ、位置、影を変更する” の「サンプル4」にしましょう。
メトロアイコンを手軽に作成できるMetro Studioが無料で配布されていました。
499ドルが現在無料です。
タイ バンコクの鉄道路線図(Bangkok Thailand Rail Line)作成に使ってみました。(記事)
コメントを頂いたので、StreetViewのコネクティングマップにマーカーを表示させてみます。
MySQLではソースが判りにくいかと・・・・・この記事で作成していた地図と このデモサンプル(マップコネクト)を掛け合わせて少し調整して完成。
Google Maps Api の日本語リファレンスにはありませんが、英語リファレンスでは、panoramio(パノラミオ)のライブラリーが使えるようになっています。左が日本語リファレンス、右が英語版。
英語版の右下方に、panoramioのレイヤー(写真ライブラリ)が使えるリファレンスがあります。地図上に小さな写真のサムネイルを表示することが出来、クリックするとインフォウィンドウの中に写真が表示されます。このレイヤーオプションのプロパティ設定で、検索タグ指定で特定の写真のみを地図上に選択して表示させたり、インフォウィンドウの非表示設定などが出来るようになっています。
、表示と、そのオプション(写真をクリック)
移動可能なマーカー(アイコン)をドラッグ&ドロップ(飛び跳ねるアニメーションでなく、スライドさせる指定です。(飛び跳ねるアニメーションの場合はコチラ)
スケートリンクを移動させるイメージですな。
マーカー(アイコン)をスライドで移動できるようにするためには、draggableだけでなく、raiseOnDrag指定する必要があります。
なお、日本語リファレンスには、載っていないので英語版からの紹介です。
取り急ぎですので、概要のscriptを紹介。このサンプル(iPhone用マーカー表示の高速化)で動作がわかるかと思います。
正確には、配列(XMLファイルやデータベース)からマーカーデータを読み込んだ時に、既存の配列の要素と比較して、同じ要素があった場合、同一のマーカーとみなす策です。
この案を流用すれば、同じマーカーを読み込まなくて済むようになる案が作成できると思います・・・・・。
iPhone(アイフォン)等のマーカーの読み込みが遅いモバイル用マップには必須のテクニックですが、実際にはPC用マップでは不要かもしれませんね。
しかしながら、マーカーを読み込む都度、マーカーがちらつく(フリッカ)するのを防ぐこともできるすぐれものです。また、同じマーカーを読み込むとマーカー(アイコン)やインフォウィンドウの影が濃くなる事象を回避することもできますね。
詳しくは、mobile geo social(英語)を参照下さい。
2011/09/29) 高速化(マーカーの再読み込みをしない)のテクニックを使ったiPhone(アイフォン)用マップを、この記事(目的地アイコン(マーカー)をクリックして、ルート検索結果と距離を表示させる方法の続き)の末尾に追加紹介しました。
<目次>始めに地図を読み込んだ時、複数のマーカーから任意の一つのインフォウィンドウ(infowindow)を最初から表示する。
前回作成した地図にインフォウィンドウ(吹き出し)を地図の中心に表示させるためのコードを追加しておきます。
map.panToを使います。とりあえずクリックイベントに追加。これで、マーカーをクリックすると地図の中心座標にインフォウィンドウが表示されることになります。あとで、地図が初期表示されたときのインフォウィンドウも同じコードで地図の中心座標に表示させます。
スポンサードリンク