Google Maps JavaScript APIの地図が表示されない3つの罠

2016年の6月にAPIキーが必須になったgoogleMaps。APIのキーの取得や設定意外にも独自の記述や癖があって、知識がないと導入には少し手間取ります。
今回はそんなgoogleMaps導入時に、googleMaps以外の理由で導入障壁になっていたことを共有したいと思います。

googleMapsが表示されない！

確認1：jQueryの読み込み順

googleMaps APIはscriptタグで読み込みますが、この読み込みがjQueryのライブラリより後になると、googleMapsの生成に利用する変数の記述var latlngやvar mapが正常に処理されず、エラーになります。以下のように、googleMaps APIを先に読み込むことで回避しましょう。

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
<script src="https://01earth.jp/js/jquery-3.2.1.min.js"></script>

確認2：要素のサイズ指定

googleMapsはサイズが指定された要素の中にしか表示されません。例えば、

<div id="map-area"></div>
<style>
 #map-area {
   width: 300px;
   height: 200px;
 }
</style>

のようにです。また、サイズにパーセント(%)を指定する場合、その親要素が絶対値で指定されている必要があります。なので、高さの決まっていない要素に対しては表示させることができません。

確認3：mapのロードタイミング

地図を作成するjQueryは作成先の要素

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

などが読み込まれた後で処理されないと、googleMapsは表示されません。jQueryの記述時にwindow.onloadを利用して地図生成の処理をページのロードが完了したあとになるようにするなど、処理に工夫が必要になります。

window.onload = function(){
    makeMap(34.679205, 135.492003); 
};

まとめ

Google Maps JavaScript API 導入時に、googleMapsの機能以前の段階でつまずきそうな点を紹介しました。googleMapsは独自の機能が多く学習コストが少しかかるので、導入時の手間がこの記事で少しでも減らせれば幸いです。googleMaps自体の記述tipsも、機会があればご紹介したいと思います。