Google Maps API: 2006年8月アーカイブ

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

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

Google Maps API は無償であなたのWEBページに動く地図が設置できるという
夢のようなサービスです。当サイトはそれを利用して全国オービスマップを作成しています。
地図提供のゼンリンさんにも感謝して使いましょう。
設置は簡単なJavaScript及びHTML言語の知識があると簡単です。
当サイトではそれらの知識があること前提で説明していきます。
JavaScriptに関する質問等はお答えできませんので予めご了承ください。

Google Maps API の導入はこちらのサイトを参考にしました。
・Google MAPS APIプログラミング
・Google Maps API解説

このブログでは主にGpso.info開発する上で役立ったポイントを解説していきます。

まず知っておかなければならないことが、
経度、緯度の表し方がいろいろとあるということです。

まず大きな違いが、日本測地系と世界測地系です。
同じ地点でも、この違いにより世界測地系の方が
南東におよそ450ｍずれた地点を表すことになります。

【参考】東京都庁の経度、緯度
日本測地系・・経度：139.69487、緯度：35.68627
世界測地系・・経度：139.69167、緯度：35.68949

それでは、それぞれの値を変換するにはどうすればいいでしょうか。
次のような式があります。変数の定義は次の通りです。
（ln：入力経度、la：入力緯度、lng：変換後経度、lat：変換後緯度）

日本→世界

lng = ln - la * 0.000046038 - ln * 0.000083043 + 0.010040;

lat = la - la * 0.00010695 + ln * 0.000017464 + 0.0046017;

lng = ln + la * 0.000046047 + ln * 0.000083049 - 0.010041;

lat = la + la * 0.00010696 - ln * 0.000017467 - 0.0046020;

次の違いが度表示、度分秒表示などによる違いです。
（時間の計算で「12分15秒→12．25分」などと同じような変換です）

【参考】東京都庁の経度、緯度
日本測地系（度）・・経度：139.69487、緯度：35.68627
日本測地系（度分秒）・・経度：139.41.41.53、緯度：35.41.10.57

JavaScriptでの変換プログラム例です。
Perl、PHPで使用したい場合は適宜変更してください。

度→度分秒(ddd.mm.ss.ss)
(innum：入力数値(ddd.ddd形式)、outnum：変換後数値)

EH = parseInt(innum);

EM = parseInt((innum-EH)*60);

ES = (innum-EH-(EM/60))*3600;

ESS = (Math.round(ES*10)/10);

if(EM<10){EM = "0"+EM;}

if(ESS<10){ESS = "0"+ESS;}

if((ESS+"").indexOf(".") == -1){ESS = ESS+".0";}

outnum = EH+'.'+EM+'.'+ESS;

度分秒(ddd.mm.ss.ss)→度
(innum：入力数値(ddd.nn.ss.ss形式)、outnum：変換後数値)

tmp_in = innum.split(".");

outnum = parseInt(tmp_in[0])+(((tmp_in[1]*60+parseInt(tmp_in[2])+tmp_in[3]/10)*1000)/3600000);

困ったことに現在の対応状況は
・Google Maps API　【世界測地系】　【度表示】
・mapionなど国内主要地図サイト　【日本測地系】　【度分秒表示】
・AUGPSケータイ　【どちらも可(datum、unit変数で指定)】
と、バラバラですので変換して統一する必要があります。

ということで、当サイトは、Google Maps API などで表示するデータも
すべて日本測地系、度分秒表示に変換して表示しています。