HTML Google Maps

❮ 前章へ次章へ ❯

Google マップは、web ページに地図を表示することを可能にします：

基本的な Web ページ

Google マップを Web ページに追加する方法を示すために、基本的な HTML ページを使用します：

例

<!DOCTYPE html>
<html>
<body>

<h1>My First Google Map</h1>

<div id="map">My map will go here</div>

</body>
<html>

Try it Yourself »

マップサイズを設定

マップサイズを設定します：

例

Try it Yourself »

Map プロパティ設定のための関数作成

この例では、Google Map の中心をイギリスのロンドンに定義します：

例

function myMap() {
    var mapOptions = {
        center: new google.maps.LatLng(51.5, -0.12),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.HYBRID
    }
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}

Try it Yourself »

例の説明

変数 mapOptions は、マップのプロパティを定義します。

center プロパティは、緯度と経度の座標を使用して、マップの中心をどこにするかを指定します。

zoom プロパティはマップのズームレベルを指定します（ズームレベルを体験してみてください）。

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

var map=new google.maps.Map(document.getElementById("map"), mapOptions); の行は、パラメータ（mapOptions）を使用して id="map" の <div> 要素内に、新しいマップを作成します。

Google Maps API の追加

最後に、ページに地図を表示します！

マップの機能は Google に置かれた JavaScript ライブラリで提供されます。 myMap 関数へのコールバックを使用してGoogle Maps API を参照するスクリプトを追加します：

例

Try it Yourself »

Google マップの詳細については、 Google マップ・チュートリアルをご覧ください。

❮ 前章へ次章へ ❯