スポンサードリンク

Category Archives: タイル・オーバーレイ・イメージ

Googel Maps API + Traffic Layer(交通渋滞情報レイヤー) +ON/OFFボタン /JQtouch

Google Mapに表示することの出来る交通渋滞情報が思っていたよりも便利。Traffic Layer(交通渋滞情報レイヤー) をiPhone(スマートフォン用端末)地図に追加してみます。

出来れば、iPhone(スマートフォン端末)の画面をタップしたら表示/非表示を繰り返すことが出来るような手軽なものに。

Read more »

地図に天気情報を表示させるお天気と雲のレイヤー/Google Maps API V3

◆Googe Maps API V3の使い方/地図にお天気アイコンと雲レイヤーを表示させる方法

グーグルマップにお天気情報と雲の状況を表示できるようになっています。

日本語版Google Maps JavaScript API V3 デベロッパーのオーバーレイのページには、アナウンスがないのですが、英語版のデベロッパーページには、「ウェザーレイヤー(WeatherLayer)」について記述があります。

ここでは、2012年4月のGoogle Geo Developers Blogで紹介されているサンプルをベースにお勉強。

 

◆The Weather and Cloud Layers (Library)

デベロッパーガイドでは、The Weather and Cloud Layers はLibrary(ライブラリー)と書いてあります。Libraryとは?

ライブラリーの概要については、ここのページに記載があります。

要は、地図APIのいくつかの機能を使いたければ、指定しないと使えないよ・・・とのこと。ここでは、このサンプル地図に天気と雲のレイヤーを追加してみたいと思います。

  Read more »

ストリートビューの青い道路を常に表示させるオーバーレイヤーに変わるImageMapType

◆Google Maps V3 ストリートビューの青い道路をImageMapTypeを使い地図に表示させる

v2では、streetviewのオーバーレイヤーを指定すれば、ストリートビューの対応している道路が青くハイライトされたのですが、Google Maps API V3では、簡単に1行では指定できないようです。

地図上でペグマンを持ち上げると青い道路が表示されますが、それでは不便。常にstreetview対応の青い道路がハイライト表示されるようにしてみます。

google先生のページを調べると「StreetViewTileData オブジェクトの仕様」というのがあります。 ここで、getTileUrl(pano:string, tileZoom:number, tileX:number, tileY:number)のメソッドを使い、 オーバーレイではなく、ImageMapTypeクラスを使い地図上に表示させる方法があるようです。

Read more »

交通渋滞情報レイヤーと交通情報ImageMapType

リアルタイムの交通渋滞情報を Google Maps API では TrafficLayer を使用して地図に取り込むことができます。いくつか方法があるようです。

◆その1

 簡単な方法としては、「交通レイヤー」を使います。既にあるソースのmap = new google.maps.Map(document.getElementById(“map_canvas”), myOptions); の下に、下記scriptを記述すればOKです。

Read more »

スポンサードリンク