奈良で活動するホームページ制作工房のピクセリエ・ウェブ・スタジオです。
簡単！！ホームページにGoogle Mapを貼り付ける方法。

Google mapはGoogleが提供するAjaxのWebサービスです。最近は企業のホームページを見ていても会社案内用にホームページにこのGoogle mapを入れているのを見かけるようになりました。そもそもAjaxが注目されるようになったのがこのGoogle mapからだと言われています。注目されるにはそれなりの理由がありますが、操作性と自由度（カスタマイズができて、意外に簡単である）だと思います。それになんといっても楽しい！ということ。カスタマイズしなくても貼り付けるだけで高性能なマップソフトになります。マウス操作で地図がグリグリ動きます。Google mapをホームページに貼り付けるだけならとっても簡単です。Ajaxなので多少のJavascriptの知識が必要ですが、知識なしで遊んでみたいと言う方のためにホームページに貼り付けるまでの手順とスクリプトを掲載します。

GoogleMapのAPIキーを取得するときの画面です。 1.Google Map APIキーを取得します。Sign up for a Google Maps API keyを押します。

2サインアップに進んで使用したいホームページのURLを入力します。下のほうにあります。I have read and agree with the terms and conditions (printable version)のチェックを忘れないように！

GoogleMapのAPIキーが発行されサンプルコードが表示されました。 3GoogleアカウントがないときはGoogleアカウントをとります。 すぐにAPIキーが発行されますのでCtrl+a＞Ctrl+cでワードパッドなどにコピーアンドペーストなどで記録しましょう。
ここでサンプルコードも同時にが表示されます。これを使えばマップをホームページにGoogleMapを貼り付けられます。下にこれを基にしたコードを記しています。サンプルコードではオーバービューマップやマップコントロールが付いていませんので下のサンプルで付けています。

●ホームページのHTMLのコードです。

<!--▼ここから▼ -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Google MAP</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=取得したキーを貼り付けてください" type="text/javascript"></script>

<script type="text/javascript">
//<![CDATA[
window.onload=function(){

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(34.68721622131777,135.81555247306824),16,G_NORMAL_MAP);
map.addControl(new GOverviewMapControl(new GSize(200,160)));
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
}
//]]>
</script>
<!-- -->
</head>

<body>
<div id="map" style="width:500px; height:400px;"></div>
</body>
</html>

<!--▲ここまで▲ -->

注意する点は使用するURLを指定してAPIキーを取得していますので別のURL上で表示させようとしたら警告がでます。キーを取得したときに指定したURLにアップロードしてからブラウザで見ないとマップは表示されません。「取得したキーを貼り付けてください」の部分は間違えないように取得したキーを入力しましょう。

これだけでまっさらなホームページにGoogleがMapが張り付きます。 しかしこの座標は私が住んでいる奈良県の近鉄新大宮周辺になってしまいますので、座標を変更しましょう！

map.setCenter(new GLatLng(34.68721622131777,135.81555247306824)

のところです。

プロフィールページにGoogleMapとその真ん中の位置の緯度と経度がマップの下に出るようになっていますのでよかったら使って遊んでみてください。その後ろの16という数字は地図の倍率です。場所にもよると思いますがこのあたり（奈良県）も0-19まで表示できます。ちなみにキューバあたりを思いっきりズームしてもすぐ「このレベルは表示できません」となってしまいます。

マップのサイズを変えたいときは
<div id="map" style="width:500px; height:400px;"></div>のwidth:500pxが地図の幅でheight:400pxが高さ（単位：ピクセル）ですのでこれを変更します。
ここまでするのが面倒！！というかたはこのHTMLコードを実行したページがあります。でも楽しいのでぜひ挑戦してみてください。
手軽にAjaxの技術が体験できます！！

●参考文献●
ソフトバンクパブリッシング刊
入門Ajax増補改訂版


2006年12月19日seijiaoki
コメント(0) >>コメントする
TRACKBACK PING: http://pixeliere.sakura.ne.jp/mt/mt-tb.cgi/70

ピクセリエは奈良・大阪・京都の方のために
ホームページの作り方を無料で講習いたします。
詳しくは「ホームページの作り方無料講習」

お気軽にお問い合わせください。

ホームページからのお問い合わせ
ピクセリエへメールinfo@pixeliere.com

今までに作ったイラストや3DCG画像です。解説を添えていますのでぜひご覧下さい。