![](https://webdeveloperworks.com/wp-content/uploads/2016/03/gmapsapi_eyecatch.jpg)
GoogleMapsAPIの読み込みを非同期にするとスピードアップするらしい。
ページ上で JavaScript を非同期で読み込むと、パフォーマンスが向上します。Google は JavaScript 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]
スポンサーリンク