GoogleマップAPI 〜ブログに地図を表示しよう
本日から3回でGoogleマップのカスタマイズについて書きたいと思います。
1回目の今日は、マップの表示方法です。
地図を表示するために必要なことは
1. ページの文字コードがUTF-8であること
2. GoogleのAPIキーを取得すること
3. 表示したい地図の緯度と経度を知る
です。それぞれについて説明します。
1. ページの文字コードがUTF-8であること
Googleマップは文字コードがUTF-8のページで正しく表示されます。
MT3では、デフォルトの文字コードがUTF-8になっていますので、変更する必要はありません。
もし、すでにShift-JisやEUCでサイト構築をしている場合は、別のHTMLで地図ファイルを作り、
それをiframeで表示させるようにします。
その場合には、METAタグには
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
を指定してください。
2. GoogleのAPIキーを取得すること
キーとURLが一致していないと、マップを表示することができません。
下記ページ（英語）で、KEYを取得します。
http://www.google.com/apis/maps/signup.html
「Terms of Use」に同意してサイトのURLを入力し「Generate APIKey」をクリックします。
Googleにサインインしていない場合はログイン画面が出ます。アカウントを持っていなければ作成してください。
すると、次のページにAPIキーとサンプルコードが表示されます。
このコードをコピペすれば、とりあえず地図を表示することができます。
ブログに表示するには、テンプレートの中に
タグ内のJavaScript部分を埋め込み、エントリー内に<div id="map" style="width: 500px; height: 300px"></div>
のコードを書けば地図を表示することができます。
3. 表示したい地図の緯度と経度を知る
サンプルコードの中にある
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
ここで緯度と経度を指定しています。
緯度と経度を取得する方法は「Googleマップ 緯度取得」などとWeb検索すると簡単に取得できるサイトに辿り着くことができます。
ここでは、Googleサービスを使って取得する方法を紹介します。
1.まず、Googleマップサイトを表示します。
http://maps.google.co.jp/
2.表示したい住所を入力し、「地図を検索」ボタンをクリックします。
3.希望する場所が表示されたら、右上にある「このページのリンク」という文字をクリックします。
4.ブラウザーのアドレス欄のURLが変わります。このURLを見てください。
例えば、弊社の住所を入れて「このページのリンク」をクリックすると下記のようになります。
http://maps.google.co.jp/maps?f=q&hl=ja&q=%E6%9D%B1%E4%BA%AC%E9%83%BD%E6%B8%AF%E5
%8C%BA%E5%8C%97%E9%9D%92%E5%B1%B13-5-12&ie=UTF8&om=1&z=17&ll=35.666623,139.713371&spn=0.006302,0.011877&iwloc=addr
このll=35.666623,139.713371の青文字のところが緯度、緑文字が経度です。
これをサンプルコードに入れてあげます。
<!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"/> <title>Google Maps JavaScript API Example</title> <script src="http://maps.google.com/maps?file=api&v=2&key="Google 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(35.666623, 139.713371), 13);
}
}//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
これで、希望の地図を表示することができました。
ちなみに、緯度・経度の後ろの数字「13」はズームレベルです。
0（最小）〜17（最大）を選べます。
→サンプル
次回は、マーカーをカスタマイズする方法です。