スポンサードリンク

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

影付きのカスタムアイコン(マーカー)を作成できるサイト/Google Map Custom Marker Maker


◆ Google Maps API v3 /影付きのカスタムアイコン(マーカー)を作成できるサイト

この「Google Map Custom Marker Maker」 と言うサイト。結構重宝。

以前、同様なカスタムアイコン(マーカー)用の影を簡単に作成できるGoogle Maps API Icon Shadowmaker for Google Maps v3を紹介したが、本日アクセスできなかったので、他のサイトを探していて発見。

自分のPCにあるPNG、GIFファイルからgoogleマップ用のカスタムアイコンを容易に製作できますのでお試しあれ。

Read more »

マーカー(アイコン)の種類、画像、サイズ、位置、影を変更する/Google Maps API V3 (new google.maps.Marker / new google.maps.MarkerImage)

◆ Google Maps API v3 マーカー(アイコン)の種類、画像、サイズ、位置、影を変更する

V3グーグルマップのアイコン(マーカー)の種類を変更するには、いくつかのscriptの書き方があるようです。

まあ用途で使い分ければいいと思いますが・・・・

<サンプル1>

もっとも良く見かける基本のscriptです。単一のマーカー用のイメージ画像とシャドウ(影)を指定しています。

var icon = new google.maps.MarkerImage(
'http://maps.google.co.jp/mapfiles/ms/icons/tree.png',
new google.maps.Size(34,34),
new google.maps.Point(0,0),
new google.maps.Point(37,34)
);

var shadow = new google.maps.MarkerImage(
'http://maps.google.co.jp/mapfiles/ms/icons/tree.shadow.png',
new google.maps.Size(34,34),
new google.maps.Point(0,0),
new google.maps.Point(37,34)
);

var marker = new google.maps.Marker(
{
draggable: true,
raiseOnDrag: false,
icon: icon,
shadow: shadow,
//shape: shape,
map: map,
position: point
});

Read more »

マーカーアニメーションクラス アイコンが降ってきたり、飛び跳ねたり!

◆ Google Maps API v3 / マーカーアニメーション Class

日本語のブラウザでアニメーションクラスを検索し、日本語版リファレンスへ飛んでも記載なし。英語版で確認してください。

google.maps.Animation class

現在、サポートされているmarkerのAnimations classは、”DROP”と”BOUNCE”

*  DROPは、マーカー表示の際に上から落ちてくるアニメーション。
* BOUNCEは、クリックイベントで飛び跳ねるアニメーションが可能。
面白いので、実装してみては?
Read more »

Google Maps API v3 + サイドバー(sidebar, marker list)をクリックしてインフォウィンドウ(infowindow)を表示させる

◆ Google Maps API v3 サイドバー(sidebar)をクリックしてinfowindowを開く

グーグルマップの外側に、アイコン(マーカー)をクリックしたときと同じように、インフォウィンドウ(infowindow)を開くことの出来るサイドバー(sidebar)(※マーカーリストともいうのか?)を追加してみる。

今回は、私的に苦戦。Googel先生のデモ、スプレッドシートからの読み込みも最後にうまく動かん・・・やりたいことが出来ん。V3サイドバー付きの良いサンプルも見当たらない?何故?

まあ、結局はV2版参考にせこせこ変更して出来たのだが・・・・・・・V3+サイドバー。遅いと評判のブラウザIE7で、約120マーカーを読み込むとサイドバーのせいか非常に遅い!!

これでは、使えんな。次のサンプルをIE7でお試しください。

<サンプル地図> Read more »

PHP+MySQL(XMLファイル生成)+Google Maps API V3/地図表示サンプル

とりあえずMySQLからデータを引っぱって表示させてみた。 せっかくなので、Googelコードを試す。参照ページは「Google マップと PHP/MySQL を使用」。このページ、以前はV2だったが、V3用に変わっていた。下記サンプル地図の表示マーカー数は、172マーカー。ちと重いかな。 iPhone(アイフォン)でサンプル地図をWi-Fiでなく3G回線で読み込んでみたが、まあ動くでないの。Google Maps API V3のスマートフォン対応恐るべし。次回は、MarkerClusterer+PHP+MySQL(XMLファイル生成)+Google Maps API V3を練習する予定。 ◆Script記述 Read more »

常にインフォウィンドウを1つだけ表示する方法/Google Maps JavaScript API V3

◆インフォウィンドウを1つだけ表示する方法

Google Maps API v3で気がついたのがインフォウィンドウの開き方。一度クリックファンクションであるマーカーのインフォウィンドウを開くと、次のアイコンをクリックしてもそのまま残ってしまう。

XMLファイルを読み込んで表示する練習をしていた時は、気づかなかった。何故かって、インフォウィンドウが常に一つだから。

しかし、アイコンの種類を変更するサンプルを作成時、次のアイコンをクリックしても前のインフォウィンドウが消えないことに気が付きました。

え~。V3では、わざわざcloseコマンドを使わなければ、インフォウィンフドウを閉じることが出来ないようだ。

良くわからんので、Googleのサンプルを探してたらありました。

Read more »

ドラッグ&ドロップマウスで移動可能なマーカ(アイコン)の指定方法/Google Maps API v3

◆Google Maps API V3 のドラッグ・アンド・ドロップを可能にするマーカ(アイコン)の変更

遊び半分で、マーカー(アイコン)をマウスで移動できるようにするのは、どうでしょうか。ルート検索以外に使い道は無いものか・・・・。

まあ、何かに使えるかも。

マーカー(アイコン)をドラッグ&ドロップで移動できるようにするのは、非常に簡単。

Read more »

Google Maps API v3 アイコン表示能力は? 表示可能なたくさんの大量マーカー(アイコン)の数は?

お遊びで、このマップ(V2)で700マーカー以上のたくさんのマーカー(アイコン)を表示させているXMLファイル(MySQL+PHPで生成)をGoogle Maps API V3で読み込んで表示させてみた。 驚いた。大量のマーカにもかかわらず、まず本当に数秒で地図上にマーカー(アイコン)が表示される。 IE7のように遅いブラウザの場合、まず地図に表示されるまでに数十秒かかるのだが、ほんの数秒でOK。 Read more »

マーカーのアイコン種類を変更する+影指定/Google Maps JavaScript API V3

Google Maps API V3 の標準マーカのアイコン種類の変更

やはりアイコンの種類をいろいろ変えたいですよね。

取り急ぎ、下記3つメモ。複数マーカーのアイコンを変更するスマートな方法はないでしょうかね。

Read more »

2 / 212

スポンサードリンク