Skip to content

Instantly share code, notes, and snippets.

@myamamic

myamamic/gist:65bf19b5aed1cb992708 Secret

Last active January 3, 2016 02:29
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save myamamic/65bf19b5aed1cb992708 to your computer and use it in GitHub Desktop.
Save myamamic/65bf19b5aed1cb992708 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.rst

GTUG Girls Meetup #15 GoogleMapsを使ってみよう

イベント概要

主催

GTUG Girls

日程

2014/01/16 19:00-21:45

上限参加人数

20名

講師

山市

チューター

向井

イベントURL

https://groups.google.com/forum/#!topic/gtug-girls/cy9ee1SwLBQ

Agenda

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

Google Maps API の紹介

Google Maps APIでは、さまざまな機能が提供されています。

  • Google Maps JavaScript API v3 : Map機能を提供するJavaScriptライブラリ
  • Directions API : ルート検索サービス
  • Distance Matrix API : 移動距離と所要時間を計算するサービス
  • Google Elevation API : 地球上のすべての場所の高度データを提供するサービス
  • Google Geocoding API : ジオコーディング(住所から地理座標に変換)サービス
  • Google Places API : 施設、地理的位置、有名なスポットのプレイス情報を提供するサービス

などなど・・・

これらのAPIを組み合わせて使うことで、乗換案内やドライブナビゲーション機能など、 アイデア次第で様々なことができます。

Google Maps APIを利用する方法は、JavaScriptライブラリを読み込んで使う以外にも、HTTPでリクエストを送信し、サーバーから結果を返してもらう方法があります。

Google Maps JavaScript API v3をサポートしているブラウザ

https://developers.google.com/maps/faq?#browsersupport 2014-01-13現在

  • For desktop:

    • Internet Explorer 8–10 inclusive (Windows)
    • The current and previous version of Firefox (Windows, Mac OS X, Linux)
    • The current and previous version of Chrome (Windows, Mac OS X, Linux)
    • The current and previous version of Safari (Mac OS X)

  • For Android:

    • Default browser on Android 2.3+ (which is Chrome on 4.1+)

  • For iOS:

    • Mobile Safari on the current and previous major version of iOS
    • Current version of Chrome for iOS

用語の紹介

  • LatLng

    • 英語では南北の緯度のことをlatitude、東西の経度のことをlongitudeと言います。Google Maps APIでは、両方合わせてLatLngと呼びます。LatLngクラスもあります。

Hello Map

地図を表示する

さて、いよいよ地図を表示してみましょう。 今回のハンズオンでは、ローカルのhtmlファイルをテキストエディタで編集し、ブラウザで読み込んで動作を確認していきます。

サンプル

  1. サンプルファイル(sample1.html)をgithubに置きました。同じ内容のファイルを、ローカルにコピーします。
  2. 作成したら、ブラウザで読み込んでみましょう。
    • file:///<ディレクトリ>/sample1.html
  3. いまいる場所を中心とした地図が表示されたら、成功です！
  • 重要ポイント
<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?sensor=true">
</script>
  • script タグ内の URL は、JavaScript ファイルの位置を示しており、このファイルには Google Maps API を使用する上で必要なシンボルと定義がすべて入っています。この script タグは必須です。
  • key パラメータにはアプリケーションの API キーを設定します (今回は未設定)。
  • URL の sensor パラメータは必須です。このアプリケーションがユーザーの位置情報を取得するのにセンサー（GPS など）を使用するかどうかを示します。true か false を指定します。

地図の中心とズームレベルを変更する

google.maps.MapOptionsで、Mapの状態を設定できます。

"center"プロパティの座標を変更すると、地図表示時の中心位置が変わります。

"zoom"は、地図の拡大縮小レベルを設定します。値が大きいほど、地図を拡大します。

"center"と"zoom"の2つは、MapOptionsの必須パラメータです。

好きな位置を好きなズームレベルで表示してみましょう。 緯度経度は、Googleマップ(https://www.google.co.jp/maps/)上でも取得することができます。

  • 参考にいくつか

    • 東京ディズニーランド　　Lat: 35.632067, Lng: 139.880847
    • 東京スカイツリー　　　　Lat: 35.710060, Lng: 139.810705
    • 富士山　　　　　　　　　Lat: 35.360555, Lng: 138.727778

他にもパラメータがたくさんあります。 いろいろと試してみると面白いです。

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

地図上にマーカーを立てる

次に、表示した地図上にマーカーを立てます。 ここではサンプルファイル(sample2.html)を使用します。

sample1.htmlから変更した部分は以下です。

function initialize() {
  var markerLatlng = new google.maps.LatLng(35.6708529, 139.7605315);
  var mapOptions = {
    center: markerLatlng,
    zoom: 14
  };
  var map = new google.maps.Map(document.getElementById("map-canvas"),
      mapOptions);

  var marker = new google.maps.Marker({
    position: markerLatlng,
    map: map,
    title: 'Hello Map!'
  });
}
  • new google.maps.Marker(...)で、Markerオブジェクトを作成しています。
  • Markerのコンストラクタのmapに、表示するMapオブジェクトを渡します。
  • titleに渡している文字列は、tooltipに表示されます。

現在地を取得し、表示する

今度は現在地を取得し、Map上の現在地にマーカーを立てます。 現在地を取得するには、HTML5のgeolocaiton APIを利用します。

Chromeブラウザでは、"file://"でローカルにあるHTMLファイルをロードした場合、 geolocation APIが使用できません。 今回は、Googleのサンプルで確認します。

GPSなどのセンサーを利用する場合は、sensor=true を指定します。

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

ここではgeolocaiton APIが使えるかどうかをまず判定し、その後現在地情報を取得しています。

// Try HTML5 geolocation
if(navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var pos = new google.maps.LatLng(position.coords.latitude,
                                     position.coords.longitude);
  ...
  ...
}

ルート検索APIを使ってみる

さて、ここからはルート検索をしてみましょう。 サンプルファイル(sampl4.html)を使用します。

ルート検索APIを使うために、google.maps.DirectionsServiceのインスタンスを作成します。

var directionsService = new google.maps.DirectionsService();

google.maps.DirectionsServiceのroute()メソッドで、サーバーにルート検索リクエストを送信します。

function calcRoute() {
  var request = {
    origin:srcLatLng,
    destination:dstLatLng,
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}
  • requestのoriginにスタート地点、destinationにゴール地点を設定します。
  • travelModeは、以下の4種類があります。デフォルトは DRIVING です。
    • google.maps.TravelMode.DRIVING　　：車
    • google.maps.TravelMode.BICYCLING　：自転車
    • google.maps.TravelMode.TRANSIT　　：公共交通機関
    • google.maps.TravelMode.WALKING　　：徒歩

プレイス検索APIを使ってみる

こんどは、プレイス検索APIをつかって、ある地点周辺の店舗を検索してみましょう。 プレイス検索では、施設や有名なスポットとして定義されているプレイスについての情報を取得することができます。

サンプルファイル(sampl5.html)を使用します。

このサンプルでは、プレイス検索の中の周辺検索機能を利用しています。 今日の会場を中心とした半径500mのエリア内で、"store"として登録されているプレイスを表示しています。

var request = {
  location: ginza,
  radius: 500,
  types: ['store']
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);

ためしに"types"を変更してみると、表示されるプレイスが変化することを確認できます。

createMarker(place)では、サーバーから返ってきたプレイス情報を受け取って、 マーカーを生成しています。

プレイスの位置情報は、place.geometry.locationで取得することができます。

function createMarker(place) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(place.name);
    infowindow.open(map, this);
  });
}

プレイス検索とルート検索を組み合わせてみる

では、ここまでに紹介した機能を組み合わせて、簡易ナビゲーションページを作成してみましょう。 サンプルファイル(sampl6.html)を使用します。

このサンプルは、sample4.htmlとsample5.htmlを組み合わせて作成しました。

まず、プレイス検索で周辺の店舗をマーカーで表示します。

マーカーをクリックすると、この会場をスタート地点として、クリックした店舗までのルートを表示します。

google.maps.event.addListener(marker, 'click', function() {
  infowindow.setContent(place.name);
  infowindow.open(map, this);

  // ルート検索を実行する
  calcRoute(ginza, marker.getPosition())
  • クリックされたマーカーの位置情報を取得し、ルート検索のゴール地点に設定しています。

道順パネルを表示する

ルート検索では、簡単にルートの説明を表示できます。 sampl6.htmlを改造してみましょう。

google.maps.DirectionsRendererに、ルートの説明を表示するパネルを設定します。

infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
directionsDisplay.setMap(map);

// 道順案内を設定する
directionsDisplay.setPanel(document.getElementById("panel"));

service.nearbySearch(request, callback);

}

ルートの説明表示エリアを用意します。

<style>
  html, body {
    height: 100%;
    margin: 0px;
    padding: 0px
  }
  #map-canvas {
    height: 100%;
    width: 80%;
    float: left;
  }
  #panel {
    height: 100%;
    width: 20%;
    float: right;
  }
</style>
<body>
  <div id="map-canvas"></div>
  <div id="panel"></div>
</body>

ブラウザで読み込んで、プレイスのマーカーをクリックすると、 右側にルートの案内が表示されます。

より使いこなすために

APIキーの取得

Google Maps JavaScript API v3は、APIキーを設定しなくても正常に機能しますが、キーを設定することでAPIの使用状況をチェックできるようになります。 Googleアカウントをお持ちの方は、ぜひキーを取得してみましょう。

  1. Google Developers Consoleを開きます。
  2. 左から「Projects」を選択し、「CREATE PROJECT」をクリックします。プロジェクト名とIDを決めたら、「Create」でプロジェクトを作成します。
  3. しばらくするとプロジェクトの作成が完了し、プロジェクトの管理画面が表示されます。
  4. 左の「APIs & auth」をクリックし、「APIs」をクリックします。
  5. 右のAPI一覧から、「Google Maps API v3」を探し、有効(ON)にします。
  6. 左の「APIs & auth」から「Credentials」をクリックします。
  7. 「Public API access」の「CREATE NEW KEY」をクリックします。
    • キーの種類は、「Browser Key」です。
    • 「Edit Allowd Referer」には、今回は何も入力しません。
  8. これでAPIキーが生成されました！「Key for browser applications」の「API Key」に表示されている文字列が、作成したAPIキーです。

重要ポイント

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=true">
</script>
  • script タグ内の URL は、JavaScript ファイルの位置を示しており、このファイルには Google Maps API を使用する上で必要なシンボルと定義がすべて入っています。この script タグは必須です。
  • key パラメータにはアプリケーションの API キーを設定します。
  • URL の sensor パラメータは必須です。このアプリケーションがユーザーの位置情報を取得するのにセンサー（GPS など）を使用するかどうかを示します。true か false を指定します。

参考

各種ドキュメントやサンプルのリンクです。 日本語版は内容が古い場合が多いので、出来る限り英語版を参照したほうがいいです！

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment