今回から数回にわたって「Google Maps JavaScript API v3」の使い方について書いていきます。
執筆時点でのGoogle Maps JavaScript API v3のリリースバージョンは3.9 です。
現在の公式ドキュメント には、
すべての Maps API アプリケーション* では、API キーを使用して Maps API を読み込む必要があります。API キーを使用することで、アプリケーションの Maps API 使用状況を各自でモニタリングすることが可能になります。また、API キーを元に、必要に応じて、Google より、アプリケーションに関して連絡を取ることがあります。アプリケーションの Maps API 使用量が使用制限を超過した場合、API キーを使用して Maps API を読み込み、追加割り当てを購入する必要があります。
と書かれております。
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コンソールの画面が現在とは異なります
地図を表示する
まずは簡単な例を紹介します。以下の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です。
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 オブジェクトを作成します。このオブジェクトは構築するのではなく、オブジェクト リテラルとして作成します。
緯度と経度
特定の地点を地図の中心として設定するには、その位置を格納するための LatLng オブジェクトを作成し、位置の座標を「緯度, 経度」の順序で渡します。
center = new google.maps.LatLng(32.806187,130.705832)
ズーム レベル
地図を表示するための最初の解像度は、zoom プロパティで設定します。ズーム 0 は、完全にズームアウトして地球全体を表示した状態です。ズーム レベルを上げるほど、ズームインして解像度が高くなります。
zoom: 8
地球全体の地図を 1 つの画像として表示するには、巨大な地図を用意するか、解像度をかなり下げて小さな地図で表示する必要があります。そのため、Google マップおよび Maps API では、地図画像を「タイル」に分割して「ズーム レベル」ごとに保持しています。低いズーム レベルでは、少数のマップ タイルで広い領域をカバーします。ズーム レベルが上がるほど、解像度の高いタイルで、より小さい領域をカバーします。
マップ タイプ
初期マップ タイプも明示的に設定する必要があります。
mapTypeId: google.maps.MapTypeId.ROADMAP
サポートされているマップ タイプは次のとおりです。
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 オブジェクトを作成する関数を実行します。これにより、予測できない動作を防ぎ、地図を描画する方法とタイミングを正確にコントロールすることができます。
おわりに
以上で冒頭に紹介した地図を表示できるようになります。
前回はGoogle Static Maps APIで基本的な地図を表示する方法を書きました。
format
結果として得られる画像の形式を定義します。
Googleの公式ドキュメントでは、
通常、最も圧縮率が高いのは JPEG で、GIF や PNG はより細かいところまで表示する場合に適しています。
と書かれております。
pngの場合(デフォルト)
jpgの場合
scale
返されるピクセルの数に影響します。scale=2はscale=1の2倍のピクセル数を返しますが、地図の表示範囲と詳細度は維持されます（つまり、地図の内容は同じです）。
scale=1(デフォルト)
scale=2
maptype
作成する地図のタイプを定義します。maptype に指定できる値は、roadmap、satellite、hybrid、および terrain です。
・roadmap（デフォルト）
・satellite
・terrain
・hybrid
おわりに
他にも、
pathは地図上にラインを引く（道案内用のラインを引くなど）が可能になるパラメータですので、静的な地図にラインを引きたい方はこのパラメータを使うといいですよ。
次回は「Google Maps JavaScript API v3」について解説して行こうと思います。株式会社みのモン 公式facebookページ
今回は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には使用制限があります。（地図読み込み回数を超過した分のオンライン購入価格を教えてください）
概要
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
静的マップをリクエストしているアプリケーションが、センサーを使用してユーザーの位置情報を取得しているかどうかを指定します。
マーカーを表示する
マーカーを表示するためには「markers」というパラメータを使用します。
マーカースタイル（全て省略可）
マーカースタイルの記述は、パイプ文字（|）で区切られます。
・size:（省略可能）: マーカーのサイズを {tiny, mid, small} のセットから指定します。size パラメータが設定されていないと、マーカーはデフォルト（normal）サイズで表示されます。
※小さいサイズで、赤、Mという文字を指定の場合
&markers=size:tiny%7Ccolor:red%7Clabel:M
となります。（この後ろに後述するマーカーの位置情報をつなげることになります）
これらのマーカーの代わりに、カスタムアイコンを使用することができます。こちら をご覧ください。
マーカーの場所
マーカーの場所は地図の中心を定義した時と同様に、緯度経度のペアまたは文字列による住所や場所で指定が可能です。
markersはマーカーごとに指定するため最初のサンプルのように複数のマーカーを表示したい場合は複数個になることがあります。
&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です。
&markers=size:small%7Ccolor:red%7Clabel:M%7C35.660347,139.729207%7C35.665185,139.730558%7C35.657392,139.748207
ほかにもパラメータがあります
これで基本的な使い方の説明は終わりです。
次回は他のパラメータについて触れたいと思います。
営業時間を調べることができるサイトを公開しました。http://eigyojikan.minomon.jp/
まだ十分に機能と情報が入っていませんが、αバージョンとして公開し反応を見て改善をしながら正式公開に向かおうと思っております。
夜中に急にCDやDVD・ゲームなどを買いたくなった時に、まとめて開いている店舗を探したい時などに使えます。
今後の追加予定機能として、
更新情報はtwitter（@eigyojikan_info）でも発信しておりますので、興味がある方はチェックしてみてください。
投稿ナビゲーション
![[画像処理][PHP]GDライブラリを使っている際に表示されるエラーへの対処法](https://minomon.jp/blog/wp-content/uploads/2014/02/GREEN_NO201401255001-672x372.jpg)
