戻る

GoogleMapsAPIの使い方

注意

正しい情報はGoogle Maps APIにあります。これはあくまでも私的解釈に基づいての 解説です正しい情報を得たい方はGoogle Maps APIを参照してください。意見、感想、苦情はGoogleMapsAPIの使い方 FAQまで

概要

GoogleMapsAPIとは自分のウェブサイトやブログにGoogleMapを貼り付けることができる機能です。

Google Maps

緯度35.64836915737426経度139.85

つまりこういうことです。

基本

  1. Google Maps API keyを得る
  2. テンプレートをいじる
  3. jsでファイルアップロード
  4. 記事やプラグインに書く
  5. ファイルで参照させる場合

Google Maps API keyを得る

Google Maps APIを使うためにはまずKeyを手に入れる必要があります。KeyはSign up for the Google Maps APIで手にはいります。Term of useをよく読んで抵触しないと判断したら(一番問題になるのは一日当たりの50,000回の参照が限度のところでしょう)指示に従ってMy web site URL:に自分のURLを打ち込んでください。

(注意、ブログに直張りするならブログのURLを(私の場合はhttp://pyridoxin.blog55.fc2.com/)ファイルで参照させる場合はファイルアップロードのURLを(私の場合はhttp://blog55.fc2.com/p/pyridoxin/file/))にしなければなりません。以下直張りする場合について話を進めます

参考

テンプレートをいじる

直張りする場合はテンプレートの<body>を<body onload="load()" onunload="GUnload()">とし、<script src="http://maps.google.com/maps?file=api&v=2&key=あなたのキー" type="text/javascript" charset="utf-8"></script>を適当な位置(多くの解説書ではheadの中に記述とありますが別にbodyの中に記述しても問題ありません。私はbodyの一番最初に書くのを好みます)

jsでファイルアップロード

次にjsファイル(javascript)を書きます。このjavascriptの中身によって様々な機能をGoogle Mapsに持たせることができます。まず一番簡単なものから始めましょう。

if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById("map"));

map.setCenter(new GLatLng(35.64836915737426, 139.85), 13);

}

を拡張子jsで保存してください(私はいつも保存するときの文字コードはUTF-8です。他(ANSIとか)で試したことがありませんのでUTF-8以外ではどうなるかは保証できません)実物07010703.js。これをファイルアップロードでアップロードします。

記事やプラグインに書く

では実際に記事に書いて見ましょう。まずjsファイルを呼び出すために<script type="text/javascript" src="ファイルの絶対パス/07010703.js"></script>を書きます次に<div id="map" style="width: 500px; height: 300px"></div>と書いてください。これで表示できたら成功です。もちろんdivのwidthやheightの大きさを変えれば画像の表示も変わります。divタグの間に文字を書くとMAP表示できないときテキストが表示されます。表示例GoogleMapsAPI実験とその中で参照されている07010702.js

ファイルで参照させる場合

ファイルで参照させる場合とはファイルアップロードでhtmlをアップするやり方です。前述のやり方がjs→ブログ(html)ならファイルで参照させる場合とはjs→html→ブログ(html)です。js→htmlは前述のやり方と同じです。html→ブログ(html)の場合iframeタグをつかいます(もちろん文法的にはobjectタグを使った方がいいのですがIEではみれません。例GoogleMAPS API objectタグでとその内部で参照されている06122702.utf8.html。文法を気にするのであればJavascriptでiframeを書いてください。例Google Maps APIをvalidでとその内部で参照されているgooglemaps.js)

簡単に言えばファイルアップロードでgoogleMapが表示されたhtmlをアップして記事で<iframe src="絶対パス.html"></iframe>と書けば解決ということです。

応用

  1. 初期座標を変える
  2. コントロールボタンを追加
  3. 地図、航空写真ボタンを追加
  4. 右下に縮小地図を表示する

初期座標を変える

if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById("map"));

map.setCenter(new GLatLng(35.64836915737426, 139.85), 13);

}

強調部分の緯度と経度をお好きな値に変えてください。概要のMAPをクリックすれば好きな場所の値が手に入ります

コントロールボタンを追加

if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById("map"));

map.setCenter(new GLatLng(35.64836915737426, 139.85), 13);

map.addControl(new GLargeMapControl());

}

地図、航空写真ボタンを追加

if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById("map"));

map.setCenter(new GLatLng(35.64836915737426, 139.85), 13);

map.addControl(new GMapTypeControl());

}

右下に縮小地図を表示する

if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById("map"));

map.setCenter(new GLatLng(35.64836915737426, 139.85), 13);

map.addControl(new GOverviewMapControl());

}

参考URIs

inserted by FC2 system