ニュース項目: : GoogleMapsをe107で使う
(カテゴリー: Misc)
投稿者: difda
2006年 10月21日( 土曜日) - 13:15:50

GoogleMapsとkmlファイルを利用して地図を表示できないかと考えプラグインを作ろうかと考えていたんですがなんとかカスタムページで作れましたので方法を心覚えのためにも載せておきます。
1.まずGoogle MAPS APIのキーを取得します。その取得の仕方がわからないときは、 http://www.geekpage.jp/web/google-maps-api/signup.php  などのサイト参考にしてください。

2.次に http://taketan.mydns.jp/xoops/modules/bwiki/?KML2GMAP のサイトからKML2GMAP.zipをダウンロードしてきます。

3.それを解凍し出来たKML2GMAPフォルダをそのままe107_filesとかe107_pluginsなどのフォルダと同じところにアップします。

4.そしてe_files/public/にkmlというフォルダーを作ります。ここにkmlファイル(場所などの情報の入ったxml形式のファイル)を保存します。

事前準備はこれで完了。

5.kmlフォルダに利用したいkmlファイルをアップします。

6.次にカスタム メニュー/ページをくりっくし、ページの作成をクリックします。

7.ページの作成でのメインの作業は本文に次のスクリプト書き込みます

<script src="http://maps.google.com/maps?file=api&v=2.x&key=(1)***------****" type="text/javascript" charset="UTF-8"></script> 
<script src="/kml2gmap/kml2gmap.js" type="text/javascript" charset="(2)EUC-JP"></script> 
<script type="text/javascript"> 
//<![CDATA[
onloadfunc.push(function() );
  mapType = 0;
  customIcon = 0;
  strListFormat = "%subject% ";
 setkml2gmap( "MAPNAME", "/e107_files/public//kml/(3)football_stadium.kml");
});
//]]> 
</script> 
<div id="MAPNAME" style="width:100%; height:600px"></div> 
<div id="MAPNAME_List" ></div>



※(1)Google MAPS APIのキー

※(2)もし、スクリプトUTF-8でアップしたときは"UTF-8"とします

※(3)表示したいkmlファイル名 これで動きましす。

例サイト:http://difda.stellar8.com/page.php?8

細かい設定の仕方は上記 http://taketan.mydns.jp/xoops/modules/bwiki/?KML2GMAP 及び解凍したフォルダに 入っているhtmlを参考にしたください。

最後にKML2GMAPを作られたTaketanさんに謝意を表します。

投稿者 by difda


このニュースの掲載元は: e107で遊ぼう屋
( http://e107jp.stellar8.com/comment.php?comment.news.80 )