@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

Geolocation APIで取得した現在地をGoogle Maps APIで表示する

html5

HTML5のGeolocation APIで取得した現在地をGoogle Maps APIで地図表示してみます。
現在地の取得方法は、Geolocation APIで現在地を取得する - @thorikiriのてょりっきです。
取得した位置情報をGoogleMapの地図の中心地と、マーカーに適応させましょう。

function(position) {
    var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    var options = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map'), options);
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: '現在地'
    });
}

地図の中心を目的地にしたり、目的地と現在地の関係でZoomを変更したり、その他色々と出来ることはあるかと思いますが、一番シンプルな形です。
サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>Location API Sample</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <style>
      #map {
        width: 400px;
        height: 300px;
        border: solid 1px #ccc;
      }
    </style>
  </head>
  <body>
    <h1>Location API Sample</h1>
    <div id="map"></div>
    <div id="message"></div>
    <script>
       window.onload =function() {
          if (navigator.geolocation) {
              navigator.geolocation.getCurrentPosition(function(position) {
                  var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                  var options = {
                      zoom: 15,
                      center: latlng,
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                  };
                  var map = new google.maps.Map(document.getElementById('map'), options);
                  var marker = new google.maps.Marker({
                      position: latlng,
                      map: map,
                      title: '現在地'
                  });
              }, function(e) {
                  document.getElementById('message').innerHTML = typeof e == 'string' ? e : e.message;
              });
          } else {
              document.getElementById('message').innerHTML = 'Location APIがサポートされていません。';
          }
      };
    </script>
  </body>
</html>

Google Maps APIプログラミング入門 改訂2版

Google Maps APIプログラミング入門 改訂2版