読者です 読者をやめる 読者になる 読者になる

GIS奮闘記

現役GISエンジニアの技術紹介ブログ。主にPythonを使用。

GoogleMapsAPIを使ってみよう

本日はGoogleMapsAPIを使ってみたいと思います。
GoogleMapsAPIとは簡単に言うと「GoogleMapを自分のサイトでも使ってみたい」という方向けにGoogleが無償公開している便利なものです。飲食店のサイトなんかによくあるあれですね。

さて、前回はジオコーディングで国立競技場の緯度経度「35.679933, 139.714465」を取得しました。
Pythonでジオコーディングをやってみる - GIS奮闘記

この情報を使用してGoogleMapをHTMLに埋め込んでみたいと思います。
まず以下を用意する必要があります。
Googleのアカウント
②APIKey

①は問題ないと思います。②ですが、色々なサイトでやり方がのっているので参考までに。本当に簡単ですね。
Google Maps JavaScript API v3の使い方まとめ (サンプルコード付き)

準備ができたところでコーディングをしてみたいと思います。まずはJavascriptから

■sample.js

function initialize() {
  var latlng = new google.maps.LatLng(35.679933, 139.714465);
  var opts = {
    zoom: 16,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  
  var map = new google.maps.Map(document.getElementById("map_canvas"), opts);
  var mark = {
    position: latlng,
    map: map
  };

  var marker = new google.maps.Marker(mark);
}

マップの読み込みをするだけの簡単なコードですね。国立競技場の緯度経度「35.679933, 139.714465」を使用してます。また、var marker = new google.maps.Marker(mark)でマーカーも作成しています。
次にHTMLですね。

■map.html

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="robots" content="noindex,nofollow,noarchive" />
    <title>Google Maps Sample</title>

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

    <script src="./js/sample.js" type="text/javascript"></script>

  </head>
  <body onload="initialize()">
    <p>国立競技場です。</p>

    <div id="map_canvas" style="width:500px; height:300px"></div>

  </body>
</html>

「APIKey」の個所は取得されたAPIKeyを記述してください。
さて結果はどうなったでしょうか。

f:id:sanvarie:20151128155503p:plain

国立競技場が表示されて、マーカーも作成されました。
これ、スクレイピングとかしたらもっと面白そうなことができそうな気がする。
以上、本日はGoogleMapsAPIについてでした。