スポンサードリンク

Category Archives: Google Maps API v3 アイコン&マーカー

マーカー(アイコン)をクリックして、そのマーカーを消す

地図に表示したマーカー(アイコン)をクリックして削除する方法

この記事(地図をクリックして、マーカー(アイコン)を追加/全てのマーカー(アイコン)を一括で削除する方法)のソースに、マーカークリックイベントを追加し、setMapメソッドにnullを指定すればok。

  Read more »

地図をクリックして、マーカー(アイコン)を追加/全てのマーカー(アイコン)を一括で削除する方法

1.地図をクリックして、マーカー(アイコン)を追加する方法

ポイントは、次の通り

1-1.グローバル変数に、var markersArray = [];を指定

1-2.マップをクリックしたらマーカー追加のイベントを記述

google.maps.event.addListener(map, ‘click’, function(event)
{
marker = createMarker(event.latLng);
markersArray.push(marker);
});

関数function createMarker(latlng)へ渡す

 

2.全てのマーカー(アイコン)を一括で削除する方法

2-1.リセットボタンを設置

<div><a href=”#” onclick=”clearMap();return false;”>リセット</a>

2-2.関数clearMap() の設置/配列を空に

function clearMap()
{
for (var i = 0; i < markersArray.length; i++ )
{
markersArray[i].setMap(null);
}
markersArray = [];
}

Read more »

アイコンが表示されていないただの地図にアイコン(マーカー)を追加する方法

 

このデモマップに複数のマーカーを表示させることは出来ますか?・・とのコメントを頂きました。出来ます。基本的にもともとのソースは変更せずに、足りないソースを追加していきます。

 

1.アイコンの表示設定

地図にどんなアイコンを表示させましょうか。Google Mapの標準アイコンもあれば、自作アイコンなどもありますよね。ここでは、Googel Mapで使用されている標準アイコンを使うことにします。

表現のソースはコチラのページ ”マーカー(アイコン)の種類、画像、サイズ、位置、影を変更する” の「サンプル4」にしましょう。

Read more »

手軽にGoogle Map用のアイコンに利用出来るメトロスタジオMetro Studio2(今なら無料)

メトロスタジオMetro Studio1は、アイコンのサンプルも少なく、自分で自由にGoogle Map用のアイコンが作れなかったのですが、Metro Studio2(いまなら無料)は、いいです。

 

手軽にGoogle Map用のアイコンに利用出来るメトロスタジオMetro Studio2(今なら無料)

 

 

Read more »

手軽にアイコンを作成できるメトロスタジオMetro Studio 無料

メトロアイコンを手軽に作成できるMetro Studioが無料で配布されていました。

499ドルが現在無料です。

タイ バンコクの鉄道路線図(Bangkok Thailand Rail Line)作成に使ってみました。(記事

 

metrostudio

 

  Read more »

Google Street View(ストリートビュー)のConnecting MapにMarkerを表示させるサンプルデモ(Demo)

コメントを頂いたので、StreetViewのコネクティングマップにマーカーを表示させてみます。

MySQLではソースが判りにくいかと・・・・・この記事で作成していた地図と このデモサンプル(マップコネクト)を掛け合わせて少し調整して完成。

  Read more »

Google Map にパノラミオ(panoramio)の写真サムネイルを地図にオーバーレイ(overlay)表示させる

◆ Google Maps API v3  パノラミオ(panoramio)の写真オーバーレイ(overlay)を表示させる

Google Maps Api の日本語リファレンスにはありませんが、英語リファレンスでは、panoramio(パノラミオ)のライブラリーが使えるようになっています。左が日本語リファレンス、右が英語版。

英語版の右下方に、panoramioのレイヤー(写真ライブラリ)が使えるリファレンスがあります。地図上に小さな写真のサムネイルを表示することが出来、クリックするとインフォウィンドウの中に写真が表示されます。このレイヤーオプションのプロパティ設定で、検索タグ指定で特定の写真のみを地図上に選択して表示させたり、インフォウィンドウの非表示設定などが出来るようになっています。

、表示と、そのオプション(写真をクリック)

 

Read more »

マウスドラッグでアイコン(マーカー)をスライドして移動可能にする。google.maps.MarkerのraiseOnDragの指定方法

◆Google Maps API V3 のアイコン(マーカー)をスライドして移動可能にする。raiseOnDragの指定

移動可能なマーカー(アイコン)をドラッグ&ドロップ(飛び跳ねるアニメーションでなく、スライドさせる指定です。(飛び跳ねるアニメーションの場合はコチラ

スケートリンクを移動させるイメージですな。

マーカー(アイコン)をスライドで移動できるようにするためには、draggableだけでなく、raiseOnDrag指定する必要があります。

なお、日本語リファレンスには、載っていないので英語版からの紹介です。

Read more »

地図表示の高速化。同じマーカー(アイコン)のを地図に読み込まないようにする配列の再利用方法

取り急ぎですので、概要のscriptを紹介。このサンプル(iPhone用マーカー表示の高速化)で動作がわかるかと思います。

正確には、配列(XMLファイルやデータベース)からマーカーデータを読み込んだ時に、既存の配列の要素と比較して、同じ要素があった場合、同一のマーカーとみなす策です。

この案を流用すれば、同じマーカーを読み込まなくて済むようになる案が作成できると思います・・・・・。

iPhone(アイフォン)等のマーカーの読み込みが遅いモバイル用マップには必須のテクニックですが、実際にはPC用マップでは不要かもしれませんね。

しかしながら、マーカーを読み込む都度、マーカーがちらつく(フリッカ)するのを防ぐこともできるすぐれものです。また、同じマーカーを読み込むとマーカー(アイコン)やインフォウィンドウの影が濃くなる事象を回避することもできますね。

詳しくは、mobile geo social(英語)を参照下さい。

 

2011/09/29) 高速化(マーカーの再読み込みをしない)のテクニックを使ったiPhone(アイフォン)用マップを、この記事(目的地アイコン(マーカー)をクリックして、ルート検索結果と距離を表示させる方法の続き)の末尾に追加紹介しました。

 

Read more »

マーカーのインフォウィンドウ(吹き出し)を地図の中心座標に表示させるpanTo()メソッドを使ったサンプル


<目次>始めに地図を読み込んだ時、複数のマーカーから任意の一つのインフォウィンドウ(infowindow)を最初から表示する。

◆ Google Maps API v3 / インフォウィンドウ(吹き出し)を地図の中心に表示させる。

前回作成した地図にインフォウィンドウ(吹き出し)を地図の中心に表示させるためのコードを追加しておきます。

map.panToを使います。とりあえずクリックイベントに追加。これで、マーカーをクリックすると地図の中心座標にインフォウィンドウが表示されることになります。あとで、地図が初期表示されたときのインフォウィンドウも同じコードで地図の中心座標に表示させます。

Read more »

1 / 212

スポンサードリンク