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

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

Google ローカルの地図を自分のサイトに追加する事が出来るGoogle Maps APIを使って、せっかく掲示板にGoogleローカルの地図機能を導入する事が出来ます。

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

Googleの発表

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

Google ローカル > API を使用してウェブサイトに地図を埋め込む

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

注意：本ページでは、旧APIバージョンを使った説明となっています。
新バージョンでは、ユーザー登録など、APIキーが不要になっています。

時期を見てAPIの書き換えを予定しています。

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

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

有料版アクティブモードにて動作するタイプです。
せっかく掲示板をUTF-8モードにして使用下さい。
せっかく掲示板のアップロード機能を使用しています。
せっかく掲示板のダイジェスト機能を使用し、最新投稿を右側に表示させています。

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

ソース

■HTML宣言編集

■HEAD宣言編集

■FORM宣言編集

■MESSAGE宣言編集

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>

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

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

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

Googleの発表

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

ソース

サービスメニュー

運営の情報

その他レンタルサービス