TODOS・何でも情報交換TOPから是非ご覧ください。
一番下の投稿フォームへ > スレッド一覧 > 記事閲覧
Google Maps API はじめの一歩
日時: 2009/06/27 04:48
名前: SoRA

こんにちは、SoRAです。
Google Maps APIの初歩的な内容(Webページに地図を表示する)をまとめてみました。
お見苦しい点があるかとは思いますが、以下に記述します。ご質問等がありましたらお願いいたします。

【準備】
1) 以下のページでGoogle Maps APIを使用するためのキーを取得する。
※地図を表示するページのURLが必要となります。新規に作成する場合はあらかじめ決めておいてください。
 http://www.google.co.jp/apis/maps/signup.html

【ページ作成のポイント】
最低限押さえるべきポイントは以下の5つです。

1) 文字コードはUTF-8とする。
UTF-8以外の場合はブラウザが「エラー:'GMap'は宣言されていません」などのエラーを返して地図が表示されなくなることがあります。

2) <head>〜</head>の間に以下のようにscriptタグを記述する。
<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;hl=ja&amp;key=【Google Maps APIキー文字列】" type="text/javascript" charset="utf-8"></script>
→これにより、Google Maps APIの機能が利用可能となります。

3) 地図表示領域をdivタグを用いてページ内に定義する。
 このとき、style属性を用いて地図表示サイズも定義する。
例) <div id="maparea" style="width:320px; height:240px"></div>

4) <body>タグにonload属性、onunload属性を定義して、ページを開いたとき/閉じたときまたは他のページへ移動するとき に実行する関数を指定する。
例) <body onload="mapload()" onunload="GUnload()">
 onloadに指定する関数は自分で作成します。(後述)
 アンロード時は必ずGUnload()を呼び出すようにします。これはGoogle Maps APIの提供関数で、Google Mapの表示に使用されたメモリを開放するものです。
 →忘れると、地図画面を繰り返し表示するにつれてブラウザの動作が重くなってしまいます!

5) bodyタグのonload属性に指定したJavaScript関数を記述する。
最低限必要な処理はGMap2オブジェクトの生成と中心点指定(setCenter())の2つです。
例)
function mapload() { // ←onload属性に指定した関数名
if (GBrowserIsCompatible()) { // ←Google Map表示可能なブラウザの場合のみ実行
var map = new GMap2(document.getElementById("maparea")); // ←地図表示領域のIDをgetElementById()の引数に指定
map.setCenter(new GLatLng(35.6895008872291, 139.69174683094), 13); // ←setCevter()の第1引数はGLatLngオブジェクトで緯度、経度を指定。第2引数は縮尺

// その他、コントロールの追加やマーカー表示など、必要に応じて記述
}
}



なお、Google Maps API関数についての詳細は以下のページを参照してください。
http://code.google.com/intl/ja/apis/maps/documentation/reference.html
メンテ

Re: Google Maps API はじめの一歩 ( No.1 )
日時: 2009/06/27 07:11
名前: りり

SoRAさん、詳しくありがとうございます。

Google Maps APIの活用ですが、私だったら

今は、現場の地図は、最寄り駅からの固定したもので、図として挿入していますが、例えば、そこにその場のGoogle Mapを出し、そこから、拡大縮小とかして、現場付近の地理を自由に見られるようにする…みたいな挿入方法が可能だったら、面白いかなと思いました。

ちょっと見たら、ブログでの利用というのもありました。
https://www.xfytec.com/community/modules/mydownloads/singlefile.php?cid=108&lid=128

>ただの地図画像ではなく Google マップを利用しているので、拡大・縮小が自由です。地図が拡大されすぎてわかりにくい時は縮小して全体を確認、その場所に行きたい時は拡大してランドマークを確認できます。


こういう利用は、すぐにもやってみたいです。

メンテ

楽しい交流と情報交換のTODOS・アップローダーも用意。ぜひTOPからもご覧ください。
ご参考になりましたら、お気軽に一筆お書き込みくださいませ。
題名 スレッドをトップへソート
名前
画像添付
JPEG
GIF
PNG



参照ボタンを押して、PCの画像を指定ください。3枚まで指定できます。縮小画像はクリックで拡大されます。
パスワード (好きなパスワードを。投稿後、右下のスパナマークをクリックし、そのパスワードを入れて修正できます。)
コメント

   クッキー保存
スレッドTOPへ***スレッド一覧