開発メモ

概要

作者が KsGMap 開発中に気づいた点などのメモです。
KsGMap とは関係なく Google Maps API を用いたサイト作りに少しは参考になるかと思い公開しています。

開発当時のものでもしかすると直っていたり変更されている場合もありますので、予めご了承下さい。

基本

文字コード

HTML自体の文字コードも UTF-8 でなくては動作しない。
metaタグの指定だけでなく、ファイルの保存も UTF-8 にすること。

APIキー

APIキーは申告したサイトでのみしか利用できない。

ディレクトリ

設置するディレクトリはAPIキー取得時に申告したディレクトリと同じ階層に限る。
上位階層はもちろん、下位階層も不可能。但し、将来的には改善する模様。

iframe

既存のサイトやブログに埋め込む場合は iframeタグを用いることもできる。

公式ドキュメント未掲載情報

サテライトにする方法

地図タイプをサテライトにする map.setMapType( ~ ) の引数は G_SATELLITE_TYPE ではなく _SATELLITE_TYPE が正解。

ディアルを消す方法

マップタイプから「ディアル」を消すには、GoogleのJavaScriptファイルのURL(APIキーを入れる場所)でドメインを .com から .co.jp に変える。
<script src="http://maps.google.co.jp/maps   APIキーとかはそのままで可能。

スケールを表示する方法

画面左下のスケール(100mなどの尺度)を表示させるコントロール map.addControl( new GScaleControl() );

リサイズ時の初期化

ウィンドウリサイズ時にマップ自体も変わる場合、初期値では正しくない画面中央やboundなどで誤った座標が送られてくる。
ウィンドウのリサイズイベント時に、map.onResize(); メソッドを実行すれば初期化される。

不具合とその対処法

表示速度の基本

一度に表示するマーカーの件数が増えると相乗的に速度が遅くなる。
徐々に改善されている模様だが、(表示するのを待ってくれる限界を5,6秒と考えると)一度に表示される件数は最大100件程度が望ましい。

表示速度改善(1)

Googleにあるマーカーアイコンを読み込むと時間がかかるため、自サーバーにマーカーを配置すると時間短縮になる。

表示速度改善(2)

onload後に Google Maps API関連の処理をしないと、画面表示自体に時間がかかる。

情報ウィンドウをはみ出す

情報ウィンドウを開いたときに、まれに最終行がはみ出ることがある。表示する際に &nbsp; を付加しておくとよい。

XMLファイルのキャッシュ

(不具合ではないかも知れないが)XMLファイルのキャッシュは、特殊でなかなか取れないが、ファイル名に引数(例えば、?~.xml?rand=【ランダム数値】)を付けてユニークにすれば良い。

XMLファイル

文字コード(1)

XMLファイルも文字コードはUTF-8。

文字コード(2)

XMLの先頭に <?xml version="1.0" encoding="utf-8"?> と書かないと Safari で文字化けする。

チェック方法

Internet Explorer では、そのXMLファイル自体を開くと、入力ミスや構文エラー時にはメッセージが表示される。

プログラム上の注意

変数の型

Google Maps API の各関数の引数の座標(経度と緯度)や尺度などは文字列型だとエラーになる。parseFloat か parseInt で数値(前者は小数、後者は整数)に変換する。

情報ウィンドウ(1)

作り方によるかもしれないけど)マップ外からの動作で情報ウィンドウを開く場合、その箇所のマーカーが上書きされる。
そのため、動的にアルファベットを振っている場合など、他の文字に入れ替わってしまう。解決方法として、情報ウィンドウを開いた直後に map.removeOverlay( marker ) すればいい(けど、プログラム的に綺麗じゃない気がする)。

情報ウィンドウ(2)

マップ外からの動作で情報ウィンドウを開く場合に、そこに移動(recenterOrPanToLatLng)すると動きはかっこいいけど、たまに情報ウィンドウが画面外にでることがある。
移動を止めるときちんと画面内に表示する。情報ウィンドウが画面外に表示するような場合は、自動的に移動してくれるので問題はない。

開発上の注意

メモリ漏れ

ブラウザを閉じずに何度もマップを開いたり更新していると、重くなってくる。
一度、ブラウザを閉じれば元に戻る。開発中など見る時間が長い場合は要注意。一般ユーザーにはそれほど問題ないと思われる。

覚書

HTML

マップの表示されるdivタグ(初期値id=map)は一部のCSSが適用されない(positionとか)。

マーカー

アルファベット付きマーカーは A~J までの 10個 しか Google側では用意されていない。

座標の精度

座標(緯度と経度)の精度は、小数点以下5桁で十分。4桁だとかなりずれる。

その他

Googleローカルへの引数(1)

必須なもの  q:キーワード(例:ラーメン)  near:場所(例:渋谷)
任意なもの  num:表示件数(例:20)  radius:範囲(※)
その他、文字コードとかあるけど、Google Maps API を使う場合は設定必要なし (詳細は Google のドキュメントを参照)。
※ 0.1 0.2 0.4(←たぶんもっと小数点以下が続くと思う) 1.242742(2km) 6.213712(10km) 15.534280(25km) 46.602840(75km)

Googleローカルへの引数(2)

Googleローカルの場所の引数 near は座標(10進数)でも可能。