GoogleMapsAPIの読み込みを非同期にするとスピードアップするらしい。

ページ上で JavaScript を非同期で読み込むと、パフォーマンスが向上します。Google は JavaScript Maps API のサンプルをすべてアップデートしました。みなさんのサイトも同じように変更できます。

HTML+JSの記述方法が変わっているので、復習を兼ねて確認してみます。

スポンサードリンク




GoogleMapsAPIのjsを読み込む

GoogleMapsAPIを使うためのjsを読み込みます。
非同期で読み込むため、<body>セクションの末尾に配置できるので、これまでの<head>セクションで読み込む方法よりもページ描写がスムーズになります。

API_KEYは必要とされていますが、現時点では無くても動作します。もしAPI_KEYがある場合はURLの?以降のクエリー部にkey=XXXXXXXXXの形式で記述します。

<!-- API_KEYがない場合 -->
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<!-- API_KEYがある場合 -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</body>

asyncとdeferが気になるけど、ここでは省略。

GoogleMapを表示する

GoogleMapsAPIを読み込んだら、そのAPIを使ってGoogleMapを表示します。
この記述もページ描写を妨げないように<body>セクションの下の方に記述します。

<script>
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 34.702669, lng: 135.495947},
      zoom: 14
    });
  }
</script>

centerで地図の中心を指定しています。latは緯度、lngは経度です。
zoomは地図のズームですね。値が大きいほど、地図に近づきます。

そして、実際に表示をする場所を指定します。
指定した場所にGoogleMapが表示されます。

<div id="map" style="height:500px;"></div>

忘れがちなのがcssでの高さ指定。cssはインラインで記述しても外部ファイルで記述してもいいですが、高さ指定を忘れずに。
高さを指定しないと、何も表示されません。未だに指定し忘れて「あれ?」ってなる時があります。

実際の表示を見る

指定場所にマーカーを表示する

場所を指定する時に使用するマーカーをGoogleMapに表示します。

地図描写する時のinitMap()の中にマーカーを作成するコードを記述します。
(グレーの箇所がマーカー関連のコードです)

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 34.702669, lng: 135.495947},
        zoom: 14
    });
		
    var marker = new google.maps.Marker({
        position : new google.maps.LatLng(34.702669,135.495947),
        map: map
    });
}

positionはcenterと同様に緯度と経度を記述すると、その場所にマーカーが生成されます。
mapはマーカーを生成する地図を指定します。ここでは、上のソースの2行目のmapを指定します。

これで最低限のGoogleMapが表示できるようになりました。

ソースコードをまとめると次のようになります。

<body>
    <div id="map" style="height:500px;"></div>
    <script>
        var map;
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: 34.702669, lng: 135.495947},
                zoom: 14
            });
		
	    var marker = new google.maps.Marker({
        	position : new google.maps.LatLng(34.702669,135.495947),
        	map: map
      	    });
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
</body>

実際の表示を見る

スポンサードリンク