スポンサードリンク

Tag Archives: マーカー

ルート検索のドライブルートのポリライン(Polylines)を複数地図に表示させる/ルート検索API(Direction API)

◆Google Maps API V3 ルートのポリライン(Polylines)を複数地図に表示させる

ちょいと時間があったので、DirectionsRendererを個別関数それぞれにぶちこんでルート検索をさせてみた。

いくつものルートが表示できるので面白い。

試しに何本程度ポリラインが表示できるのか? 何本ルートを表示したらブラウザが重くなるのか?

・・・・・・・なんて興味だけで、サンプル作成中の都合のよいマップがあったので、東京のとある地点から全国に散ったマーカまでのルート検索を実行し、ポリラインをnullで消さずに追加していった。

Read more »

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

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

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

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

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

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

Read more »

XMLファイルから読み込んだマーカー(アイコン)の配列についての検証(2次元配列を理解してみる)


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

◆ Google Maps API v3 / XMLファイルから読み込んだマーカー(アイコン)の配列についての検証

1. 2次元配列

google mapsでたくさんのマーカーを表示させる方法とてfor文が使われていますが、実際はどうなっているのか?

試してみました。

配列を記述したサンプル地図ですが、配列が4列、要素が9行になります。従って、2次元配列で各配列の要素を指定できることになるそうです。

[‘公園1′, 35.760191,140.061629,’kouen’],
[‘公園2′, 35.643033,139.860592,’kouen’],
[‘公園3′, 35.596286,140.141172,’kouen’],
[‘温泉1′, 35.805307,140.16651,’onsen’],
[‘温泉2′,35.717602,139.980167,’onsen’],
[‘温泉3′, 35.42295,139.89739,’onsen’],
[‘水族館1′,36.333294,140.593817,’suizokukan’],
[‘水族館2′, 35.442851,139.644607,’suizokukan’],
[‘水族館3′, 35.728681,139.719765,’suizokukan’]

Read more »

外部XMLファイルでなく内部ソースにマーカー用の配列を記述する。


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

◆ Google Maps API v3 / 外部XMLファイルの変わりにjavascript内にマーカー用の配列を記述する。

XMLファイルを横にらみしながらですと判りずらいので、配列データをコード内に用意します。こんな感じで

	var markers =
	[
	['公園1', 35.760191,140.061629,'kouen'],
	['公園2', 35.643033,139.860592,'kouen'],
	['公園3', 35.596286,140.141172,'kouen'],
	['温泉1', 35.805307,140.16651,'onsen'],
	['温泉2',35.717602,139.980167,'onsen'],
	['温泉3', 35.42295,139.89739,'onsen'],
	['水族館1',36.333294,140.593817,'suizokukan'],
	['水族館2', 35.442851,139.644607,'suizokukan'],
	['水族館3', 35.728681,139.719765,'suizokukan']
	];

左から、ココの要素の名称、座標lat,lng、カテゴリ分けをするための「kouen」「onsen」「suizokukan」です。

Read more »

影付きのカスタムアイコン(マーカー)を作成できるサイト/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

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

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

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

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

Read more »

Google Map(地図)にアイコン(マーカー)を表示させる。

地図を表示させることが出来たら、こんどはマーカー(アイコン)を表示させてみましょう。

var markerでアイコンを表示させます(朱書き部)。座標(経度、緯度)は東京タワー、座標収得はコチラ

◆記述

1)Head文

Read more »

カスタムアイコン(マーカー)用の影を簡単に作成できるGoogle Maps API Icon Shadowmaker for Google Maps v3

Google Mapsの標準アイコン(マーカー)にないアイコンを使いたい場合、影をどうするか悩んでいたら、何とまあ、便利なものが・・・・for Google Maps v3とありますが、v2で問題なく影付きのマーカーが作成できました。

便利なのでお試しを・・・これで、いろんなアイコンを地図に表示できるようになりますので、マーカーの種類が増えてしまいそうです。

Read more »

2 / 3123

スポンサードリンク