home >> パソコンで楽しむ >> Google Maps を自分のサイトに(参考手順)
Google Maps を自分のサイトに
(参考手順)
参考Web Page All About Google Mapsを自サイトに設置する
http://allabout.co.jp/internet/javascript/closeup/CU20051116A/index.htm
- http://www.google.co.jp/ から、［マップ］をクリック。
- http://www.google.co.jp/maps?ie=UTF-8&oe=UTF-8&hl=ja&tab=wl&q= で、右上の［ログイン］をクリック。
- 右下の「Google アカウントをお持ちでない方はこちらから」の［今すぐアカウントを作成します］をクリック。
- 「Google アカウントを作成」ウインドウで、［Google アカウントに必要な情報］を入力します。
- メール アドレス・パスワード・場所・認証(歪んだ画像の文字)・利用規約に同意［同意して、アカウントを作成します。］ボタンをクリック。
- Google からメールアドレス宛に確認のメールが到着するから、メールに書いてあるURLをクリックする。
- Google Maps API のサイトhttp://www.google.com/apis/maps/を開く。
- ［Sign up for a Google Maps API key］のリンクをクリック。
- http://www.google.com/apis/maps/signup.html で利用条件を読んで同意して、［I have read and agree with the terms and conditions］のチックボックスにチックを入れる。
- ［My web site URL］に API Key を取得する自分のサイトのURLを入力する。
- ［Generate API Key］ボタンをクリックすると、Googleアカウント確認を経て（ここでアカウントを取得することも出来る）、API Keyが生成される。
- 後の作業のために、このページを保存しておく。
ここで「目標」とは、表示する地図の中心の位置を言います。
- 経度・緯度を調べる（地図作成作業補助サンプル）v0.44.1 の
http://jsgt.org/ajax/newmon/samples/chapter03/03-31/getlatlon44.htmを開く。
- 東京タワーが中心の地図が表示されているが、右の［都道府県名リスト］を開き、例えば［新潟県］を選ぶ。
- 表示が最大(縮尺が小さい)になっているので、コントローラの「-」ボタンをクリック（又はスライドバーをドラッグ）して小さく(縮尺を大きく)する。
- 右下の小さい地図も利用して目的の位置に中央の赤い十字を移動し、縮尺を適当な大きさに調整する。
- スクロールバーで下方へ移動し、世界測地系の緯度・経度数値を使用（コピー＆貼り付け）する。（日本測地系は位置がずれる）
- 「2 Google Maps のAPI Key を取得する。」で表示されるKeyが記入されたサンプルのスクリプトを、エディタにコピー貼り付けしてhtmlファイルを作ると、米国サンフランシスコの地図が表示される。
- このソースの(37.4419, -122.1419)の部分が、［北緯37.4419、西経122.1419］の意味だろうから、ここを「3 目標の緯度・経度を調べる。」で調べた緯・経度に書き換えると目的の地図が表示される筈。（日本は東経だから[-]は不要）
目的のポイントを表示したりズームなどのコントロールをつけるために次のスクリプトを使用する。
http://allabout.co.jp/internet/javascript/closeup/CU20051116A/index4.htm#4
- 上のページのスクリプトをコピーして、「2 Google Maps のAPI Key を取得する。」で取得したキーを「自分のキー」に、書き換えて表示してみる。東京タワーが中心でマークがついた地図が表示される。
- ［//東京タワー座標設定 ］にある緯度・経度を「3 目標の緯度・経度を調べる。」で調べた緯・経度に書き換えると目的の地図が表示される筈。・・・
- 「拡大されて位置関係がわからない」・・・左側にあるコントローラーの[-]ボタンをクリックすると広い範囲が見えてくる。
- 右上の［航空写真］ボタンをクリックすると写真になる。
- //東京タワーを中心にする
map.centerAndZoom(tokyotwer , 0);
の数字［0］で最初に表示する地図の縮尺を設定できる。［4］に変更してみる。
参考Web Page All About Google Maps v2を設置する
http://allabout.co.jp/internet/javascript/closeup/CU20060815A/index.htm
Google Maps のAPI のバージョンも進化していて、前のサンフランシスコを表示したものが、バージョン2、上のマーキーをつけたのはバージョン1、JavaScript の書き方が変わっている。色々拡張したり将来のことを考えて、バージョンアップする。
- src="http://maps.google.com/maps?file=api&v=1&key=自分のキー
「自分のキー」の直前の［v=1］を［v=2］か最新の[v=2.61]に変更する。
- var map = new GMap(document.getElementById("map"));
［GMap］が［GMap2］に変わったので変更。
- map.centerAndZoom(tokyotwer , 0);
地理的座標を表現する方法が変更されたため、［centerAndZoom］を［setCenter］に変更。
- JavaScript上で矛盾が生じエラーになるが［いいえ］ボタンをクリック。
- ［setCenter］の引数（括弧の中）を例えば、
map.setCenter(new GLatLng(35.6587,139.7454), 17); とするところを、わかり易く変数tokyotwerを使っている。
- 一つ上の行の var tokyotwer = new GPoint(lon,lat);を
var tokyotwer = new GLatLng(lat,lon); に変更。（緯度・経度が逆になる）
- ここでJavaScript上のエラーがなくなり日本列島の地図が表示できる。
手元のパソコンでは地図が表示されているが、サーバーへ載せるとまだ問題があるかも知れないので手直しをしておく。
- <!-- ここへ地図を出力します↓ -->
<div id="map" style="width: 500px; height: 400px"></div>
のwidthが地図の幅、heightが高さだから、この数字を変更すると表示する地図の大きさを変更できる。
- 終わりの閉じるタグ</div>が何故ここにあるのか判らない。多分次のJavaScrit含み、下の</script>の次に入るのが正しいと思うが、変更すると地図が表示しなくなるのでこのままにしておく。
- ここでスタイルシートを使っているが、head要素の中にmeta要素で指定がないので1行書き加える。
<meta http-equiv="Content-Style-type" content="text/css" />
- JavaScrit の詳しいことは判らないが、［var］は変数の宣言。ここでは東京タワーの［tokyotwer］が変数として使われているが、他の場所でも問題なく動く。気になるときは［target］とでも書き換える（3箇所）。同様にコメント（//の部分）の［東京タワー］も書き換える。
- //東京タワーを中心にする
map.setCenter(tokyotwer , 0);
の数字で最初に表示する地図の縮尺を設定できる。0が最も縮尺が大きくなり見える範囲が広くなり数字が大きくなると詳細になる。表示させながら適当（13位）に調整する。
- このファイルには、title要素がないので、head要素の中に書き加える。
- head要素の中のmeta要素にJavaScriptを使う宣言がされていないので追加する。
<meta http-equiv="Content-Script-Type" content="text/javascript" />
- JavaScriptが文字コード［UTF-8］で動く様になっているようだが、meta要素は［shift_jis］とし、script要素の中に［charset="utf-8"］属性を入れる（2箇所）。（これでページ本体は［shift_jis］で、JavaScriptは［UTF-8］で動く筈）
<meta http-equiv="content-type" content="text/html; charset=shift_jis" />
<script type="text/javascript" charset="utf-8">
- 地図の表題をh1要素で記載し、このページを閉じるか元のページの戻るかナビゲーションのリンクをつける。
XHTML文書はxml文書ですから文書の一行目にその文書が XML文章であることを宣言する必要がある。文字コードに"UTF-8"か"UTF-16" を使うときは、XML宣言を省略することが出来るが、"shift_jis"を使うときは必要。
<?xml version="1.0" encoding="shift_jis"?>
を1行目に入れる。
この場合JavaScriptの部分は文字コードが"utf-8"となっているので、script要素の中に［charset="utf-8"］属性を必ず入れておく。
Internet Explorer 6 の場合困ったことがあります。文書の１行目が<!DOCTYPE・・でない場合（<?xml version="1.0・・の場合）不正な文書とみなして、ブラウザが独自の解釈をして表示してしまうようです。そのために作成者が書いたスタイルシート通りに表示されない場合があります。Internet Explorer 7 では改善されています。
参考Web Page All About Google Maps v2を設置する(2)
http://allabout.co.jp/internet/javascript/closeup/CU20060830A/index.htm
文字コードの問題、<!DOCTYPE の問題などがあり、自分のページに地図を表示出来ない場合があります。前述にも触れてありますが上のURLが参考になります。
iframe（インラインフレーム）要素を使えば、その内部はページ本体とは違う環境を作ることが出来ますが、<!DOCTYPE で［Strict］を使うことが出来ません。XHTML 1.0 Strictと XHTML 1.1 でもiframe要素を使うことが出来ません。
参考Web Page には、地図を提供している Google の説明文書（英文）と和訳も掲載されています。理解して正しく利用したいものですが、私には難解です。
注： <meta ・・・ /> の［ /］は、xhtml/xml で閉じるタグに使われます。
*********結果こんなソースになります*******
<?xml version="1.0" encoding="shift_jis"?>
<!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=shift_jis" />
<meta http-equiv="Content-Style-type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<!-- 下記キーは、必ず自分専用のものを
http://www.google.com/apis/maps/で取得して使ってください -->
<script
src="http://maps.google.com/maps?file=api&v=2.61&key=自分のキー&datum=wgs84"
type="text/javascript" charset="utf-8"></script>
<title>◆のGoogle Maps</title>
</head>
<body>
<h1>◆のGoogle Maps</h1>
<!-- ここへ地図を出力します↓ -->
<div id="map" style="width: 600px; height: 500px"></div>
<script type="text/javascript" charset="utf-8">
//<![CDATA[
var map = new GMap2(document.getElementById("map"));
//target座標設定
var lon = 138.6196517944336 ; //targetの経度
var lat = 37.481669473029186 ; //targetの緯度
var target = new GLatLng(lat,lon);
//targetを中心にする
map.setCenter(target , 13);
//コントロール追加
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
//targetを表示する
var marker = new GMarker(target);
map.addOverlay(marker);
//]]>
</script>
<div>
<a href="javascript:history.back()">元のページへ戻る</a>
</div>
</body>
</html>
*************
実行例 洞雲寺 ［地図を開く］をクリックしてください。
（2007/7/8 追加）
- 縮尺のコントローラーを大きくする。
- map.addControl(new GSmallMapControl()); を
map.addControl(new GLargeMapControl()); に変更する。
- 縮尺のスケールを表示する。
- map.addControl(new GScaleControl()); を追加する。
- 概観地図を表示する
- map.addControl(newGOverviewMapControl()); を追加する。
- アイコン（手持ちの画像ファイル）を表示しクリックすると吹き出しを出す。
-
var point = new GLatLng(緯度,経度); //アイコンを表示する位置
var msg = "<div style='width:230px'><b>吹き出しの中のテキスト</b></div>";
var icon = new GIcon();
icon.image = "../../xxxxx.gif" //画像ファイルの相対パス
icon.iconSize = new GSize(aa,bb); //画像ファイルのサイズ
icon.iconAnchor = new GPoint(0,0);
icon.infoWindowAnchor = new GPoint(0,0); //画像の左上から吹き出しが出る。
var marker = createMarker(point, msg, icon);
map.addOverlay(marker);
function createMarker(point,html,ico){
var newmarker = new GMarker(point, ico);
GEvent.addListener(newmarker,'click',function(){
newmarker.openInfoWindowHtml(html);
});
return newmarker;
}
参考ページ：柏崎の情報「陽だまり」 黒姫山のGoodle Maps
連絡：E-mail