LUNARAVE WEBクリエイターの仕事と休息

アクセスカウンタ

Google Maps APIの利用戦国IXAWeb技術Youtubeチャンネル

zoom RSS Google Mapの利用 -(8)マーカーの複数設置-

<<   作成日時 : 2008/05/27 12:36   >>

ブログ気持玉 0 / トラックバック 0 / コメント 0

"Google Map"のFlash版が公開されたのでJavaScript版との併用に悩むところだが、CGIと連携させるのであればJavaScript版の方が開発しやすいのでまだまだ利用用途はありそうだ。

今回は、マーカーを複数設置したいと思う。


これまでの参考例に手を加えていくことにする。

 サンプルマップ


現在はサンプル地図に"大阪駅"にマーカーを設置している状態なので、これに南にある"なんば駅"へもマーカーを設置する。


//▼マーカー
var myicon = new GIcon();
myicon.image="img/mark_00.png"; //マーカー画像
myicon.shadow="img/sha_00.png"; //マーカー影
myicon.iconSize = new GSize(30,36); //マーカーサイズ
myicon.shadowSize = new GSize(50,36); //影サイズ
myicon.iconAnchor = new GLatLng(1,23); //マーカー位置
myicon.infoWindowAnchor = new GLatLng(10,10); //コメント位置

var marker = new GMarker(new GLatLng(34.702777,135.495179),myicon);
GEvent.addListener(marker,"click", function() {
marker.openInfoWindowHtml("大阪駅");
});
map.addOverlay(marker);
//▲マーカー



これに5行追記する。


//▼マーカー
var myicon = new GIcon();
myicon.image="img/mark_00.png"; //マーカー画像
myicon.shadow="img/sha_00.png"; //マーカー影
myicon.iconSize = new GSize(30,36); //マーカーサイズ
myicon.shadowSize = new GSize(50,36); //影サイズ
myicon.iconAnchor = new GLatLng(1,23); //マーカー位置
myicon.infoWindowAnchor = new GLatLng(10,10); //コメント位置

var marker = new GMarker(new GLatLng(34.702777,135.495179),myicon);
GEvent.addListener(marker,"click", function() {
marker.openInfoWindowHtml("大阪駅");
});
map.addOverlay(marker);

var marker2 = new GMarker(new GLatLng(34.66356103107111, 135.5018788576126),myicon);
GEvent.addListener(marker2,"click", function() {
marker.openInfoWindowHtml("なんば駅");
});
map.addOverlay(marker2);
//▲マーカー



"myicon"というマーカーのオブジェクトを用意しているので、それに座標とクリックしたときの表示文字を与えただけだ。

ただ、"marker"という変数は既に利用しているので"marker2"としている。


 サンプル


今回は"marker"に手動でナンバーリングしたが、プログラムで動的に生成する場合はfor文などでナンバーを自動的に付加するようにすればよい。

ただ、数が多くなるとそれだけ表示するまでに時間がかかったりブラウザに負担をかける。

50件程度ならUSB端子がない古いノートパソコンでもストレス無く表示されたので、この程度が目安だろう。

テーマ

注目テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文
Google Mapの利用 -(8)マーカーの複数設置- LUNARAVE WEBクリエイターの仕事と休息/BIGLOBEウェブリブログ
文字サイズ:       閉じる