Home > GoogleMap

GoogleMap Archive

Google Maps API V3 + Google Directions API

2010-10-07 (木)
GoogleMap
Download | GoogleMap | infowindow

V3のマップにルート案内 (Directions API) を実装しよう。

GMap+DirectionAPI

APIで提供される交通手段は車・徒歩・自転車で、電車や飛行機を使う経路や発着時間を指定しての検索は出来ない。
なのでロサンゼルスから東京に移動するルートなんかを検索すると「太平洋をカヤックで横断する」と出たりする。
遠方の検索は公式の地図検索を使えって事なんだと思う。

解説は抜粋なのでソース全文は記事末尾からダウンロード出来るZipのjsファイルを見てください。

Comments: 0
Trackbacks: 0

[gmap] ‘document.body’ は Null またはオブジェクトではありません。

2010-09-10 (金)
GoogleMap
Google | GoogleMap

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閉じタグ直前に置くのが無難みたい。

Comments: 0
Trackbacks: 0

[gmap v3] Googleマップのマーカーを動的に作成する

2010-08-05 (木)
GoogleMap
GMarker | Google | GoogleChart | GoogleMap

マーカーデータ作成ツールでsessionStorageに保存されたポイントを表示する時に使っている１から始まる番号つきのマーカーは、
Google Chart APIで自動作成されたものです。

MapIconMakerというV2のライブラリが元ネタなんだけど、
V3はGIconとかが無くなってて使えなかったからドキュメント見ながらピンタイプのアイコンを出力する関数を書いてみた。
この関数使えばアイコン素材を用意する必要がなくてとてもお手軽です。

sample3-imageicon

Comments: 0
Trackbacks: 0

Googleマップのマーカーデータ作成ツールを組んでみた

2010-08-03 (火)
GoogleMap
Demo | Google

Google Mapsにマーカーを複数表示するためには、マーカーを作るに必要な座標やタイトルなんかの情報をまとまったデータにする必要がある訳ですよ。
別ファイルに保存するならXMLとかKMLあたりが主流だと思うんだけど、そのデータを作るのが面倒くさかったのでツールを組んでみた次第。

IEには対応してません。Firefox, Chrome, Safari, Operaで動くと思います。
検索してタイトル記入してSavePoint押すと保存。
保存したマーカーはsessionStorageに蓄積するのでリロードしただけでは消えません。
Download押すと右側にあるセレクトメニューの形式でダウンロード。

Firefox3.6以上の場合はFile APIによりドラッグ＆ドロップでファイルの読み込みができます。
今のところ対応はXMLのみで、出力するXMLと同じ書式であればOK。

PLAIN TEXT

XML:

<?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>

テスト用の山手線駅.xml

Comments: 0
Trackbacks: 0

Google Maps API V3 基本的な使用方法と設定についてのまとめ

2010-06-14 (月)
GoogleMap

APIの呼び出し方からマーカークリックで情報ウィンドウを表示するまでの基本的な使い方について、オプション設定の仕方を含めてまとめてみた。

Webサイトへの導入

API呼び出すscriptタグとwindow.onloadで実行される関数書いて～という手順はV2とまったく同じ。

シンプルな地図を表示するサンプル

下記ソースを元に解説します。

PLAIN TEXT

HTML:

<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>