2018.04.16

コーディング

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

世界地図のイメージ

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

googleMapsが表示されない!

確認1:jQueryの読み込み順

googleMaps APIはscriptタグで読み込みますが、この読み込みがjQueryのライブラリより後になると、googleMapsの生成に利用する変数の記述var latlngvar 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も、機会があればご紹介したいと思います。

SHARE

この記事の筆者

Web&Soundクリエイター 田村 培修

Web&Soundクリエイター 田村 培修

楽器とパソコンのキーボードを使い分ける当社のマルチクリエイター。e-sportsに興味津々であれこれ情報を収集中。

WEBSITE DESIGN REQUEST

ホームページ制作・リニューアルの
ご相談はお気軽に

TEL 06-6537-9941 平日 9:00〜19:00

〒550-0012 大阪府大阪市西区立売堀2-5−41

ホームページ制作を相談する