Google Maps API。
企業ウェブサイトでももう普通に取り入れられていますよね。
簡略化しわかりやすくしたオリジナルな地図もいいし、ユーザーが普段使い慣れた地図（Google Maps）を使うのも良い。
ターゲットユーザーや、状況に応じて、上手に使っていきたいです。
で、使い方。
まずは貼付けるウェブサイトのアドレスをGoogle マップ API への登録 - Google マップ API - Google Codeで打ち込み、「APIキーを生成」します。
次の画面でもうソースがでてきているので、それを基本的には貼付けるだけ。
まずはhtmlファイルが
charset=utf-8
の設定にするということ。確認して下さい。正常に動作しない可能性がでてきます。
以下のソースを書きます。
<head>
<script src="http://maps.google.com/maps?file=api&v=2&key=生成されたAPIキー"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(表示するマップの緯度経度), サイズ);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 表示の横幅px; height: 表示の立て幅px"></div>
説明です。
緯度経度は、Geocoding - 住所から緯度経度を検索で調べられます。
住所検索後の地図の真上にある座標の（）内の数値を,で区切っていれます。
例えば、原美術館「東京都品川区北品川4-7-25」ならば
座標(WGS84): 緯度 35度37分18.548秒(35.621819), 経度 139度44分9.107秒(139.735863)という結果ですので
「35.621819, 139.735863」とします。
サイズズームサイズのことです。任意で10〜17くらいが適当ではないかと思いますが（まあこの幅も結構広いですけどね）、これは試して決めて下さい。
あとは説明いらないくらいわかりやすいものですので、省きます。
また、これはデフォルトの地図なので、本当にまっさらな地図です。
通常のGoogle Mapのようにコントーラーをつけたい場合は
head内スクリプトに
map.addControl(new GLargeMapControl());
を追記、
オレンジのマーカーを追加したい場合は
var marker = new GMarker(new GLatLng(マーキングしたい緯度経度));
map.addOverlay(marker);
を追記。
さらにマーキングした場所の情報を吹き出しで表示するには
marker.openInfoWindowHtml('原美術館<br />東京都品川区北品川4-7-25');
といった感じで追記します。
他にも色々とカスタマイズは可能なので、リファレンス本やサイトが溢れているので見てみて下さい。
基本はこれでほぼいけるんではないでしょうか。
