Google Mapの利用 -(8)マーカーの複数設置-
<<
作成日時 ： 2008/05/27 12:36
>>
トラックバック 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端子がない古いノートパソコンでもストレス無く表示されたので、この程度が目安だろう。
|
