Googleマップとは何ですか?


HTML

GoogleマップはGoogleAPIです

GoogleFontsはGoogleAPIです

GoogleChartsはGoogleAPIです


ウェブページにGoogleマップを追加する方法を学びます。


おっとっと!何かがうまくいかなかった。
このページはGoogleマップを正しくロードしませんでした。技術的な詳細については、JavaScriptコンソールを参照してください。

私の最初のGoogleマップ

簡単なWebページから始めます。

マップを表示する場所に<div>要素を追加し、マップのサイズを設定します。

<!DOCTYPE html>
<html>
<body>

<h1>My First Google Map</h1>

<div id="map" style="width:100%;height:400px;">My map will go here</div>

</body>
<html>

マップを表示するJavaScript関数を追加します。

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);
}

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

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

centerプロパティは、マップを中央に配置する場所を指定します(緯度と経度の座標を使用)。

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

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



最後にGoogleAPIを追加します

マップの機能は、GoogleにあるJavaScriptライブラリによって提供されます。

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>

Googleマップチュートリアル

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



BESbswy