V3のマップにルート案内 (Directions API) を実装しよう。
APIで提供される交通手段は車・徒歩・自転車で、電車や飛行機を使う経路や発着時間を指定しての検索は出来ない。
なのでロサンゼルスから東京に移動するルートなんかを検索すると「太平洋をカヤックで横断する」と出たりする。
遠方の検索は公式の地図検索を使えって事なんだと思う。
解説は抜粋なのでソース全文は記事末尾からダウンロード出来るZipのjsファイルを見てください。
カテゴリー: GoogleMap
GoogleMapに関すること。主にサンプル。
[gmap] ‘document.body’ は Null またはオブジェクトではありません。
Google MapsのIE6～IE7で発生する事があるエラー。
APIローダーからV3を呼び出そうとしていたときに出た。
メッセージ: 'document.body' は Null またはオブジェクトではありません。 ライン: 11 文字: 5 コード: 0 URI: http://maps.google.com/maps/api/js?key=notsupplied&v=3&callback=google.loader.callbacks.maps&hl=ja&sensor=false
ライン１１に確かにdocument.bodyがある。
appendChildしようとしているが出来ないからエラーになっているようなので
headからbody内にGoogleMapsのscriptタグを移したら直った。
どうもクセでheadに入れたがってしまうんだけど、body閉じタグ直前に置くのが無難みたい。
[gmap v3] Googleマップのマーカーを動的に作成する
マーカーデータ作成ツールでsessionStorageに保存されたポイントを表示する時に使っている１から始まる番号つきのマーカーは、
Google Chart APIで自動作成されたものです。
MapIconMakerというV2のライブラリが元ネタなんだけど、
V3はGIconとかが無くなってて使えなかったからドキュメント見ながらピンタイプのアイコンを出力する関数を書いてみた。
この関数使えばアイコン素材を用意する必要がなくてとてもお手軽です。
Googleマップのマーカーデータ作成ツールを組んでみた
Google Mapsにマーカーを複数表示するためには、マーカーを作るに必要な座標やタイトルなんかの情報をまとまったデータにする必要がある訳ですよ。
別ファイルに保存するならXMLとかKMLあたりが主流だと思うんだけど、そのデータを作るのが面倒くさかったのでツールを組んでみた次第。
IEには対応してません。Firefox, Chrome, Safari, Operaで動くと思います。
検索してタイトル記入してSavePoint押すと保存。
保存したマーカーはsessionStorageに蓄積するのでリロードしただけでは消えません。
Download押すと右側にあるセレクトメニューの形式でダウンロード。
Firefox3.6以上の場合はFile APIによりドラッグ＆ドロップでファイルの読み込みができます。
今のところ対応はXMLのみで、出力するXMLと同じ書式であればOK。
< ?xml version="1.0" encoding="UTF-8"?> <marker name="東京" lat="35.681382" lng="139.766084" zoom="15"> <description>< ![CDATA[]]></description> </marker> <markers> <marker name="有楽町" lat="35.675069" lng="139.763328" zoom="16"> <description>< ![CDATA[]]></description> </marker> </markers>
Google Maps API V3 基本的な使用方法と設定についてのまとめ
APIの呼び出し方からマーカークリックで情報ウィンドウを表示するまでの基本的な使い方について、オプション設定の仕方を含めてまとめてみた。
Webサイトへの導入
API呼び出すscriptタグとwindow.onloadで実行される関数書いて～という手順はV2とまったく同じ。
シンプルな地図を表示するサンプル
下記ソースを元に解説します。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps JavaScript API v3 Example</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
V2使ってた事があれば色々違ってるのが分かると思う。
“Google Maps API V3 基本的な使用方法と設定についてのまとめ” の続きを読む
Google MapsにKMLのデータを表示する (v2,v3)
KMLファイルを使えばGoogleMapsのマーカー設定とかが凄い簡単にできるっていう話。
KMLはXMLのように書式が決まってて手打ちはだいぶややこしいんだけど、GoogleEarth使えば簡単に作れる。
GooleEarthを開くと左側に「場所」ってのがあって、マークされた目印とかが表示されていると思う。
デフォルトだとお気に入りの中に観光ツアーというモノがあります。
自分でポチポチマーキングしてもいいんだけど、手順を解説するのは本題から外れるので割愛。
詳しくはマニュアル参照で。
「場所」タブの横にあるコンテンツを追加を押すと、ユーザーが作ったデータをギャラリーからインポート出来る。
とりあえずサンプルとして28日間で日本一周を読み込でみると、保留って所に表示されると思う。
そしたら一番親のタイトルの所を右クリックして「名前をつけて場所を保存」を選ぶ。
ファイルタイプでkmlを選べばkmlファイルがエクスポートされます。
[GoogleMaps] グーグルマップとストリートビューを双方向連動表示させる
久しぶりにGoogleマップ弄ったらいろいろと変わっていたので遊びついでに作ってみた。
Ajaxローダーを利用して導入しやすく作ってみたので是非お試しあれ！
このスクリプトは、Googleマップとストリートビューを同時に表示した上で、移動した時の表示を連動させるものです。
- GooleMapsで中央に表示している地点がストリートビューに対応している場合、ストリートビューを表示
- Googleマップでマーカーを移動したらストリートビューも移動させる
- ストリートビューで移動したらマップのポイント（中心）も移動させる
- ストリートビューで表示している場所の住所表示
- ストリートビューに未対応の場合エラーを表示する
- 3Dコントローラーの利用
使用上の注意
- 光のような高速回線環境でないと表示がもたつきます
- ローカル環境（サーバーではない）ではクリック移動時のストリートビューが機能しません
- ストリートビューを表示する要素は、直接縦横のサイズを指定しないと横幅が100%になります
- MITライセンスです
[Ajax] Google AJAX API ローダーの利用方法
Google Ajax APIローダーの使い方についてのメモです。
Seachについては前に書いてるのでGoogleMapを例にしてます。
GoogleMapやGoogleSearchなどのGoogleが提供するAjaxAPIサービスを利用する際、大抵は各APIのスクリプトタグを逐一挿入していると思います。
たとえばMapなら下記のようなソースです。
<script src="http://maps.google.com/maps?file=api&v=2&key=ABCDEFG" type="text/javascript"></script>
利用するサービスが複数あるとその分スクリプトタグが増えていくことになりますが、
Google AJAX API ローダーを使用すると、複数または全てのAjaxAPIの読み込みが次の１行で完結します。
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABCDEFG"></script>
V3 APIについて追記
“[Ajax] Google AJAX API ローダーの利用方法” の続きを読む
GoogleMapSample12:iframe用ページテンプレート
iframe用のページを毎度作るのが面倒臭い。と思って自分用に作っておいたファイルを晒すよ！
使い方
- ダウンロード＆解凍
- 中身を修正する
- iframeでリンク貼る
動作はGoogleMapSample6:コントロールの追加とほぼ同じです。（GMap2のソース）
修正箇所にはソース内コメントで解説入れてあります。
GoogleMaps座標検索のスクリプトファイルとセットにしました。
[ダウンロードが見つかりません]GoogleMapSample11:複数のマーカーを表示（応用編）
Sample8の応用スクリプト。リンクをクリックしたら対応したマーカーを表示する。
支店マップとか散策マップみたいな用途に向いてる。
Transparency GoogleMaps
GoogleMapを透明にしたいしたい！と言い出して作ったボツになった方をこっちにのせとく…。
CSSで半透明というのではなく、陸の部分だけ不透明で他透明ということをやりたかった。
透過GIFのほか、アルファチャンネルpngも使用出来る。（しかもpngはIEでも表示される！）
GoogleMap IEだけ出るエラーの原因
GoogleMapを入れたページをブラウザで確認したとき、FireFoxやSafari、IE7などではエラーが出ないのに何故かIE6系のブラウザだけエラーを吐くことがある。
主なものは
- ‘GMap’は宣言されていません
- ‘G●●’は宣言されていません
- ‘}’がありません
- オブジェクトを指定してください
- ‘return’ステートメントが関数の外側にあります
IE6以下で起きるこれらのエラーは、GoogleMapsを表示してるページの文字コードがShift-jisやEUCだと出ます。
これは表示するファイルの文字コードだけでなく、外部jsファイルの場合も当てはまるので外部jsファイルにgooglemapの関数を作ったときなんかも、文字コードをUTF8にする必要がある。
どうしてもUTF-8に出来ないという場合は、GoogleMapだけ入れたページを別のHTMLファイルに作成して、それをiframeで表示するのが手っ取り早いと思う。
文字コードをUTF8にしてもまだエラーになる。
他のブラウザでは見れるのに…なんて時は、次のポイントをチェックしてみてください。
- 変数やオブジェクトの名前にエラーを引き起こす名称（classなど）が含まれていないか
→適当なプレフィック(myClass)を付けたりクォーテーションで囲ったりして変更 - オブジェクトや配列の最後の要素にカンマ付いていないか
→{ 'key' : 'value', }や[ 0, 1, 2, ]は 『識別子、文字列または数がありません。』というエラーになります
※最近エラーに関する検索が多いようなので補足
GoogleMaps API V3はFirefox2やIE6などのレガシーブラウザをサポート対象外としているので、どうしてもエラーが消えない場合はV2を使う方が建設的です。
‘document.body’ は Null またはオブジェクトではありません。というエラーについてはこっちに書いてますが、scriptタグをbody閉じタグ前に移すと直るようです。
スクリプトの書き方が悪くてエラーを引き起こす場合もあります。こちらのGoogle JavaScript Style Guide（和訳）がとても参考になります。
※IEでマップを開くと「インターネットサイトhttp://maps.google.co.jp/を開けません。操作は中断されました」が出る件について補足
2010/10/15くらいから突如出始めたエラーのようです。（世界的に）
エラーが出たり出なかったりしているところを見ると、APIよりもIE側に問題があるように見受けられます。
このセキュリティ更新プログラムを当てたら直ったという報告がフォーラムにあったので引用しておきます。
英語版のフォーラムに情報がありました。
http://www.google.com/support/forum/p/maps/thread?tid=1a59afc1bb60d0c6&hl=en以下のセキュリティパッチをインストールすると問題が改善されるようです。
MS10-071
http://www.microsoft.com/japan/technet/security/bulletin/MS10-071.mspxただし、上記のパッチは、WinXP SP3 用となっているので、 SP2 の人はインストールできないように見えます。
加えて、英語版フォーラムの情報によれば、このパッチのインストール後、いくつかのwebcomponent
(具体的にどんなものかはわかりませんが・・・）が動かなくなったと報告が挙がっています。
言うまでもありませんが、会社のPCに導入する際には動作検証など行なった上で導入してください。
GoogleMapSample10:ポリィラインのエンコード
ポリィラインなのかポリーラインなのか未だに読み方が分からない件。
複雑なポイント設定のあるラインを地図に引きたい場合はこちらが最適。
公式サイトにあるInteractive Polyline Encoder Utilityにて、ラインのエンコードが出来ます。
GoogleMapSample9:地図にシンプルなラインを引く
地図の上にポリィラインと呼ばれる線を引く。公式サイトにあるサンプルです。
ポイントを増やせば複雑な線も引けるが、複雑な線はラインのエンコードを使った方が楽。
GoogleMapSample8:複数のマーカーを表示
１つのマップに複数のマーカーを表示する。