複数のマーカーに別々のふきだしを表示する

| コメント(0) | トラックバック(0)

最初は地道に個数分マーカープログラムを並べる方法です

var point = new GPoint(139.69167,35.68949);
var pophtml1 = '<div style="width: 200px; font-size: 12px">東京都</div>';
var marker = new GMarker(point);
GEvent.addListener(marker1, "click", function() {
marker1.openInfoWindowHtml(pophtml1);
});
map.addOverlay(marker1);

たとえば関東地方の7都道府県を表示したければこれを7つ並べなければなりません。
また、赤文字部分の数字をマーカー毎に変更しなければならないので効率が悪すぎます。
サンプル1

そこで改良版を作りました。
データベースなどから取得してきたデータを一気に表示するようにしました。

function make_marker(){

  get_data = '茨城県,栃木県,群馬県,埼玉県,千葉県,東京都,神奈川県
<>140.44717,139.88347,139.06062,139.649,140.12313,139.69167,139.64259
<>36.34108,36.56555,36.39093,35.85742,35.60455,35.68949,35.4477';

  get_data_split = get_data.split("<>");

  ken_name = get_data_split[0].split(",");
  point_lon = get_data_split[1].split(",");
  point_lat = get_data_split[2].split(",");

  for(i=0;i<point_lon.length;i++){
    var point = new GPoint(point_lon[i],point_lat[i]);
    var pophtml = '<div style="width: 200px; font-size: 12px"><B>'+ken_name[i]+'</B>を表示しています</div>';
    var marker = show_marker(point,pophtml);
    map.addOverlay(marker);
  }
}

function show_marker(point,pophtml){

  var marker = new GMarker(point);

  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(pophtml);
  });
  return marker;
}
make_marker();

get_data = '';に三つの要素「県名、経度、緯度」を<>区切りで入れてください。
(画面の都合上改行されていますがデータは一行にまとめて入力してください)
また各々の要素は、カンマ区切りでいくつでも追加できます。
最後に、make_marker();を実行するとマーカーが全て表示されます。
サンプル2

トラックバック(0)

トラックバックURL: http://blog.gpso.info/mt_mgr/mt-tb.cgi/18

コメントする

このブログ記事について

このページは、nnnが2006年8月 4日 01:45に書いたブログ記事です。

ひとつ前のブログ記事は「Google Maps で全国オービスマップ」です。

次のブログ記事は「機種毎にメインページを振り分ける」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。