以上で完了です。

開発を始めるには、デベロッパー ドキュメント をご覧下さい。

Google Maps JavaScript API をアクティベートする

まず初めに Google Developers Console で次の作業を行います。

  1. プロジェクトを作成または選択する
  2. Google Maps JavaScript API と関連サービスをアクティベートする
  3. 適切なキーを作成する
続ける

マーカーが配置された Google マップをウェブサイトに追加する

はじめに

このチュートリアルでは、マーカーが配置されたシンプルな Google マップをウェブページに追加する方法について説明します。 このチュートリアルは、HTML および CSS について少しまたは中程度の知識があり、JavaScript に関しても多少の知識があるユーザーを対象としています。

マップ作成に関する高度なガイドについては、デベロッパー ガイドをご覧ください。

このチュートリアルで作成するマップを次に示します。

以下のセクションに、このチュートリアルでマップを作成するために必要なコード全体を載せています。

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}
<h3>My Google Maps Demo</h3>
<div id="map"></div>
#map {
  height: 400px;
  width: 100%;
 }
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

実際に試す

コードブロックの右上にカーソルを合わせて、コードをコピーするか、コードを JSFiddl で開きます。

<!DOCTYPE html>
<html>
  <head>
    <style>
       #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
      function initMap() {
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

スタートガイド

マーカーが配置された Google マップをウェブページに作成するには、次の 3 つのステップに従います。

  1. HTML ページを作成する
  2. マーカーが配置されたマップを追加する
  3. API キーを取得する

ウェブブラウザが必要です。 プラットフォームに応じて、Google Chrome(推奨)、Firefox、Safari、Internet Explorer などのよく知られたブラウザを選択します。

ステップ 1: HTML ページを作成する

基本的な HTML ウェブページのコードを次に示します。

<h3>My Google Maps Demo</h3>
<div id="map"></div>
#map {
  width: 100%;
  height: 400px;
  background-color: grey;
}
<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        width: 100%;
        height: 400px;
        background-color: grey;
      }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
  </body>
</html>

このページは、レベル 3 の見出し(h3)、1 つの div 要素、1 つの style 要素から成るとても基本的なページです。これらのすべての要素については、以下の表で説明しています。 ウェブページには任意のコンテンツを追加することができます。

実際に試す

上記のサンプルコードの右上隅に 2 つのボタンがあります。 左端のボタンをクリックすると、JSFiddle のサンプルが開きます。

コードを理解する

次の表では、上記のコードの各セクションについて説明しています。

コードと説明
<html>
 <head>
 </head>
 <body>
 </body>
</html>

見出しと本文で構成される HTML ページを作成します。
<h3>My Google Maps Demo</h3>

マップの上にレベル 3 の見出しを追加します。
<div id="map"></div>

Google マップを表示するページ領域を定義します。
チュートリアルのこの段階では、マップをまだ追加していないため、div は単に灰色のブロックとして表示されます。 適用した CSS により、この要素は灰色で表示されます。 詳しくは以下をご覧ください。
<style>
 #map {
   width: 100%;
   height: 400px;
   background-color: grey;
 }
</style>

head 内の style 要素はマップの div のサイズを設定します。


div の幅と高さに 0 ピクセルよりも大きい値を設定し、マップが表示されるようにします。


ここでは、div の高さは 400 ピクセルに、幅は 100% に設定されているため、マップはウェブページの幅いっぱいに表示されます。

background-color: greydiv に適用して、マップ領域をウェブページに表示します。

ステップ 2: マーカーが配置されたマップを追加する

このセクションでは、ウェブページに Google Maps JavaScript API を読み込む方法と、API を使用してマーカー付きのマップを追加する独自の JavaScript を記述する方法について説明します。

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}
<h3>My Google Maps Demo</h3>
<div id="map"></div>
#map {
  height: 400px;
  width: 100%;
 }
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
      function initMap() {
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

実際に試す

上記のサンプルコードの右上隅に 2 つのボタンがあります。 左端のボタンをクリックすると、JSFiddle のサンプルが開きます。

コードを理解する

上記のサンプルには、div を灰色にする CSS が含まれていないことに注意してください。 これは、div にマップが含まれているためです。

次の表では、上記のコードの各セクションについて説明しています。

コードと説明
<script>
async defer
src ="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
</script>

script は、指定した URL から API を読み込みます。
callback パラメータは、API が完全に読み込まれたあと、initMap 関数を実行します。
async 属性は、API の読み込み中に、ブラウザがページの残りを引き続きレンダリングできるようにします。
key パラメータには API キーが含まれます。 このチュートリアルを JSFiddle で試す場合は、独自の API キーは必要ありません。 API キーを取得する手順については、ステップ 3: API キーを取得するを ご覧ください。
<script>
  function initMap() {
  }
</script>

initMap 関数は、ウェブページの読み込み時にマップを初期化して追加します。 script タグを使用して、initMap 関数を含む独自の JavaScript を読み込みます。
getElementById

ウェブページ上のマップ div を取得するために、この関数を追加します。
new google.maps.Map()

div 要素内にマップを作成するために、Google マップ オブジェクトを追加します。
{
  var uluru = {lat: -25.363, lng: 131.044};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

}

中心やズームレベルなどのプロパティをマップに追加します。 その他のプロパティ オプションのドキュメントをご覧ください。
center プロパティは、マップの中心位置を API に示します。 マップの座標は、緯度経度の順に設定します。
zoom プロパティは、マップのズームレベルを指定します。 Zoom:0 は最小ズームレベルで、地球全体を表示します。 より高解像度で地球にズームインするには、ズームレベルにより大きい値を設定します。
var marker = new google.maps.Marker({
  position: uluru,
  map: map
});

このコードを追加してマップにマーカーを配置します。 position プロパティは、マーカーの位置を設定します。

ステップ 3: API キーを取得する

このセクションでは、独自の API キーを用いて、Google Maps JavaScript API を使用するためにアプリを認証する方法を説明しています。

次のステップに従って、API キーを取得します。

  1. Google API Console を開きます。
  2. プロジェクトを作成または選択します。
  3. [Continue] をクリックして、API と関連サービスを有効にします。
  4. [Credentials] ページで API キー を取得します(さらに、API キーの制限を設定します)。

    注: 制限のない既存の API キーまたはブラウザの制限が設定されたキーを所有している場合は、そのキーを使用することもできます。

  5. 割り当て量の盗用を防ぐため、ベスト プラクティスに従って API キーを保護します。

  6. (オプション)課金を有効化します。 詳細については、使用制限をご覧ください。

  7. このチュートリアルのページにある全体のコードをテキスト エディタにコピーします。 テキスト エディタをまだ用意していない場合は、 次のテキスト エディタを使用することをお勧めします。Notepad++(Windows の場合)、TextEdit(macOS の場合)、gedit や KWrite など(Linux マシンの場合)。

  8. URL の key パラメータの値を実際の API キー(上記のステップで取得した API キー)に置き換えます。

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
      async defer>
    </script>
    
  9. このファイルに .html で終わる名前(google-maps.html など)を付けて保存します。

  10. HTML ファイルをデスクトップからウェブブラウザにドラッグして、ブラウザで HTML ファイルを読み込みます。 ほとんどのオペレーティング システムでは、HTML ファイルをダブルクリックしても同じ操作ができます。

ヒントとトラブルシューティング

  • JSFiddle インターフェースを使用して、別々のペインに HTML、CSS、および JavaScript コードを表示します。 コードを実行して、[Results] ペインに出力を表示できます。

  • スタイルやプロパティなどのオプションを微調整して、マップをカスタマイズできます。 マップのカスタマイズの詳細については、[Maps JavaScript API] と (/maps/documentation/javascript/adding-a-google-map) を詳しくご覧ください。

  • ウェブブラウザで Developer Tools Console を使用して、コードをテストして実行し、エラー レポートを確認してコードの問題を解決します。

    Chrome でコンソールを開く場合、キーボード ショートカット Command+Option+J(Mac の場合)または Control+Shift+J(Windows の場合)が使用できます。

フィードバックを送信...

Google Maps JavaScript API
Google Maps JavaScript API
ご不明な点がありましたら、Google のサポートページをご覧ください。