GoogleMapAPIでイケてる地図を作る

代官山蔦谷のgoogleMapってイケてるよね?あれどうやって実装しているんだろう?って話になって、「Youこれ実装しちゃいなよ」という流れになったのでgoolgeさんに聞いてみました。どうやらgooglemapAPI ver3から実装されたStyledMapTypeというAPIを使うことで実装できるようです。

GoogleMapAPIってver2のときに少し使ったことがある程度なんですよね。その時はxmlの情報をマップにプロットさせるってことをやってましたが...。今回は下記のエントリーを参考にテストしてみました。結構細かく設定できるんですね。

Google Maps JavaScript API V3 チュートリアル
イラストマップみたいなGoogleマップをGoogle Maps API V3で!
Google Maps JavaScript API V3 のマップ タイプ
Google Mapのデザインを変更する方法(StyledMapの使い方)

ソースはこんな感じ

以下私的備忘録

PC向けなのでsensorはfalse、モバイル機器向けに位置情報を使うときはtrue 地図の中心を新宿西口の高速バス乗り場に設定 新宿西口の高速バス乗り場にピンを立てる var styleOptionsで表示方法というかスタイルを指定する。 var styleOptionsで指定したスタイルを読み込む 地図上の文字を表示させない

さらっと調べて適当に実装したからおかしな箇所もあるかもしれませんが、とりあえず表示はできています。 クールでイケてる地図になったかしら?
次はレイヤーをかぶせる作業だけどこれはハマりそうだなぁ...。

投稿日
カテゴリ