« 白根火山・芳ヶ平のリンドウ | Main | 市川市~習志野市探訪 »

2009.09.12

GoogleMapsで古墳名表示

09091201_2

(google様の都合でapiバージョン1での表示ができなくなったため、この方法は使えなくなりました。)
ここ一週間ほどこれにかかりきりで、ようやくできました。目標は、アイコンの隣に常時名前を表示することで、できれば表示・非表示の切り替えができること。利用できそうなソフトは3種類ほどみつけたのですが、すでにアップしてあるGoogleMapsEditorで生成したhtmlを改変するのに、あまり手間がかからないと思われると思われる「popupmarker」をチョイスしました。作者様には素晴らしいソフトを利用させていただき感謝申し上げます。(作者様には申し訳ないのですが、若干jsをいじらせていただきました。)出来上がりは埼群古墳館から各市町村の地図をご覧ください。今の所、表示・非表示の切り替えはできませんが(また気力が湧きましたら挑戦します)ほぼ満足のいくものとなりました。以下、忘れないうちに覚書です。くどいようですが、前回の続きでGoogleMapsEditorで生成したhtmlの改変です。

1.popupmarkerのサイトからsrcフォルダのpopupmarker.jsとpopupmarker_packed.jsをダウンロードし、適当なフォルダにコピー。例 利用するtakasaki.htmlからみて ../src フォルダ

2.<script src="http://maps.google.co.jp/maps?file=api&v=2&key=(APIキー)" type="text/javascript"></script>を先頭近くの</meta>の次へ移動する。

3.上記に続き
  <script type="text/javascript">
document.write('<script type="text/javascript" src="../src/popupmarker'+(document.location.search.indexOf('packed')>-1?'_packed':'')+'.js"><'+'/script>');
</script> 
  と記述する。jsファイルの指定の前にAPIキーを記述しないと動きません。

4.addGMarker以下を全て(通し番号、経度、緯度、古墳名)のみにする。

 改変前
addGMarker(2,139.0415528,36.29812222,{'Point':{'Latitude':'36.29812222','Longitude':'139.0415528'},'Genre':'あ','Name1':'安楽寺古墳','Name2':'高崎市','Address1':'古墳','Address2':'','Url':'http://sgkohun.world.coocan.jp/GUNMA/takasaki/anrakuzi.html','ImageUrl':'','SubImageUrl':'','Description':''});

 改変後
addGMarker(2,139.0415528,36.29812222,'安楽寺古墳');

 これは、後ででてくる変数dataに古墳名のみがあてられるようにするためです。省略した要素は元々余分な記述(GoogleMapsEditorでオプションを指定しない場合)のようで、消しても問題ありませんでした。

5.GMarkerに変えてPopupMarkerを組み込みます。
 改変前

 function buildGMarker(lng, lat, data){return new GMarker(new GPoint(lng, lat));}

 改変後
 
 function buildGMarker(lng, lat, data){
var opts = {text : "<FONT size='-1'>"+data+"</FONT>"};
var marker = new PopupMarker(new GLatLng(lat, lng), opts);return marker;}

 text以下はフォントサイズや文字装飾が指定できます。PopupMarkerで標準アイコンとその右隣に古墳名が生成されます。

6.function addGMarker以下の()内にマウスイベント処理を追加します。marker.hidePopup()で古墳名を隠す、marker.showPopup()で古墳名を表示します。

 改変前
function addGMarker(markerNo, lng, lat, data){var marker = buildGMarker(lng, lat, data);var point = {'marker':marker,'no':markerNo,'lng':lng,'lat':lat,'data':data};gme_markers.push(point);var f = function(){gme_map.centerAtLatLng(new GPoint(lng,lat));marker.openInfoWindowHtml(buildInfoHtml(point));};GEvent.addListener(marker, 'click', f);var marker_field = document.getElementById('marker_link_'+ markerNo);if(marker_field){marker_field.onmousedown = f;}gme_map.addOverlay(marker);}

 改変後
function addGMarker(markerNo, lng, lat, data){var marker = buildGMarker(lng, lat, data);
var point = {'marker':marker,'no':markerNo,'lng':lng,'lat':lat,'data':data};gme_markers.push(point);var f = function(){gme_map.centerAtLatLng(new GPoint(lng,lat));marker.openInfoWindowHtml(buildInfoHtml(point));marker.hidePopup();};GEvent.addListener(marker,"mouseover", function(){ marker.showPopup();});GEvent.addListener(marker, 'click', f);var marker_field = document.getElementById('marker_link_'+ markerNo);if(marker_field){marker_field.onmousedown = f;}gme_map.addOverlay(marker);}

この例では、アイコンクリックで吹き出しを表示し同時に古墳名を消します。またマウスオーバーで消えた古墳名がまた表示されます。

このままではかなり大きなポップアップが表示され、地図が見づらくなってしまうためjsの一部を改変し、表示エリアを小さくしましたがご勘弁ください。<作者様

後は一括で古墳名の表示・非表示の切り替えができればいいのですが、いい知恵が浮かびません。電子国土では文字データのレイヤー名を指定すれば簡単に命令一発で表示・非表示ができるのですが、GoogleMapsではその方法がわからないのです。

 

|

« 白根火山・芳ヶ平のリンドウ | Main | 市川市~習志野市探訪 »

パソコン・インターネット」カテゴリの記事

Comments

What words..

Posted by: quitle-online | 2010.07.15 at 01:47 AM

Post a comment



(Not displayed with comment.)




« 白根火山・芳ヶ平のリンドウ | Main | 市川市~習志野市探訪 »