GoogleMap

Google MapsにKMLのデータを表示する (v2,v3)

2010/06/11 GoogleMap 1 comment , , ,

KMLファイルを使えばGoogleMapsのマーカー設定とかが凄い簡単にできるっていう話。
KMLはXMLのように書式が決まってて手打ちはだいぶややこしいんだけど、GoogleEarth使えば簡単に作れる。

GooleEarthを開くと左側に「場所」ってのがあって、マークされた目印とかが表示されていると思う。
デフォルトだとお気に入りの中に観光ツアーというモノがあります。

GoogleEarth画面抜粋

自分でポチポチマーキングしてもいいんだけど、手順を解説するのは本題から外れるので割愛。
詳しくはマニュアル参照で。
「場所」タブの横にあるコンテンツを追加を押すと、ユーザーが作ったデータをギャラリーからインポート出来る。
とりあえずサンプルとして28日間で日本一周を読み込でみると、保留って所に表示されると思う。

ギャラリーからインポート

そしたら一番親のタイトルの所を右クリックして「名前をつけて場所を保存」を選ぶ。

kmlのエクスポート

ファイルタイプでkmlを選べばkmlファイルがエクスポートされます。

(さらに…)

[GoogleMaps] グーグルマップとストリートビューを双方向連動表示させる

2010/01/04 GoogleMap No comments , , ,

久しぶりにGoogleマップ弄ったらいろいろと変わっていたので遊びついでに作ってみた。
Ajaxローダーを利用して導入しやすく作ってみたので是非お試しあれ!

このスクリプトは、Googleマップとストリートビューを同時に表示した上で、移動した時の表示を連動させるものです。

  • GooleMapsで中央に表示している地点がストリートビューに対応している場合、ストリートビューを表示
  • Googleマップでマーカーを移動したらストリートビューも移動させる
  • ストリートビューで移動したらマップのポイント(中心)も移動させる
  • ストリートビューで表示している場所の住所表示
  • ストリートビューに未対応の場合エラーを表示する
  • 3Dコントローラーの利用

GoogleMapsとStreetViewの双方向連動表示

DEMOはこちら

使用上の注意

  • 光のような高速回線環境でないと表示がもたつきます
  • ローカル環境(サーバーではない)ではクリック移動時のストリートビューが機能しません
  • ストリートビューを表示する要素は、直接縦横のサイズを指定しないと横幅が100%になります
  • MITライセンスです

(さらに…)

[Ajax] Google AJAX API ローダーの利用方法

2009/04/08 GoogleMap No comments

Google Ajax APIローダーの使い方についてのメモです。
Seachについては前に書いてるのでGoogleMapを例にしてます。

GoogleMapやGoogleSearchなどのGoogleが提供するAjaxAPIサービスを利用する際、大抵は各APIのスクリプトタグを逐一挿入していると思います。
たとえばMapなら下記のようなソースです。

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABCDEFG" type="text/javascript"></script>

利用するサービスが複数あるとその分スクリプトタグが増えていくことになりますが、
Google AJAX API ローダーを使用すると、複数または全てのAjaxAPIの読み込みが次の1行で完結します。

<script type="text/javascript" src="http://www.google.com/jsapi?key=ABCDEFG"></script>

V3 APIについて追記
(さらに…)

GoogleMapSample12:iframe用ページテンプレート

2008/11/28 GoogleMap No comments ,

iframe用のページを毎度作るのが面倒臭い。と思って自分用に作っておいたファイルを晒すよ!

使い方

  1. ダウンロード&解凍
  2. 中身を修正する
  3. iframeでリンク貼る

動作はGoogleMapSample6:コントロールの追加とほぼ同じです。(GMap2のソース)
修正箇所にはソース内コメントで解説入れてあります。

GoogleMaps座標検索のスクリプトファイルとセットにしました。

“[JS]Javascriptの有効・無効でCSSを変更する” をダウンロード – 0 回のダウンロード –

GoogleMapSample11:複数のマーカーを表示(応用編)

2008/05/28 GoogleMap No comments ,

Sample8の応用スクリプト。リンクをクリックしたら対応したマーカーを表示する。
支店マップとか散策マップみたいな用途に向いてる。


(さらに…)