スキップしてメイン コンテンツに移動

【Maps JavaScript API】マップに追加できるオブジェクトの概要

今回はGoogle Maps JavaScript APIで表示されるマップにポイントや線、領域などを追加する概要について解説したいと思います。 まず、Google Maps JavaScript API では「マップの上に追加するオブジェクト」のことを「オーバーレイ」と呼びます。


オブジェクトを追加することを「オーバーレイを追加する」と言ったり、さらに簡略的に「レイヤーを追加する」とも言うことがありますが、オーバーレイは、over layerの略語で、日本語に訳すと「上層」と表現されます。(レイヤーとは日本語に訳すと「層」と表現されます。)
すなわち、地図は一番下の層にあり、その上にオブジェクト(レイヤー(層))を重ねていくことで、階層のように地図上に様々なものを表現しています。


このオーバーレイは経度と緯度で表される座標に紐づいているため、マップをドラッグして位置を変更したり、ズームレベルを変更したりすると連動して動きます。
Google Maps JavaScript API には、プロブラムで追加できる複数のタイプのオーバレイがあります。 では、その種類を見ていきましょう。

オーバーレイのタイプについて

オーバーレイのタイプと種類は以下の通りとなります。
これから複数回に分けて、このオーバーレイを追加する方法を解説していきます。 解説ページが作成されている箇所には以下表のURLにリンクを追加していますので、オーバレイの追加方法についてぜひ確認してみてください。
まずはオーバーレイにどのようなタイプがあるのかをしっかり覚えておきましょう。

タイプ 詳細 URL
マーカー マップ上の一つの場所に、マーカーの標準画像を使用して表示します。この標準画像は、自作画像に変更することも可能です。(この自作画像のことをカスタム画像と呼びます)
情報ウィンドウ マップ上の指定の場所にポップアップ ウィンドウでコンテンツ(通常はテキストまたは画像)を表示します。
ポリライン 地図上の線は、順序付けされた一連の場所を表すポリラインを使用して表示します。
ポリゴン 地図上の任意の図形の領域は、ポリゴンを使用して表示します。
シンボル マーカー上のアイコンのカスタマイズまたはポリラインへの画像の追加を行うために使用します。
地面オーバーレイ マップ上に画像を配置する場合、地面オーバーレイを使います。
カスタムオーバーレイ OverlayView インターフェースを実装して、独自のカスタム オーバーレイを実装します。
マップレイヤー オーバーレイ マップタイプを使用して表示します。

ご質問などございましたら、お気軽に下記コメント欄にお寄せください。

※当サイトで使用しているコンテンツについて
Googleマップの地図画面については、自作コンテンツを使用しています。
地図画像の使用については地図の共有、埋め込み方法についてをご確認ください。
また、手順説明に使用してるGoogleのホームページ、プロダクトページなどのキャプチャ画像についてはガイドラインに従った形で掲載しています。
詳しくはGoogle ブランド使用許諾 ブランド利用規約の概要よくある質問の内容をご確認ください。
(※上記説明内では、「必ず一切加工せずに使用してください。」と記載がありますが。当サイトで使用する場合、個人情報等保護のため、一部モザイク処理をしています。)
万が一、当サイトに規約違反となる画像等を発見した場合は、直ちにご報告ください。
尚、当サイトに掲載されている文章、画像等の著作権は、当社または文章、画像等の提供者にあります。これらの著作物は、「私的利用のための複製」や「引用」などの著作権法上認められた場合を除き、無断で転用・引用することはできません。ご利用になりたいものがありましたら、Google+よりお問い合わせください。