最新のWeb開発のチュートリアル
 

Googleマップの基本

❮前 次の章❯

基本のGoogleマップを作成します。

この例ではロンドン、イングランドの中心にGoogleマップを作成します。

例

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></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>
»それを自分で試してみてください

このページの残りの部分は、上記のステップバイステップの例を説明します。

1. GoogleのAPIをロードします

GoogleマップのAPIはJavaScriptライブラリです。 これは、と、Webページに追加することができ<script>タグ：

<script src="http://maps.googleapis.com/maps/api/js"></script>

2.設定されたマップのプロパティ

地図を初期化する関数を作成します。

function initialize() {
}

初期化関数では、オブジェクトの作成(mapProp)マップするためのプロパティを定義するには：

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

中央プロパティは、マップを中央に場所を指定します。 特定のポイントを地図の中心にするのLatLngオブジェクトを作成します。 緯度、経度：順番に座標を渡します。

ズームプロパティは、マップのズームレベルを指定します。 ズーム：0地球のマップが完全にズームアウトを示しています。 高いズームレベルは、より高い解像度で拡大表示します。

mapTypeIdプロパティは、表示するマップのタイプを指定します。 次のマップタイプがサポートされています。

  • ロードマップ(normal, default 2D map)
  • SATELLITE (photographic map)
  • HYBRID (photographic map + roads and city names)
  • TERRAIN (map with mountains, rivers, etc.)

3.地図のコンテナを作成します。

作成し<div>マップを保持する要素を。 サイズ要素にCSSを使用します。

<div id="googleMap" style="width:500px;height:380px;"></div>

マップは常にます"inherit" 、そのコンテナ要素からそのサイズを。

4.マップオブジェクトを作成します。

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

上記のコードは内部の新たなマップ作成<div>渡されたパラメーターを用いて、ID = "Googleマップ"を持つ要素を(mapProp) 。

5.地図をロードするには、イベントリスナーを追加します。

実行されたDOMリスナーの追加initialize()ウィンドウの負荷機能を(when the page is loaded) ：

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

非同期の読み込み

オンデマンドでGoogle MapsのAPIをロードすることも可能です。

次の例では、ページの読み込みが完了した後にGoogle MapsのAPIをロードするためにwindow.onloadを使用しています。

loadScript()関数は、Google Maps APIを作成する<script>タグを。 また、コールバックは=初期化パラメータは、実行するためのURLの末尾に追加されたinitialize() APIが完全にロードされた後の機能を：

例

function loadScript() {
  var script = document.createElement("script");
  script.src = "http://maps.googleapis.com/maps/api/js?callback=initialize";
  document.body.appendChild(script);
}

window.onload = loadScript;
»それを自分で試してみてください

複数の地図

以下の例では、1つのWebページ（別のマップ型を持つ4つのマップ）上の4つのマップを定義します。

例

var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapProp1);
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);
»それを自分で試してみてください

GoogleのAPIキー

Googleは、ウェブサイトには、GoogleのAPIを呼び出すことができます一日あたりの多くの千倍。

あなたが重いトラフィックのために計画している場合は、Googleから無料のAPIキーを取得する必要があります。

行くhttps://console.developers.google.com無料のキーを取得します。

GoogleマップではAPIをロードする重要なパラメータでAPIキーを見つけることを期待します。

<script src="http://maps.googleapis.com/maps/api/js? key=YOUR_KEY "></script>

❮前 次の章❯