GoogleMapsAPIの使い方
注意
正しい情報はGoogle Maps APIにあります。これはあくまでも私的解釈に基づいての 解説です正しい情報を得たい方はGoogle Maps APIを参照してください。意見、感想、苦情はGoogleMapsAPIの使い方 FAQまで
概要
GoogleMapsAPIとは自分のウェブサイトやブログにGoogleMapを貼り付けることができる機能です。
緯度35.64836915737426経度139.85
つまりこういうことです。
基本
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/))にしなければなりません。以下直張りする場合について話を進めます
参考
- http://www.geocities.jp/jxrjy640/でのキーABQIAAAAn56JoqKrwuDE0mEVL9SnYRTuVKMFwggJDGBZUGwH8sbAL0TZ6hQ_JGISNOkYREfkBd-_GPUe1YjNcw
- http://pyridoxin.web.fc2.com/でのキーABQIAAAAn56JoqKrwuDE0mEVL9SnYRSuTbYI5Va1Y5aZLcz4eVakzCAk3BTKqWs5vGblyhUDgBVZBrc9QnaBSw
- http://blog55.fc2.com/p/pyridoxin/file/でのキーABQIAAAAn56JoqKrwuDE0mEVL9SnYRQRITns60ikwGgaQx4nn5lZHUZi3hTSC5OQ8t6Tvp21Hw9-BPThONHo4Q
- http://pyridoxin.blog55.fc2.com/でのキーABQIAAAAn56JoqKrwuDE0mEVL9SnYRQAU1OXvxa4HnwLNAOLXuRHpRBWfhQgrpAAgeoW6NUSzcsbPFh_FI3Z8w
テンプレートをいじる
直張りする場合はテンプレートの<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>と書けば解決ということです。
応用
初期座標を変える
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());
}
