Google Maps Platformになったことだし、グーグルマップの表示スクリプトを見直してみた

82 view

最近Googleのマップサービスが、Google Maps Platformに名称変更されましたね。

Google Mapを表示させる際に、単純な埋め込みの際はiframeで設置すればいいのですが、
色を変えたり、オリジナルのアイコンを付ける時などは、APIを使って表示する必要があります。

最初に重要なことを言っておくとPlatformに名称は変わりましたが、
マップを表示する為のスクリプトを修正する必要はありません。

サービス内容は色々変更され、料金プランなども変わったのでその点は注意が必要ですが、
スクリプト自体は今まで通りのもので問題なく動きます。

ただ、今までグーグルマップの表示用に使っていたスクリプトをあまり理解せずに使いまわしていたので、今回スクリプトの内容を見直してみることにしました(とくに読込に関する内容を修正をしました)

<script src="//maps.googleapis.com/maps/api/js?key=`{API_KEY}`"></script>
<script type="text/javascript">
function initMap() {
var latLng = new google.maps.LatLng(37.887086, 138.997067);// 緯度・経度
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: latLng
});
var imageW = `マーカー画像の横幅`;
var imageH = `マーカー画像の縦幅`;
var image = {
url : `マーカー画像のURL`,
scaledSize : new google.maps.Size(imageW, imageH)
}
var marker = new google.maps.Marker({
map: map,
position: latLng,
icon: image
});
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>

このスクリプトはマーカー付きのGoogle Mapを表示したい時に使っていました。

簡単に説明すると、取得したAPIKEYを使って、Google Mapの外部スクリプトを読み込み、
マップとアイコンを生成するスクリプトをページの読み込み完了時に実行しています。

asyncとdefer属性を追加してみた

Googleの公式ドキュメントや他のサイトを見ると、asyncdeferを付けてスクリプトを読み込んでいるものがあります。
asyncdeferは、どちらもページの表示とスクリプトの読み込みの関係を変更することが出来る属性です。

asyncページの読み込みを待たずにスクリプトを読み込み始め、ページの読み込みを待たずに実行もします。
deferページの読み込みを待たずにスクリプトを読み込み始め、ページの読み込みが完了してから実行します。

どちらもページの読み込みを邪魔せずにスクリプトを読み込むことが出来るので、ページの表示が遅くなることを防ぐことが出来ます。

両方の属性を付与した場合、基本はasyncが適用され、対応していないブラウザにはdeferが適用されることになるようです。

<script src="//maps.googleapis.com/maps/api/js?key=`{API_KEY}`"></script>
↓↓↓ async と deferを追加 ↓↓↓
<script src="//maps.googleapis.com/maps/api/js?key=`{API_KEY}`" async defer></script>

・・・追加したらうまく動かなくなりました。。

どうやら、非同期にスクリプトを読み込む為、Google Mapの起動用スクリプトが呼ばれるタイミングによってはエラーが出るようになってしまったようです。

回避方法としては、

google.maps.event.addDomListener(window, 'load', initMap);

上記のコードを消して、下記のように外部スクリプトの読込にコールバックを渡してあげればいいようです。

<script src="//maps.googleapis.com/maps/api/js?key=`{API_KEY}`&callback=initMap" async defer></script>

これで問題なく動くようになりました。

latLngクラスとリテラル

Google Mapに緯度・経度を渡している箇所ですが、
ここもドキュメントなどをいくつか見ていると書き方の違いがありました。

google.maps.LatLngクラスを使っているものと、連想配列を使用しているものです。

var latLng = new google.maps.LatLng(37.887086, 138.997067);
var latLng = {lat: 37.887086, lng: 138.997067};

これはどちらでも動くことが確認出来ました。
LatLngクラスを使わなくても、緯度・経度を連想配列で渡せば十分なようです。

この連想配列の形式は、公式ドキュメントで、Lat/Lng Object Literalと書かれていました。

実際に検証はしていませんが、クラスからインスタンスを作るよりもリテラルで渡したほうが少なからず処理が早くなるはずなので、これも修正することにしました。

今回の修正を諸々反映したスクリプトは最終的に下記のようになりました。

<script>
function initMap() {
var latLng = {lat: 37.887086, lng: 138.997067};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: latLng
});
var imageW = `マーカー画像の横幅`;
var imageH = `マーカー画像の縦幅`;
var image = {
url : `マーカー画像のURL`,
scaledSize : new google.maps.Size(imageW, imageH)
}
var marker = new google.maps.Marker({
map: map,
position: latLng,
icon: image
});
}
</script>
<script src="//maps.googleapis.com/maps/api/js?key=`{API_KEY}`&callback=initMap" async defer></script>

起動用の関数はcallbackで外部スクリプトの読込時に渡すので、起動用の関数が先、外部スクリプトが後になるように順番を入れ替えました。

まとめ

何気なく使っているスクリプトでしたが、公式ドキュメントを見ると色々と良りよいとされている書き方がありました。
実際の速度検証まではしていませんが、しっかりと検証も含め、改修していく作業を続けていこうと思います。

参考サイト

Google Maps Platform
https://cloud.google.com/maps-platform/

Google Maps API のヒント: ページの読み込み時間をスピードアップ
https://developers-jp.googleblog.com/2015/10/google-maps-api.html

Coordinates | Maps JavaScript API | Google Developers
https://developers.google.com/maps/documentation/javascript/reference/3/coordinates

\ SNSでシェア /

WRITER

toshi

制作 toshi

1990年生まれの新米エンジニア。
慶応義塾大学文学部出身。

趣味は大学から始めた競技かるた(A級)/性格は飽きっぽいB型/移動手段はロードバイク/好きな食べものは馬刺し/わりと細身ですが、クーネルワークのクー(食)担当。

TAGS