https://cloud.google.com/maps-platform/pricing/?hl=ja
googleMapが有料化しAPIKEYが必須となったので利用用途をまとめました。
クレジットカードの登録が必須になりますが月間200ドル分は無料で利用することができて、多くの場合は無料範囲内に収まる様です。
パターン | 呼び出し回数 |
1.静的マップの読み込み(ウェブ) Static Maps |
100,000回 |
2.動的マップの読み込み(ウェブ) Dynamic Maps |
28,500回 |
3.GoogleMapからの埋め込み | 無制限 ※APIKEY不要 |
1.静的マップ
一般的なgooglemapの様にグリグリ動かせるものとは違い、画像として読み込む利用用途になります。
API KEYは必須ですが、マーカーを配置したりパスを書いたり柔軟です。
画像のフォーマットも、PNGやJPGなど選択できます。
埋め込み例
1 |
https://maps.googleapis.com/maps/api/staticmap?center=34.8592574,136.814053&zoom=13&size=800x300&maptype=roadmap&key={your-apikey}&markers=icon:http://lg.wszz.org/img/plane.png%7C34.8592574,136.814053 |
2.動的マップ
googlemapのライブラリを利用し、柔軟にマップをカスタマイズ可能。
肝心の読み込みのカウント方法については、マップを読み込んだ時点で1回とカウントされます。
拡大や移動ごとにカウントされない仕様でなので、ユーザがグリグリ操作したとしても無料範囲に収まりますが、リロードは1回とカウントされます。
埋め込み例
1 2 3 4 5 6 7 8 9 10 11 |
<script> var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: 34.8592574, lng:136.814053}, zoom: 8 }); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDtwr1smbPS87AjQOLxZFfers6Iyn0G6_I&callback=initMap" async defer></script> |
参考:Google Maps JavaScript APIの使い方
3.GoogleMapからの埋め込み
GoogleMapの共有機能からiframeで利用する方法。
GoogleMapから簡単に埋め込み用のソースをコピペできて、API KEYも不要なのでこだわりが無ければ一番使い安い利用方法です。
埋め込み例
1 |
<iframe width="800" height="350" style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d20788.247117865834!2d136.8234772310379!3d34.85764140071934!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60047d8e11d6d945%3A0xdf2836921a82ba79!2z5Lit6YOo5Zu96Zqb56m65riv6aeF!5e0!3m2!1sja!2sjp!4v1542183494082" frameborder="0" allowfullscreen="allowfullscreen"><span style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" data-mce-type="bookmark" class="mce_SELRES_start"></span></iframe> |
今まで静的マップの存在を知らずにいましたが、使い方によっては便利なAPIではないかと思います。
コメントを残す