Google Maps APIのサンプルを色々と6種類作ってみたので解説

Google Maps APIを使ったページが必要になりそうだったので、調べながらですが6種類、サンプルを作ってみましたので解説してみます。

サンプル作りを終えた今考えると、さほど難しいことをせずとも色々と地図を使ったページが作れるのはさすが Googleって感じでしょうか。もっとも、作ってる時はかなり「あーでもないこーでもない」と色々と考えましたが（苦笑）

Google Map APIサンプル

目次 サンプル一覧

• サンプル1 座標を使った地図の表示
• サンプル2 ジオコーディングを使った地図の表示
• サンプル3 指定した地点を中心とした座標の取得
• サンプル4 任意の地点を中心とした座標の取得
• サンプル5 ２点間のルート検索
• サンプル6 任意の２点間のルート検索

となっております。

プロジェクトの作成とAPIキーの取得

以前ポストしたこちらのポストと内容は被りますが、軽く追ってみます。

↑ Developpersコンソールにアクセスし、「プロジェクトを作成」ボタンをクリック。

https://console.developers.google.com/project

↑ 好きなプロジェクト名を入力。今回はTestMapProject」とします。
プロジェクトIDが自動的に出来上がります。

↑ しばらく待つと作成したプロジェクト画面へ移動するので、左メニューの[APIと認証] → [API]をクリック

↑ 「Google Maps JavaScript API」をクリック。

↑ 「APIを有効にする」ボタンをクリック

↑ 有効になりました。
左サイドメニューの「APIと認証」→「認証情報」をクリック

↑ 「新しいキーを作成」ボタンをクリック。

↑ ブラウザから使用させるので「ブラウザキー」をクリック

↑ どのリファラーからのアクセスを許可するのか設定します。

例えば「https://lightning-bolt.xyz/」以下のページで利用したい場合なら「lightning-bolt.xyz/*」と設定します。
改行で区切って複数サイトの指定も可能なようです（未確認）。

↑ 入力後、APIキーが作成され、リファラ等が確認できるようになります。
なお「このAPIキー」はHTMLに記述が必要で、他人に知られても問題ない情報、いわゆる公開情報扱いとされます。

サンプル１ 座標を使った地図の表示

デモ

緯度と経度を用いて中心点を決め、表示させる方法です。
サンプルデモはコチラから。

試しに「大阪ビジネスパーク円形ホール」を中心としたマップを表示させてみます。
座標を取得するのには他のサービスを利用する必要があるのですが、後のほうで紹介するコチラのサンプルで座標を取得します。

なんだか中学生の時に作った、「はんだゴテ」を使わないと作れない「はんだゴテ」を思い出しました。

取得した値は、
経度(Lng)：135.52984049999998
緯度(Lat)：34.692543
と、なりました。

余談ですが、
経度は英語で「Longitude」緯度は英語で「Latitude」と書き、経度とは地球儀を見て、イギリスのグリニッジ天文台跡を通る縦の線（子午線）を基準（0度）とし、東西にそれぞれ180度まで示すラインのことで、緯度とは赤道を0度とし、南北へそれぞれ90度まで示すラインのことです。
日本標準子午線は東経135度の兵庫県の明石市になるというのは、小学生時分に習ったのではないでしょうか。

js

それはさておき、得た値を以下のように設定。
***には先ほど取得したAPIキーを記述してください。

[js]

[/js]

CSS

キャンバス用のスタイルと、力業でセンターマークを表示させます。
以降のセンターマークがあるサンプルにはこのCSSを使用しています。

[css]

[/css]

マップの表示HTML

マップを表示させるには下記のタグを用いるだけです。

[html]

[/html]

結果(画像)

↑ このようになれば成功。

解説

地図を表示させるdivタグ

地図を表示させるdiv要素にはid属性を用います。
上記の場合、地図を表示しているのはスクリプトで設定されている、id属性が"map_canvas"のDIVとなります。

地図のサイズ

表示させる地図のサイズはスクリプトで設定するのではなく、div要素のサイズで設定します。
設定方法はCSSにてwidth値とheight値で指定するだけです。

LatLng クラス (緯度・経度)

LatLngクラスは座標位置を表すためのクラスです。

[js]
var latlng = new google.maps.LatLng(緯度, 経度);
[/js]

第1引数に緯度を、第2引数に経度を入力します。緯度、経度の数値は、

• 緯度：-90～90
• 経度：-180～180

の範囲で設定してください。

サンプルでもありますが、緯度が34.692543、経度が135.52984049999998の場合の座標を作成する場合は、以下のようにすると作成できます。

[js]
var latlng = new google.maps.LatLng(34.692543, 135.52984049999998);
[/js]

Mapクラス

地図を作成するにはMapクラスを利用します。

第1引数には地図キャンバスとなるエレメントを、
第2引数にはオプションとなるオブジェクトデータを指定。

[js]
Map(
Element, // 地図の表示領域となるエレメント
MapOptions, // 地図の表示オプション
);
[/js]

サンプルでいうところのこの部分です。

[js]
// canvasに[mapOptions]内容の、地図のインスタンス(map)を作成する
var map = new google.maps.Map(canvas, mapOptions);
[/js]

MapOtionsオブジェクト(一部)

以下に地図作成時のオプション（の一部）を書き出します。
「zoom」と「center」が必須で、それ以外は自由に組み合わせが可能。

マップを表示させる

最後に、Googleマップを表示させるには、addDomListener を使って表示させます。

[js]
google.maps.event.addDomListener(window, 'load', initialize);
[/js]

サンプル2 ジオコーディングを使った地図の表示

デモ

座標ではなく、住所や建物などの名称で指定した地点を中心点としてマップを表示させる方法です。
「大阪府大阪市中央区***」という指定から、「大阪駅」や「大阪城」など、ランドマーク名でも座標を取得してくれるのでより実用的なマップが作成可能。

サンプルのデモはコチラから。

試しに「ユニバーサル・スタジオ・ジャパン」を中心としたマップを表示させてみます。

js

jsを以下のようにします。
マップを表示させるタグはサンプル1と同様とします。

[js]


[/js]

マップの表示HTML

[html]

[/html]

結果(画像)

↑ このようになれば成功。

サンプル3 指定した地点を中心とした座標の取得

デモ

フォームを使って地点を指定するマップの練習用として、jsソース内で指定した地点を中心としたマップを作成し、座標を取得するサンプルです。

サンプルのデモはコチラから。

サンプルは「名古屋城」をデフォルトの中心点としています。
jQueryは座標をフォームへセットするのに使用しています。

js

[js]



[/js]

結果(画像)

↑ このようになれば成功。

サンプル4 任意の地点を中心とした座標の取得

デモ

サンプル3で作成したものを拡張し、フォームで入力した任意の地点を中心とする地図を作成するサンプルです。
地図アプリの基本という感じでしょうか。

サンプルのデモはコチラから。

サンプルのデフォルトは青森県の「特別史跡五稜郭跡」が中心となっていますが、地点・住所を入力して検索ボタンクリックで、入力地点の座標を中心とした地図が表示されます。

js

[js]

[/js]

結果(画像)

↑　このようになれば成功。「阪神甲子園球場」と入力し検索ボタンを押した場合の例です。

サンプル5 ２点間のルート検索

地点Aと地点B間のルート検索をする前に、やはり練習としてjsソース内に指定した2地点のルートを検索、描画、見し淳の一覧を表示、という事をするサンプルです。

デモ

サンプルのデモはコチラから。

サンプルは「東京タワー」 → 「東京スカイツリー」間のルート検索をさせています。
ちなみに大阪の人間なので、一番いい経路かどうかの判断はできません（苦笑）

しかしながら、実家や住んでいる地区周辺の検索をすると結構いい感じのルートを検索してくれているので、ほぼほぼ正しい経路だとは推測できます。

js

[js]

[/js]

マップ表示部分

[html]

[/html]

結果(画像)

↑ 地図部分

↑ 経路部分。テーブル形式で自動的に生成されます。

サンプル6 任意の２点間のルート検索

では最後に、任意の2点を入力し、検索できる地図のサンプルです。

デモ

サンプルのデモはコチラから。

js

[js]

[/js]

マップ表示HTML

[html]

[/html]

結果(画像)

↑ 地図部分

↑ 経路部分。テーブル形式で自動的に生成されます。

-Google
-API, Developper Tools, Google, google developpers, Google Maps API, googleマップ, グーグルマップ