せっかく掲示板 : Google Maps API を使ったカスタマイズ例

Google Maps API を使ったカスタマイズ例

Google ローカルの地図を自分のサイトに追加する事が出来るGoogle Maps APIを使って、せっかく掲示板にGoogleローカルの地図機能を導入する事が出来ます。googleの利用規約によってせっかく掲示板のサンプルとして皆様にご提供する事ができませんので、せっかく掲示板のデータベース機能を使って、Googleローカルを導入する方法をご説明させていただきます。

Googleの発表

Google ローカルの地図を自分のサイトに追加する方法につきまして、日本語のページがほとんどなく唯一日本語のページは、下記ページのみになります。

Google ローカル > Google ローカルの地図を自分のサイトに追加することはできますか

上記ページから、Google ローカルを利用するには、「Google Maps API key」を取得する必要があります。せっかく掲示板へGoogle Maps を導入するには、Google Maps API keyを取得してからになります。

せっかく掲示板のドメイン名にてGoogleにご登録下さい。

カスタマイズ例：Google Maps API を使ったカスタマイズ例　（岐阜県内の食情報MAPを作成しています。）

せっかく掲示板上に設置する上でのご注意

Google Maps APIはUTF-8言語をベースとした、XHTML言語でのホームページに推奨されています。せっかく掲示板は、HTML4.0をベースとしてカスタマイズされておりますので、多少強引なXHTML言語になっております。

有料版アクティブモードにて動作するタイプです。

せっかく掲示板をUTF-8モードにして使用下さい。

せっかく掲示板のアップロード機能を使用しています。

せっかく掲示板のダイジェスト機能を使用し、最新投稿を右側に表示させています。

>> FAQ/UTF-8版のシステムについて
>> FAQ/画像のアップロード機能
>> FAQ/ダイジェスト機能

ソース

■HTML宣言編集

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

■HEAD宣言編集

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css"> <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> <title>タイトル</title> <script src="http://maps.google.co.jp/maps?file=api&v=1&key=取得したAPI KEY" type="text/javascript"></script>

■FORM宣言編集

<table border="0"> <tr> <th scope="row">店名</th> <td><input name="name" type="text" id="name" size="50" /></td> </tr> <tr> <th scope="row">位置</th> <td><input name="op1" type="text" id="op1" size="50" /></td> </tr> <tr> <th scope="row">マーカー</th> <td><textarea name="mes" cols="50" rows="5" id="mes"></textarea> （googleMapsで確認する　136.0000000,50.0000000　と入力する）</td> </tr> <tr> <th scope="row">写真</th> <td><input name="file" type="file" id="icon" size="50" />　 <input name="key" type="password" id="key" size="10" maxlength="8" /> <input type="submit" name="Submit" value="送信" /> </td> </tr> </table>

■MESSAGE宣言編集

BASE1
var point = new GPoint($op1); var marker = new GMarker(point); mes$lot = '<div style="width: 300px; font-size: 12px"><strong>$name</strong><br><br>$mes</div>'; addMarker(map, $op1, mes$lot );

RES1

BASE3

BASE2
<div id="map" style="width:800px; height: 500px;"></div> <script type="text/javascript"> //<![CDATA[ var map = new GMap(document.getElementById("map")); //map.addControl(new GSmallMapControl()); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.setMapType(map.mapTypes[0]); map.centerAndZoom(new GPoint($op1), 2); // Creates a marker whose info window displays the given number function addMarker(map, lat, lng, bhtml) { var point = new GPoint(lat, lng); var marker = new GMarker(point); // Show this marker's index in the info window when it is clicked GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(bhtml); }); map.addOverlay(marker); } var point = new GPoint($op1); var marker = new GMarker(point); mes$lot = '<div style="width: 300px; font-size: 12px"><strong>$name</strong><br><br>$mes</div>'; addMarker(map, $op1, mes$lot ); var offset = new GSize(15,-30); map.openInfoWindowHtml(map.getCenterLatLng(),mes$lot, offset); //]]> </script>

RES2

BASE4

1階層目　ログ表示開始前のHTML
<div id="map" style="width:800px; height: 500px;"></div> <script type="text/javascript"> //<![CDATA[ var map = new GMap(document.getElementById("map")); //map.addControl(new GSmallMapControl()); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.setMapType(map.mapTypes[0]); map.centerAndZoom(new GPoint(136.716614,35.395767),9); // Creates a marker whose info window displays the given number function addMarker(map, lat, lng, bhtml) { var point = new GPoint(lat, lng); var marker = new GMarker(point); // Show this marker's index in the info window when it is clicked GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(bhtml); }); map.addOverlay(marker); } var sekcount = 0;

1階層目　ログ表示開始後のHTML
var offset = new GSize(0,0); map.openInfoWindowHtml(map.getCenterLatLng(), '<div style="width: 400px; font-size:14px;"><p align="center"><strong style="font-size:16px; ">TOPページのコメント</p></div>', offset); //]]> </script> <div id="List" style="position:absolute; left:801px; top:100px; width:180px; z-index:2"> <div><img src="http://www.sekkakuagency.com/image/tool/082.gif" border="0"><a href="掲示板のURL">お店MAP一覧</a></div> <div style="font-size:12px;"><img src="http://www.sekkakuagency.com/image/tool/080.gif">各お店の詳細</div> ダイジェスト機能のタグ </div>
・空白にする場合は必ず半角スペースを入力してください。

２階層目　ログ表示開始前のHTML

２階層目　ログ表示開始後のHTML
<div id="List" style="position:absolute; left:801px; top:100px; width:180px; z-index:2"> <div><img src="http://www.sekkakuagency.com/image/tool/082.gif" border="0"><a href="掲示板のURL">お店MAP一覧</a></div> <div style="font-size:12px;"><img src="http://www.sekkakuagency.com/image/tool/080.gif">各お店の詳細</div> ダイジェスト機能のタグ </div>

■ダイジェスト宣言編集　print=1

<div style="font-size: 10pt"><img src="http://www.sekkakuagency.com/image/tool/right07.gif" border="0"><a href="$bbsurl&mode=res&log=$list" >$name</a></div>

▲

/ SEKKAKU-NET / カウンター / 宿泊施設検索 / 管理ダイエット / 懸賞 / ショップ / メールフォーム / CGI / マテリアル /

/ SEKKAKU-NET / せっかくカウンター / せっかくカード / Stardust Factory / せっかくマート / J-SEARCH / せっかく懸賞 /