わずか数分でカスタム埋め込み可能なGoogleマップを作成 - TechRepublic

Google Map Builderは
、スコットランドの開発者ドナルド・A・サザーランド氏によって開発されたツールです。このツールを使えば、ウェブページやウェブサイトに追加できるカスタムGoogleマップを編集・作成できます。このツールには、
マップコントロール、縮尺、ビュー、マップマーカーの追加・変更、デフォルトのズームレベルの設定
など、様々な機能が備わっています。

Google Map Builderの概要を、サンプルのindex.html
ウェブページドキュメントに埋め込まれた結果コードのデモを使用して紹介します。Google Map Builderと
デモ用のindex.htmlウェブページのスクリーンショットはすべて、私のWindows OSデスクトップにインストールされているChromeバージョン
31.0.1650.63 mから取得されています。

Google APIキーが必要です

必要なのはGoogle APIキーを追加することだけです。このキーは
埋め込みスクリプトコードに挿入されます。Google APIキーをまだお持ちでない場合は、
Google Maps APIを読み込むために取得する必要があります。
取得方法については、Googleチュートリアル「APIキーの取得」をご覧ください。

コントロール

ドナルドは、マップをカスタマイズするための便利なコントロールのコレクションを用意しています
。これらのコントロールは、送信して生成されたコードを取得すると、最終的にスクリプト関数に適用されます。コントロールとそのオプションは
以下にリストされています。アスタリスク（*）で示されているオプションは、各コントロールのデフォルト設定です
。

サイズ
幅 x 高さ（ピクセル） – (550 x 400*)
地図の中心– 緯度、経度、
ズームレベル
マーカーを追加– 空白、 行ごとに住所を追加
マーカーアイコンURL – URLでカスタムマーカーアイコンを追加できます
マップタイプのコントロール– なし、ドロップダウンメニュー、
水平バー*
ズームコントロール– なし、小、大、
デフォルト*
スケールコントロール– なし、標準*
ストリートビューコントロール– なし、標準*
パンコントロール– なし、標準*
概要コントロール– なし、開いている、
折りたたまれている*
ドラッグ可能– なし、標準*
ダブルクリックしてズーム– なし、標準*
マウスホイールでズーム– なし、標準*
地図の種類– 道路地図*、衛星地図、ハイブリッド、
地形図
マップテーマ（Snazzy Mapsより）– なし*

独自のマップマーカーをカスタマイズすることに興味がある場合は
、チュートリアル「Google マップのカスタマイズ: カスタムマーカー」をご覧ください。

Google マップをカスタマイズするデモ

選択されたコントロールオプションは、コード生成時にスクリプト変数となり、最終的には
ウェブサイトに埋め込むことができるカスタムGoogleマップを作成します。ここでは、APIキーと、緯度30度、経度-90度（別名「30×90」）に位置するニューオーリンズ東部の湿地帯の
よく知られたマッピング座標を使用して、サンプルマップを簡単にカスタマイズします。

地図のサイズはデフォルトの550 x 400ピクセルのままにし、マップコントロールの種類はドロップダウンメニュー、
ズームレベルは10、オーバービューコントロールは「開いた状態」に設定します。テーマはMapBoxの Snazzy Mapsを選択し、
その他のコントロールオプションはデフォルトのままにします。(Snazzy MapsはGoogle
マップ用の様々なスタイルのリポジトリを提供しています。すべてのスタイルはクリエイティブ・コモンズ表示ライセンスでライセンスされており、
無料で使用できます。)

コントロール選択の一部が図 Aに表示されています。

図A

すべてのコントロール
を選択したら、[コードの取得] ボタンをクリックすると、生成されたコードが
ポップアップウィンドウに表示されます (図 B)。

図B

Google Map Builder は、以下のコードスニペットに示すように、幅と高さを設定するマップ ID を含む CSS スタイルを生成します。

index.html ファイルに追加したHTML コードスニペットを以下にコピーします。

<p><strong>Google マップビルダーのデモ – 「Thirty By Ninety」</strong></p>

<セクション id="マップ">

</セクション>

Google Map Builder が生成するスクリプトコードには
、ツールからのコントロール選択に基づくすべての機能が含まれており、
コードスニペットの一部を以下に示します。

function init() {
var mapOptions = {
center: new google.maps.LatLng(30,-90),
zoom: 10,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT,
},
disableDoubleClickZoom: true,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
},
scaleControl: true,
scrollwheel: true,
streetViewControl: true,
draggable: true,
overviewMapControl: true,
overviewMapControlOptions: {
opened: true,
},
}

var mapElement = document.getElementById('map');
var map = new google.maps.Map(mapElement, mapOptions);
var locations = [

};

}
</スクリプト>

結果の Google マップは図 Cに表示されます。

図C

このデモマップコードをGoogle Map Builderで生成し、デモ用の
index.htmlファイルに数分で埋め込むことができました。Snazzy Mapsの使いやすさ、豊富なコントロールオプション、そして豊富なマップテーマのおかげで、わずか数分で独自のカスタムGoogleマップを作成して埋め込むことが
できる強力なツールとなっています。