「GoogleMapsAPI」カテゴリーアーカイブ

Google Maps JavaScript API v3の使い方（１）

2014年1月21日 minomon20121201

今回から数回にわたって「Google Maps JavaScript API v3」の使い方について書いていきます。
公式ドキュメントの流れに沿って説明します。

執筆時点でのGoogle Maps JavaScript API v3のリリースバージョンは3.9です。
ご覧になったタイミングによっては、Google Maps JavaScript API v3のバージョンアップに伴い使用方法が異なる可能性があります。
（バージョンを指定してAPIを呼び出す方法は後述します）

現在の公式ドキュメントには、

すべての Maps API アプリケーション* では、API キーを使用して Maps API を読み込む必要があります。API キーを使用することで、アプリケーションの Maps API 使用状況を各自でモニタリングすることが可能になります。また、API キーを元に、必要に応じて、Google より、アプリケーションに関して連絡を取ることがあります。アプリケーションの Maps API 使用量が使用制限を超過した場合、API キーを使用して Maps API を読み込み、追加割り当てを購入する必要があります。

と書かれております。
以前はAPIキーは必要なかったのですが、Google Maps API for Businessの発表時にそれっぽいアナウンスがあっていたので、タイミング的にはその辺りかもしれません。

APIキーの取得

APIキーの作成方法の部分を公式ドキュメントから抜粋します。

API コンソール https://code.google.com/apis/console にアクセスし、Google アカウントでログインします。
左側のメニューから [Services] をクリックします。
Google Maps API v3 サービスをオンにします。
左側のメニューから [API Access] をクリックします。API キーは、[API Access] ページの [Simple API Access] セクションにあります。Maps API アプリケーションでは [Key for browser apps] を使用します。

デフォルトでは、このキーはどのサイトでも利用できます。不正なサイトでの使用を防ぐため、管理者権限を持つドメインでのみこのキーを使用することを強くおすすめします。API キーの [Edit allowed referrers…] をクリックすると、キーを使用できるドメインを指定することができます。
※上記説明は少し情報が古いようです。APIコンソールの画面が現在とは異なります

地図を表示する

まずは簡単な例を紹介します。以下のHTMLは、熊本城を中心とした地図を表示します。
（公式ドキュメントのサンプルを少し変更してます）

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(32.806187,130.705832),
          zoom: 14,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

例を表示(map-simple.html)

ここではbodyタグのonloadイベントから初期化していますが、jqueryを併用する場合は次のように書くこともできます。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
    </script>
    <script type="text/javascript">
      $(function(){
        var mapOptions = {
          center: new google.maps.LatLng(32.806187,130.705832),
          zoom: 14,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map($("#map_canvas").get(0),
            mapOptions);
      });
    </script>
  </head>
  <body>
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

例を表示(map-simple_jquery.html)

どちらを使うかは必要に応じて使い分ければOKです。
以下の説明ではbodyのonloadイベントから初期化するパターンになります。

Google Maps APIを読み込む

<html>
  <head>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
    </script>

scriptタグ内のURLは、javascriptファイルの位置を示しており、このファイルにはGoogle Maps APIを使用する上で必要なシンボルと定義がすべて入っています。このscriptタグは必須です。

keyパラメータにはアプリケーションのAPIキーが含まれています。APIキーはAPIコンソールから生成する必要があります。
APIキーは必須です。

sensorパラメータは必須です。このアプリケーションがユーザーの位置情報を取得するのにセンサー（GPS など）を使用するかどうかを示します。この例では、パラメータの値を true または false に明示的に設定する必要があることを強調するために、set_to_true_or_false を変数のままにしています。

HTTPS

HTTPSアプリケーションの場合は、HTTPS接続で Google Maps JavaScript API を読み込むこともできます。

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

必要に応じて使い分けましょう。

地図のDOM要素

<div id="map_canvas" style="width: 100%; height: 100%"></div>

地図をウェブページに表示するには、そのための領域を用意する必要があります。それには、ブラウザのDOM内で名前付きの div 要素を作成し、この要素への参照を取得してください。

上の例では「map_canvas」というIDの＜div＞を定義し、style 属性でそのサイズを設定しています。この値は携帯端末で適切なサイズに拡張されるよう「100%」に設定されています。これらの値は、必要に応じてブラウザの画面サイズに合わせて調整します。地図は常にそのサイズを、地図を収容する要素のサイズから取得するので、＜div＞のサイズは常に明示的に設定する必要があります。

地図のオプション

var mapOptions = {
  center: new google.maps.LatLng(32.806187,130.705832),
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

地図を初期化するために、まず地図の初期化変数を保持する Map options オブジェクトを作成します。このオブジェクトは構築するのではなく、オブジェクトリテラルとして作成します。
ここでは、「中心の位置」「ズームレベル」「マップタイプ」の3つが必須なのでその3つについて説明します。

緯度と経度

特定の地点を地図の中心として設定するには、その位置を格納するための LatLng オブジェクトを作成し、位置の座標を「緯度, 経度」の順序で渡します。

center = new google.maps.LatLng(32.806187,130.705832)

ズームレベル

地図を表示するための最初の解像度は、zoom プロパティで設定します。ズーム 0 は、完全にズームアウトして地球全体を表示した状態です。ズームレベルを上げるほど、ズームインして解像度が高くなります。

zoom: 8

地球全体の地図を 1 つの画像として表示するには、巨大な地図を用意するか、解像度をかなり下げて小さな地図で表示する必要があります。そのため、Google マップおよび Maps API では、地図画像を「タイル」に分割して「ズームレベル」ごとに保持しています。低いズームレベルでは、少数のマップタイルで広い領域をカバーします。ズームレベルが上がるほど、解像度の高いタイルで、より小さい領域をカバーします。

マップタイプ

初期マップタイプも明示的に設定する必要があります。

mapTypeId: google.maps.MapTypeId.ROADMAP

サポートされているマップタイプは次のとおりです。

ROADMAP は、Google マップの通常のデフォルトである 2D タイルを表示します。
SATELLITE は、写真タイルを表示します。
HYBRID は、写真タイルと主要な対象物（道路、地名）のタイルレイヤを組み合わせて表示します。
TERRAIN は、物理的な起伏を示すタイルで、高度や水系の対象物（山、河川など）を表示します。

ほとんどの場合は上記の基本タイプを知っていれば十分です。

地図オブジェクト

var map = new google.maps.Map(document.getElementById("map_canvas"),
    mapOptions);

地図を表す JavaScript クラスは、Map クラスです。このクラスのオブジェクトは、1 つの地図をページ上に定義します（このクラスのインスタンスを複数作成することで、別々の地図を同じページ上に生成することもできます）。JavaScript の new 演算子を使用して、このクラスの新しいインスタンスを作成します。

新しい地図のインスタンスを作成するときは、地図のコンテナとして、ページ内で

HTML ノードを指定します。HTML ノードは JavaScript の document オブジェクトの子要素となります。また、document.getElementById() メソッドでこの要素への参照を取得します。

このコードでは変数（名前は map）を定義し、この変数を新しい Map オブジェクトに割り当てます。また、mapOptions オブジェクトリテラル内で定義したオプションを渡します。各オプションは、地図のプロパティを初期化するのに使用します。

地図を読み込む

<body onload="initialize()">

HTML ページをレンダリングすると同時に、DOMを作成し、外部の画像とスクリプトをすべて取得して、document オブジェクトに組み込みます。必ずページの読み込みが完了した後に地図を配置するには、HTML ページの要素が onload イベントを受け取ったときにのみ Map オブジェクトを作成する関数を実行します。これにより、予測できない動作を防ぎ、地図を描画する方法とタイミングを正確にコントロールすることができます。

おわりに

以上で冒頭に紹介した地図を表示できるようになります。
まずは上記サンプルの中心の位置を変更して、別の位置が表示されるかを確かめるといいでしょう。
次回はマーカーを配置する方法についての説明を予定してます。

GoogleMapsAPI

Google Static Maps APIの使い方（２）

2014年1月16日 minomon20121201

前回はGoogle Static Maps APIで基本的な地図を表示する方法を書きました。
今回は前回紹介しきれなかったパラメータを紹介していきます。

format

結果として得られる画像の形式を定義します。
標準ではPNG画像が作成されますが、用途に応じて以下の形式が選択可能です。
・png8 またはpng（デフォルト）: 8 ビットの PNG 形式を指定します。
・png32: 32 ビットの PNG 形式を指定します。
・gif: GIF 形式を指定します。
・jpg: JPEG 圧縮形式を指定します。
・jpg-baseline: 非プログレッシブ JPEG 圧縮形式を指定します。

Googleの公式ドキュメントでは、

通常、最も圧縮率が高いのは JPEG で、GIF や PNG はより細かいところまで表示する場合に適しています。

と書かれております。
通常は特に指定しなくても問題ないパラメータですが、フィーチャーフォン向けに表示する場合には「jpg」を指定することを検討してもいいと思います。

pngの場合(デフォルト)

jpgの場合

scale

返されるピクセルの数に影響します。scale=2はscale=1の2倍のピクセル数を返しますが、地図の表示範囲と詳細度は維持されます（つまり、地図の内容は同じです）。
これはスマートフォン向けに地図を表示する際や、印刷用の地図を生成する場合に便利です。
デフォルト値は「1」です。指定可能な値は他に「2」と「4」がありますが、「4」を指定できるのはMaps API for Businessを利用している場合（ビジネス用に料金を払って利用している方）のみです。
（最近のiPhoneであればscale=2と指定することできれいな画像を表示することが可能です）

scale=1(デフォルト)

scale=2

maptype

作成する地図のタイプを定義します。maptype に指定できる値は、roadmap、satellite、hybrid、および terrain です。

・roadmap（デフォルト）
　Google マップウェブサイトで通常表示される標準の道路地図画像を指定します。

・satellite
　航空写真

・terrain
　地形図の画像を指定します。この画像では地形や植生がわかります。

・hybrid
　航空写真と道路地図の組み合わせを指定します。この画像では、航空写真の上に主要な道路や場所の名前の透過レイヤが表示されます。

おわりに

他にも、
・language
・region
・path
・visible
・style
などのパラメータが利用できます。

pathは地図上にラインを引く（道案内用のラインを引くなど）が可能になるパラメータですので、静的な地図にラインを引きたい方はこのパラメータを使うといいですよ。
ただし、静的マップのURLは2048文字のサイズに制限されているため、その制限を超えないように注意が必要になります。
（マーカーの数やパスの数が余程多くない限りこの制限を超えることはないでしょう）

次回は「Google Maps JavaScript API v3」について解説して行こうと思います。
質問などはFacebookページにお願いします。
» 株式会社みのモン公式facebookページ

GoogleMapsAPI

Google Static Maps APIの使い方（１）

2014年1月15日 minomon20121201

今回はGoogleから提供されているGoogle Static Maps APIの使い方をご紹介します。

Google Static Maps APIというのは「JavaScript や動的なページ読み込みを使うことなく、Google マップ画像をウェブページに埋め込むことができる」ものです。

このAPIに関するドキュメントはhttps://developers.google.com/maps/documentation/staticmaps/index?hl=jaにまとめられていますので、このページの内容に沿って使い方を紹介します。

表示サンプル

次の例は、東京の港区の静的な地図画像のURLです。

http://maps.googleapis.com/maps/api/staticmap?center=%E6%9D%B1%E4%BA%AC%E3%82%BF%E3%83%AF%E3%83%BC&zoom=14&size=600x300&maptype=roadmap
&markers=color:blue%7Clabel:H%7C35.660347,139.729207&markers=color:green%7Clabel:M%7C35.665185,139.730558
&markers=color:red%7Ccolor:red%7Clabel:Z%7C35.657392,139.748207&sensor=false

上の画像を表示するためにjavascriptを使う必要はなく、＜img＞タグ内に配置するだけで、ウェブサイト上のどの位置にでも置くことができます。

注意点

Google Static Maps APIには使用制限があります。
・1日につき、アプリケーションあたり 25,000 回の静的マップリクエスト
上記回数を超えた場合にはエラー画像が表示されるようになっており、追加の場合には料金を支払う必要があります。
（地図読み込み回数を超過した分のオンライン購入価格を教えてください）

概要

Google Static Maps API は、画像（GIF、PNG、または JPEG）を返します。
各リクエストでは、
・地図の場所
・画像サイズ
・ズームレベル
・地図のタイプ
・（オプション）地図上に配置できるマーカー
を指定できます。マーカーには、英数字を使用してラベルを追加できます。

簡単な使い方

リクエストURLは次の形式で指定する必要があります。

http://maps.googleapis.com/maps/api/staticmap?parameters

HTTPSでアクセスする場合は「HTTP→HTTPS」と変えるだけで利用することが可能です。

地図を表示するだけであれば、

http://maps.googleapis.com/maps/api/staticmap?center=%E6%9D%B1%E4%BA%AC%E3%82%BF%E3%83%AF%E3%83%BC&zoom=14&size=600x300&sensor=false

というように、
・center
・zoom
・size
・sensor
を指定するだけで表示されます。

それぞれについて簡単に説明します。

center

地図の中心を定義します。
緯度経度のペア（例：35.660347,139.729207。「緯度,経度」の順）または文字列による住所や場所（例：東京タワー）で定義できます。
ただし日本語で定義する場合には、エンコードは必須です。

zoom

地図の拡大レベルを定義します。
目的の地域のズームレベルに対応する数値（0〜21）を指定することになります。
※すべての場所を、すべてのズームレベルで表示できるわけではありません。場所によって画像データの粒度が異なるため、使用できるズームレベルも異なります。

size

表示する画像のサイズになります。
「横x縦」というように指定します。
無料版では「640×640」が最大のサイズとなります。

sensor

静的マップをリクエストしているアプリケーションが、センサーを使用してユーザーの位置情報を取得しているかどうかを指定します。
すごく簡単に書くと、スマホなどでGPSを使って位置情報を取得した情報に対して地図の表示などをする場合には「true」に設定しておいて、それ以外は「false」で問題ないでしょう（厳密には違うかもしれませんので気になる方は公式マニュアルを参照して下さい）。

マーカーを表示する

マーカーを表示するためには「markers」というパラメータを使用します。

マーカースタイル（全て省略可）

マーカースタイルの記述は、パイプ文字（|）で区切られます。
（最初に載せたサンプルURLではエンコードされているため「%7C」となってます。）

・size:（省略可能）: マーカーのサイズを {tiny, mid, small} のセットから指定します。size パラメータが設定されていないと、マーカーはデフォルト（normal）サイズで表示されます。
・color:（省略可能）: 24 ビットカラー（例: color=0xFFFFCC）、または {black, brown, green, purple, yellow, blue, gray, orange, red, white} から定義済みの色を指定します。
・label:（省略可能）: {A-Z, 0-9} から大文字の英数字を 1 文字指定します。（大文字の使用は、このバージョンの API で新しく必須要件になりました。）alphanumeric-character パラメータを表示できるのは、デフォルトサイズと mid サイズのマーカーのみです。tiny および small のマーカーでは、英数字を表示することはできません。

※小さいサイズで、赤、Mという文字を指定の場合

&markers=size:tiny%7Ccolor:red%7Clabel:M

となります。（この後ろに後述するマーカーの位置情報をつなげることになります）

これらのマーカーの代わりに、カスタムアイコンを使用することができます。
興味がある方はこちらをご覧ください。

マーカーの場所

マーカーの場所は地図の中心を定義した時と同様に、緯度経度のペアまたは文字列による住所や場所で指定が可能です。
マーカースタイルを指定している場合にはパイプ文字（|）を使用して区切ります。

markersはマーカーごとに指定するため最初のサンプルのように複数のマーカーを表示したい場合は複数個になることがあります。
（マーカー内の文字や色が3つとも異なる場合）

&markers=color:blue%7Clabel:H%7C35.660347,139.729207&markers=color:green%7Clabel:M%7C35.665185,139.730558&markers=color:red%7Ccolor:red%7Clabel:Z%7C35.657392,139.748207

違う種類のマーカーでなければ「markers」パラメータは1つでOKです。
（マーカー内の文字や色が3つとも同じ場合。）

&markers=size:small%7Ccolor:red%7Clabel:M%7C35.660347,139.729207%7C35.665185,139.730558%7C35.657392,139.748207

ほかにもパラメータがあります

これで基本的な使い方の説明は終わりです。
今回紹介したのは基本的なパラメータのみでしたが、他にも設定可能なパラメータがあります。
・地図のタイプを変える（道路地図,衛星画像など）
・画像のフォーマット（jpg,gif,png）の選択
などいろんなことが可能です。
スマホ用に2倍の解像度で表示したい場合のために、きちんとパラメータが用意されてたりします。

次回は他のパラメータについて触れたいと思います。
（おそらく全部ではないですが使うかもしれないところをいくつか紹介予定です。）

技術ブログ | 株式会社みのモン

「GoogleMapsAPI」カテゴリーアーカイブ

Google Maps JavaScript API v3の使い方（１）

APIキーの取得

地図を表示する

Google Maps APIを読み込む

HTTPS

地図のDOM要素

地図のオプション

緯度と経度

ズームレベル

マップタイプ

地図オブジェクト

地図を読み込む

おわりに

Google Static Maps APIの使い方（２）

format

scale

maptype

おわりに

Google Static Maps APIの使い方（１）

表示サンプル

注意点

概要

簡単な使い方

center

zoom

size

sensor

マーカーを表示する

マーカースタイル（全て省略可）

マーカーの場所

ほかにもパラメータがあります

気になった話題や技術、自社サービスについて書いていきます

2024年11月
日	月	火	水	木	金	土
« 2月
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

APIキーの取得

地図を表示する

Google Maps APIを読み込む

HTTPS

地図のDOM要素

地図のオプション

緯度と経度

ズーム レベル

マップ タイプ

地図オブジェクト

地図を読み込む

おわりに

format

scale

maptype

おわりに

表示サンプル

注意点

概要

簡単な使い方

center

zoom

size

sensor

マーカーを表示する

マーカースタイル（全て省略可）

マーカーの場所

ほかにもパラメータがあります

気になった話題や技術、自社サービスについて書いていきます

ズームレベル

マップタイプ