Google Map API が課金制になったけど、実際は一定量を超えなければ課金されないので、Google Cloud Platformから設定してみた
コンテンツは以下の内容です
GCPでGoogle Map APIが使用できるようにします。前提として、以下のものが準備してある想定です。
詳細は割愛しますが、お支払いの設定は済ませておくとあとで地図表示の際にエラーにならなくて済みますっ
それから今回は地図を表示するだけじゃなくて、
ので、細かい設定ができるようGoogle Maps Javascrit APIを使用します。この時点で16種類ほど地図のAPIがありましたが、Maps Javascript API
だけ有効にすればOKです。
これを押して、有効にしたら、次はAPIキーです。 APIキーは、使用する地図が誰がサイトに埋め込んでいて、かつ地図が誰か知らない人から不正に利用ができないよう保護するような意味合いで、必須となります。これがないとこんな表示になります。
サイドメニューのAPIとサービス
、そして認証情報
と進むとこのような画面が表示されますので、「+認証情報を作成」ボタンから新規にキーを発行します。
そうすると自動でAPIキーが発行されます。
ここにあるように本番環境でこのキーは見ることができてしまうので、このソースをコピーすれば誰でもこの地図を利用することができるようになってしまいます。ですので`キーの制限`を行うことをおすすめします。
制限の方法としては、
です。
最初に地図に色をつけた状態を確認したいので、ここから地図サンプルを試します。
https://mapstyle.withgoogle.com/
このウィザードはすべての設定を調整できるので、項目が非常に多いです。ですので、今回は良くあるパターンとして、グレーにするという設定をしたいと思います。
とは言っても、設定はサイドメニューのSilver
を選択するだけです。それとなぜだか分からないけどピンの表示がデフォルトでオフになっているので、左下のMORE OPTION
から
と選んでいくと、ピンが表示されるようになります。 これでFINISHボタンを押すと、スタイルフォーマットのjsonもしくはURLを発行してくれます。 そして今回使うのはjsonの方ですので、上の方になります。
このソースをサイトへ埋め込みます。 まずはこちらのオフィシャルサイトでサンプルコードを参考にしましょう。
地図を埋め込む初期設定: https://developers.google.com/maps/documentation/javascript/tutorial?hl=ja
自前のピンの設定: https://developers.google.com/maps/documentation/javascript/adding-a-google-map?hl=ja
これを元に以下のソースを作成しました。
google-map.js
export default function googleMap () {
let map = {}
const icon = {
url: '/画像まで/のパスを/入力/pointer.png',
scaledSize: new google.maps.Size(50, 50)
}
function initMap () {
map = new google.maps.Map(document.getElementById("google-map"), {
center: { lat: 35.809159, lng: 137.243678 },
zoom: 17,
styles: <ここにさっきのjsonを入れる>
});
new google.maps.Marker({
position: new google.maps.LatLng(35.809159, 137.243678),
icon: icon,
map: map
})
}
initMap()
}
ピンのサイズは今は縦横50%で設定していますが、ここは適宜変更してください。
このままだと、initMap()
のスコープがMAP APIのコールバックの時に通らないので、このjsをインポートするところで、
import googleMap from './google-map';
window.initMap = googleMap;
これで大概の地図表示はカバーできるんじゃないかと思いますっ。
ぜひご参考ください。