Google Maps 基本

シンプルな Google マップを作成する

では、シンプルな Google マップを作成しましょう。

以下は、イギリスのロンドンを表示した Google マップです：

例

<!DOCTYPE html> <html> <head> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDJW4jsPlNKgv6jFm3B5Edp5ywgdqLWdmc&callback=initMap" async defer></script> <script> function initialize() { var mapProp = { center:new google.maps.LatLng(51.508742,-0.120850), zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("googleMap"), mapProp); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="googleMap" style="width:500px;height:380px;"></div> </body> </html>

試してみる »

例の解説

上記の例を使って Google マップの作成プロセスを解説します。

アプリケーションで HTML5 を宣言する必要があるのはなぜですか？

<!DOCTYPE html>

ほとんどのブラウザは「標準モード」の HTML5 ドキュメントでページをレンダリングします。つまり、アプリケーションは主要なブラウザと互換性があるということです。

また、DOCTYPE タグがない場合、ブラウザは互換モード (quirks mode) でページコンテンツをレンダリングします。

ヒント：注意すべき点は、「互換モード」の一部の CSS は標準モードでは使用できないことです。具体的なアプリケーションでは、パーセントベースのサイズはすべて親ブロック要素から継承する必要があります。親モジュールでサイズが指定されていない場合、デフォルトは 0 x 0 ピクセルです。パーセンテージを使用したい場合は、<style> タグ内で次のように宣言できます：

このスタイル宣言は、地図モジュール（GoogleMap）の HTML の高さが 100% であるべきことを示しています。

Google マップ API キーを追加する

以下の例では、最初の <script> タグに Google マップ API を含める必要があります：

Google で生成した API キーをkeyパラメータ (key= にYOUR_API_KEY)。

The sensorこのパラメータは必須で、アプリケーションがセンサー（GPS ナビゲーションなど）を使用してユーザーの位置を特定するかどうかを示します。パラメータ値は true または false に設定できます。

HTTPS

アプリケーションが安全な HTTP（HTTPS：HTTP Secure）アプリケーションである場合は、HTTPS を使用して Google マップ API を読み込むことができます：

非同期読み込み

同様に、ページが完全に読み込まれた後に Google マップ API を読み込むこともできます。

以下の例では、window.onload を使用して、ページが完全に読み込まれた後に Google マップを読み込みます。loadScript() 関数は、Google マップ API を読み込むための <script> タグを作成します。さらに、タグの末尾に callback=initialize パラメータが追加されています。initialize() はコールバック関数として、API が完全に読み込まれた後に実行されます：

例

function loadScript() { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyBzE9xAESye6Kde-3hT-6B90nfwUkcS8Yw&sensor=false&callback=initialize"; document.body.appendChild(script); } window.onload = loadScript;

試してみる »

地図のプロパティを定義する

地図を初期化する前に、地図のいくつかのプロパティを定義するための Map プロパティオブジェクトを作成する必要があります：

var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

center（中心点）

center プロパティは地図の中心を指定します。この中心は座標（緯度、経度）によって地図上に中心点を作成します。

Zoom（ズームレベル）

zoom プロパティは地図のズームレベルを指定します。zoom: 0 は地球全体の地図を完全にズームアウトして表示します。

MapTypeId（地図の初期タイプ）

mapTypeId プロパティは地図の初期タイプを指定します。

mapTypeId には次の4つのタイプがあります：

google.maps.MapTypeId.HYBRID：衛星画像に主要道路の透明レイヤーを表示します。
google.maps.MapTypeId.ROADMAP：通常の道路地図を表示します。
google.maps.MapTypeId.SATELLITE：衛星画像を表示します。
google.maps.MapTypeId.TERRAIN：地形や植生などの自然の特徴を備えた地図を表示します。

Google マップをどこに表示するか

通常、Google マップは <div> 要素内で使用されます：

注意：地図は div で設定されたサイズで表示されるため、<div> 要素内で地図のサイズを設定できます。

Map オブジェクトを作成する

var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);

上記のコードは、パラメータ (mapProp) を使用して <div> 要素（id は googleMap）内に新しい地図を作成します。

ヒント：ページ内に複数の地図を作成したい場合は、新しい地図オブジェクトを追加するだけです。

以下の例では、4つの地図インスタンスを定義しています（4つの地図は異なる地図タイプを使用しています）：

例

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); var map2 = new google.maps.Map(document.getElementById("googleMap2"),mapProp2); var map3 = new google.maps.Map(document.getElementById("googleMap3"),mapProp3); var map4 = new google.maps.Map(document.getElementById("googleMap4"),mapProp4);

試してみる »

地図を読み込む

ウィンドウの読み込み後、initialize() 関数を実行して Map オブジェクトを初期化します。これにより、ページが完全に読み込まれた後に Google マップが読み込まれることを確認できます：

google.maps.event.addDomListener(window, 'load', initialize);

その他の拡張