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

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

引用元: Google Maps API のヒント: ページの読み込み時間をスピードアップ

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

スポンサーリンク

GoogleMapsAPIのjsを読み込む

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

API_KEYは必要とされていますが、現時点では無くても動作します。もしAPI_KEYがある場合はURLの?以降のクエリー部にkey=XXXXXXXXXの形式で記述します。
[html]
<!– 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>
[/html]
asyncとdeferが気になるけど、ここでは省略。

GoogleMapを表示する

GoogleMapsAPIを読み込んだら、そのAPIを使ってGoogleMapを表示します。
この記述もページ描写を妨げないように<body>セクションの下の方に記述します。
[html]
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById(‘map’), {
center: {lat: 34.702669, lng: 135.495947},
zoom: 14
});
}
</script>
[/html]

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

そして、実際に表示をする場所を指定します。
指定した場所にGoogleMapが表示されます。
[html]
<div id="map" style="height:500px;"></div>
[/html]
忘れがちなのがcssでの高さ指定。cssはインラインで記述しても外部ファイルで記述してもいいですが、高さ指定を忘れずに。
高さを指定しないと、何も表示されません。未だに指定し忘れて「あれ？」ってなる時があります。

実際の表示を見る

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

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

地図描写する時のinitMap()の中にマーカーを作成するコードを記述します。
(グレーの箇所がマーカー関連のコードです)
[html highlight=”7-10″]
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
});
}
[/html]
positionはcenterと同様に緯度と経度を記述すると、その場所にマーカーが生成されます。
mapはマーカーを生成する地図を指定します。ここでは、上のソースの2行目のmapを指定します。

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

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

[html]
<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>
[/html]

実際の表示を見る

スポンサーリンク