GoogleMapsAPIを記事や静的ページで表示する
提供: GeeklogJpWiki
※ 現在では，高機能なGoogleMapsAPIプラグイン(tkgmaps)が公開され，複数ポイント，バルーン自由指定が可能になり，以下のハックをする必要がなくなりました。GoogleMapsAPIプラグインは，Geeklog1.5日本語拡張版パッケージで標準となりましたので，そちらをご利用ください。その場合，以下のハックは不要です。
作者：豆腐屋（Geeklog Japanese 掲示板より）
GoogleMapsAPIを iframe を使用しないで直接記述できます。また， iframe を使う場合でも緯度経度や大きさを引数で指定できるHTMLを設置すると便利です。
目次 |
準備
緯度・軽度の算出
- 緯度・軽度は，[Geocoding http://www.geocoding.jp/]を利用すると便利です。
住所やランドマーク名から経度、緯度を検索します。世界測地系（WGS84）に対応。 日本測地系（TOKYO97）っぽい座標出力、携帯用QRコード出力、Google Earth連携、はてなマップ連携などが行なえます。
Google Maps API
Google Maps API key を次のリンクから取得します。
http://www.google.com/apis/maps/signup.html
header.thtml
変更前：
<body class="js_off" >
変更後：
<body class="js_off" onload="OnloadBody()">
<script type="text/javascript"> function OnloadBody(){ } </script>
静的ページの場合には以上の修正で動作します。
記事の場合には，さらに次の本体ソース２つを修正します。
(記事本文に限ります。冒頭文はjavascriptが干渉するので不可です)
非公開ディレクトリ/system/lib-story.php
変更前：
$bodytext = str_replace( '{', '{', $bodytext );
$bodytext = str_replace( '}', '}', $bodytext );
変更後：
$bodytext = preg_replace('/{([^ \t\r\n}]+)}/','{\\1}',$bodytext);
公開ディレクトリ/admin/story.php
変更前：
$newbody = str_replace('{','{',$newbody);
$newbody = str_replace('}','}',$newbody);
変更後：
$newbody = preg_replace('/{([^ \t\r\n}]+)}/','{\\1}',$newbody);
記事の本文で利用する方法
<script src="http://maps.google.com/maps?file=api&v=2.x&key=@@@@@" type="text/javascript" charset="utf-8"></script>
<!--// key=@@@@の値は各自のキーを使用してください//-->
<div id="map" style="padding:0px;"></div>
<script type="text/javascript">
//<![CDATA[
var lat = 35.658725884775244; //緯度
var lng = 139.74541783332825; //経度
var zoom = 16; //ズーム
var wid = "400"; //地図の幅
var hei = "400"; //地図の高さ
var mar = "0"; //地図の余白
var title =''; //情報ウィンドウに表示
var mapstyle = document.getElementById("map").style;
mapstyle.width = wid + "px";
mapstyle.height = hei + "px";
mapstyle.margin = mar + "px";
function OnloadBody(){
var point = new GLatLng(lat,lng);
var map = new GMap2(document.getElementById("map"));
map.setCenter( point , zoom );
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());
var marker = new GMarker( point );
map.addOverlay(marker);
if(title){
GEvent.addListener(marker,"click",function(){
marker.openInfoWindowHtml(title);});
}
}
//]]>
</script>
事例
記事の本文に地図を設置した例
http://sample.ivywe.jp/article.php/20070505125938570
スタティックページに地図を設置した例
http://www.ivywe.co.jp/staticpages/index.php/access
自動タグで便利な利用法
自動タグ（Autotags）プラグインを利用すると，記事や静的ページに簡素なコードでGoogleMapsを利用できます。
まず，自動タグプラグインをインストールして，googlemapsの名前で自動タグを作成します。 自動タグ本文には，以下の記述を行っておきます。
<script src="http://maps.google.com/maps?file=api&v=2.x&key=@@@@" type="text/javascript" charset="utf-8"></script> <!--// key=@@@@の値は各自のキーを使用してください//-->
<script type="text/javascript">
//<![CDATA[
var lat = #1; //緯度
var lng = #2; //経度
var zoom = 16; //ズーム
var wid = "400"; //地図の幅
var hei = "400"; //地図の高さ
var mar = "0"; //地図の余白
var title =''; //情報ウィンドウに表示
var mapstyle = document.getElementById("map").style;
mapstyle.width = wid + "px";
mapstyle.height = hei + "px";
mapstyle.margin = mar + "px";
function OnloadBody(){
var point = new GLatLng(lat,lng);
var map = new GMap2(document.getElementById("map"));
map.setCenter( point , zoom );
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());
var marker = new GMarker( point );
map.addOverlay(marker);
if(title){
GEvent.addListener(marker,"click",function(){
marker.openInfoWindowHtml(title);});
}
}
//]]>
</script>
これで，記事や静的ページには，
[googlemaps:35.12345 139.12345]
のように，簡素なコードを追加するだけでどこにでも貼り付けることが可能です。
