google-maps-api-3google-maps-api-3を使い始める


備考

Googleの公式ドキュメント

このトピックの例について

  • YOUR_API_KEYは、独自のアプリケーションAPIキーに置き換える必要があります。 APIキーを取得し、 Google APIコンソールで設定することができます

基本

CSS

別のCSSファイル、または<style type="text/css">...</style> HTMLスタイルタグ内で、Googleが使用することをアドバイスする最小限のCSSルールは次のとおりです。

html, body {
    height: 100%; 
    margin: 0; 
    padding: 0;
}

#map {
    height: 400px;
}
 

HTML

ウェブアプリケーション内に真のDOCTYPE を宣言することをおすすめします。

<!DOCTYPE html>
 

アプリケーションでGoogle Maps JavaScript APIを読み込むには、次のscriptタグを使用します。

<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize">
</script>
 

マップを保持するHTML要素を作成します。

<div id="map"></div>
 

JavaScript

ここでは、 MapMarkerを表示する非常に簡単な例を示します。

function initialize() {

    // Create a LatLng object
    // We use this LatLng object to center the map and position the marker
    var center = new google.maps.LatLng(50,0);

    // Declare your map options
    var mapOptions = {
        zoom: 4,
        center: center,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // Create a map in the #map HTML element, using the declared options
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);

    // Create a marker and place it on the map
    var marker = new google.maps.Marker({
        position: center,
        map: map
    });
}
 

完全な例

<!DOCTYPE html>
<html>
    <head>
        <title>Simple Map</title>
        <meta name="viewport" content="initial-scale=1.0">
        <meta charset="utf-8">
        <style>
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #map {
                height: 400px;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script>
            function initialize() {

                // Create a LatLng object
                // We use this LatLng object to center the map and position the marker
                var center = new google.maps.LatLng(50, 0);

                // Declare your map options
                var mapOptions = {
                    zoom: 4,
                    center: center,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                // Create a map in the #map HTML element, using the declared options
                var map = new google.maps.Map(document.getElementById("map"), mapOptions);

                // Create a marker and place it on the map
                var marker = new google.maps.Marker({
                    position: center,
                    map: map
                });
            }
        </script>
        <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize" async defer></script>
    </body>

</html>
 

デモ

JSFiddleデモ

詳細情報

詳細については、このトピックの「 備考 」をお読みください。

ユーザーのピンをマップに配置します。


GoogleマップのAPIに精通していない場合は、 注意してください 、あなたはこの小さな例を理解するために、先行例(基本)を読み取ることがあります。


  • まず、マップを初期化します

HTMLコードにマップの要素を追加し、次のようにCSSを挿入することができます:

<!DOCTYPE html>
<html>
<head>
<style>
  /* Always set the map height explicitly to define the size of the div
   * element that contains the map. */
  #map {
    height: 100%;
  }
  /* Optional: Makes the sample page fill the window. */
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
 

さて、このようなバリススクリプトを使ってコードにgoogle mapsライブラリを追加する必要があります:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
 

YOUR_API_KEYをGoogle apiキーでコードに書き換えることができます。は、キーを取得するためのリンクです。

次に、あなたのコードに、あなたのマップのコールバック(または初期化の関数)として機能する関数ウィジェットを書く必要があります。ここでは、Google 見つけることができる小さな機能の魔法使いをここに追加します

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });
  }
 

これで、通常、画面に基本的な地図が表示されます。あなたはGoogleで完全なコードを見つけることができます。


  • 次に、ユーザーの位置を見つけます。

ユーザーの位置を要求するには、非常に単純な機能の魔法使いがナビゲータによって提供されています:

navigator.geolocation.getCurrentPosition(showPosition);
 

この関数はパラメータを受け入れることに注意してください。ジオロケーションが成功した場合に呼び出す関数です。

この関数を作成する必要があります。 :)

function showPosition(position) {
    alert (position);    
}
 

この関数は非常に簡単で、マーカーをユーザーの位置にプロットするために、後で更新する必要があります。

ここで使用するジオロケーションの機能魔女は非常に簡単です。 w3schoolsに関する完全なドキュメントを手に入れることができます。

その時点でのコードは次のようになります。

<!DOCTYPE html>
<html>

<head>
  <title>Simple Map</title>
  <meta name="viewport" content="initial-scale=1.0">
  <meta charset="utf-8">
  <style>
    /* Always set the map height explicitly to define the size of the div
      * element that contains the map. */
    
    #map {
      height: 100%;
    }
    /* Optional: Makes the sample page fill the window. */
    
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    var map;
    navigator.geolocation.getCurrentPosition(showPosition);
    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8
      });
    }
    function showPosition(position) {
      console.log(position);
    }
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</body>

</html>
 

  • 3番目に、マーカーで地図上のユーザーの位置を表示します。

地図上にマーカーを表示するには、「基本」の例の関数を使用します。

// Create a marker and place it on the map
var marker = new google.maps.Marker({
    position: position,
    map: map
});
 

私はこのコード行を非常に正確に詳述しません。このコードでマーカーを作成すると、 new google.maps.Marker({}); 、あなたは 'マーカーオプション'を渡して抱擁を入力します。 ここのGoogleドキュメントをご覧ください

また 、位置パラメータでマーカーの位置を簡単に指定できることにも注意してください。

これでshowPosition 関数を変更するshowPosition ます。

変数の位置の緯度と経度に簡単にアクセスできます:

  var markerPosition={};
  markerPosition.lat=position.coords.latitude;
  markerPosition.lng=position.coords.longitude;
 

このように、Googleはlatとlngの値に簡単にアクセスする方法を理解しています。

これで、 showPosition 関数を変更して、マーカーをユーザーの位置に追加します。

function showPosition(position) {
    var markerPosition={};
    markerPosition.lat=position.coords.latitude;
    markerPosition.lng=position.coords.longitude;
    // Create a marker and place it on the map
    var marker = new google.maps.Marker({
        position: markerPosition,
        map: map
    });
}
 

  • 最後に、コードは次のようになります。
<!DOCTYPE html>
<html>

<head>
  <title>Simple Map</title>
  <meta name="viewport" content="initial-scale=1.0">
  <meta charset="utf-8">
  <style>
    /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
    
    #map {
      height: 100%;
    }
    /* Optional: Makes the sample page fill the window. */
    
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    var map;
    navigator.geolocation.getCurrentPosition(showPosition);
    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8
      });
    }
    function showPosition(position) {
      var markerPosition={};
      markerPosition.lat=position.coords.latitude;
      markerPosition.lng=position.coords.longitude;

      // Create a marker and place it on the map
      var marker = new google.maps.Marker({
        position: markerPosition,
        map: map
      });
    }
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</body>

</html>