How TO - Google Maps

❮ 前章へ 次章へ ❯

web ページに Google Map を追加する方法を学習します。



初めての Google Map

簡単な基本 web ページから始めましょう。

マップを表示したい場所に <div> 要素を追加します:

<!DOCTYPE html>
<html>
<body>

<h1>My First Google Map</h1>

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

</body>
<html>
Try it Yourself »

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

<div id="map" style="width:400px;height:400px;background:yellow">
Try it Yourself »

マップを表示する関数を作成します:

function myMap() {
    var mapCanvas = document.getElementById("map");
    var mapOptions = {
        center: new google.maps.LatLng(51.5, -0.2),
        zoom: 10
    };
    var map = new google.maps.Map(mapCanvas, mapOptions);
}
Try it Yourself »

mapCanvas 変数は、マップの HTML 要素です。

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

center は、緯度と経度座標を使用して、マップをどこに配置するかを指定します。

zoom プロパティは、マップのズームレベルを指定します(ズームレベルを試してみてください)。

google.maps.Map オブジェクトは、mapCanvas と mapOptions をパラメータとして作成されます。


Google API の追加

map の機能は、Google の JavaScript ライブラリによって提供されます:

<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>
Try it Yourself »

Google Maps チュートリアル

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


❮ 前章へ 次章へ ❯