Kayaking Lifestyle

カヤッキングライフスタイル

Google Maps API V3を使って作る独自エリアマップ

   

ココ御岳にエリアマップを作るので、apiの使い方をおさらい。

どんなエリアマップを作るか

  • 指定した独自アイコンのマーカーを複数表示
  • マーカークリックで画像や場所の名前,URLなどが入った情報ウィンドウを表示
  • マーカーが上から順番に降ってくるアニメーションを入れたい
  • マーカーの位置データはjsonから取得
  • マーカの位置データはwordpressで管理する

試しに作った御岳から行けるラーメン屋さんのマップがこちら
ラーメンマップ
ラーメンマップ___Kayaking_Lifestyle

Google Maps API V3を使うためにやること

  1. APIを使えるようにする
  2. HTMLを用意してヘッダでAPIを読み込み
  3. プログラムを書く

APIを使えるようにしてHTMLで読み込ませる部分はこの辺を参考にして、JavaScriptでプログラムを書いていきます。

JavaScript

今回やることは

  1. MAPオブジェクトの作成
  2. jsonで情報を取得
  3. マーカーと吹き出しの追加

です。

MAPオブジェクトの作成

グローバルな変数

  • stylesにマップのスタイルを入れるとイイカンジの見た目になります。
    Snazzy Maps – Free Styles for Google Mapsでいろんなスタイルを選べます。
    コピーしてstyles以下にペーストします。
  • optionsでマップのオプションを設定

jsonで情報を取得

はい。正直jQuery.Deferred良くわかっていませんでした。
この辺分かりやすかった。
結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話

マーカーと吹き出しの追加

マーカーの追加

取得したjsonのデータをforEachで回してマーカーをセット

全体のソースコード

 - days, javascript,