Google Maps APIの勉強会

GoogleAPIを使うことで、地図上に独自の情報を表示することができる！

本日の資料
https://gist.github.com/myamamic/65bf19b5aed1cb992708

アジェンダ(抜粋)

• Google Maps API の紹介 (15分)
• 地図を表示する (20分)
• ルート検索APIを使ってみる (10分)
• プレイス検索APIを使ってみる (15分)
• プレイス検索とルート検索を組み合わせてみる (20分)
• より使いこなすために (10分)

例）未来へのキオク

http://www.miraikioku.com/

言葉

LatLng＝Latitude(緯度)とLongitude(経度)を合わせたもの

GoogleMapsをサポートしているブラウザ

https://developers.google.com/maps/faq?#browsersupport

Google Maps API

https://developers.google.com/maps/documentation/javascript/reference?hl=en

下記が重要&必須

    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?sensor=false">
    </script>

• script タグ内の URL は、JavaScript ファイルの位置
• Google Maps API を使用する上で必要なシンボルと定義がすべて入っている

TravelMode
現在はDrivingとWalkingの2種類だけが日本でサポートされている。
O　google.maps.TravelMode.DRIVING
O　google.maps.TravelMode.WALKING
X　google.maps.TravelMode.BICYCLINGX　google.maps.TravelMode.TRANSIT

学んだこと

• マーカー(ピン)を落とす
• 半径何メートル以内にあるお店や銀行など(type指定)を表示
• 2拠点のルートを示す
• 道順パネルを表示してどっち方向へ何メートルというのまで表示
• それぞれの拠点情報はサーバに問い合わせ、返って来たデータを表示

感想
全体的にJavaScriptからAPIを呼び出してごりごり書く感じ。
ソースをコピペしただけだけど、なかなか面白い。