Google Maps APIの最近のブログ記事

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

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開発する上で役立ったポイントを解説していきます。

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

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

【参考】東京都庁の経度、緯度
日本測地系・・経度: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 などで表示するデータも
すべて日本測地系、度分秒表示に変換して表示しています。

このアーカイブについて

このページには、過去に書かれたブログ記事のうちGoogle Maps APIカテゴリに属しているものが含まれています。

次のカテゴリはJavaScript + Ajaxです。

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