Google

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

2010/08/05 GoogleMap 2 comments , , ,

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

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

sample3-imageicon

(さらに…)

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

2010/08/03 GoogleMap No comments ,

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>< !&#91;CDATA&#91;&#93;&#93;></description>
</marker>
<markers>
<marker name="有楽町" lat="35.675069" lng="139.763328" zoom="16">
<description>< !&#91;CDATA&#91;&#93;&#93;></description>
</marker>
</markers>

テスト用の山手線駅.xml
(さらに…)

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 Feed APIでRSSを表示する

2009/06/13 Memo 2 comments , , ,

Google Ajax APIシリーズ記事その3はFeedについて。
RSS表示に関しては前にPHPで表示する方法を書きましたが、Magpie RSSだとページをPHPにする必要がありました。
Google AJAX Feed APIを利用すると、javascriptファイルを読み込むだけでhtmlファイルに外部のRSSを表示させることが出来ます。
なんでか妙にマイナーな気がするのはきっと難しそうに見えるからに違いないと思い、3ステップで使えるようにしてみた。
ZIPも用意してみたのでお試しあれ!

Mapはこの記事Searchはこの記事で解説しています。
(さらに…)