Google Mapの埋め込み

Google Map API が課金制になったけど、実際は一定量を超えなければ課金されないので、Google Cloud Platformから設定してみた

コンテンツは以下の内容です

Google Cloud Platformの登録
Google Map用API Keyの発行
javascriptの設定

Google Cloud Platformの登録

GCPでGoogle Map APIが使用できるようにします。前提として、以下のものが準備してある想定です。

プロジェクトの作成
お支払いの設定

詳細は割愛しますが、お支払いの設定は済ませておくとあとで地図表示の際にエラーにならなくて済みますっ

それから今回は地図を表示するだけじゃなくて、

地図の色を変える
準備したピンを使う

ので、細かい設定ができるようGoogle Maps Javascrit APIを使用します。この時点で16種類ほど地図のAPIがありましたが、Maps Javascript API だけ有効にすればOKです。

これを押して、有効にしたら、次はAPIキーです。 APIキーは、使用する地図が誰がサイトに埋め込んでいて、かつ地図が誰か知らない人から不正に利用ができないよう保護するような意味合いで、必須となります。これがないとこんな表示になります。

Google Map用API Keyの発行

サイドメニューのAPIとサービス、そして認証情報と進むとこのような画面が表示されますので、「＋認証情報を作成」ボタンから新規にキーを発行します。

そうすると自動でAPIキーが発行されます。

ここにあるように本番環境でこのキーは見ることができてしまうので、このソースをコピーすれば誰でもこの地図を利用することができるようになってしまいます。ですので`キーの制限`を行うことをおすすめします。

制限の方法としては、

ドメイン名でのしばり
使用できるAPIでのしばり（ここだとMaps Javascript API）

です。

javascriptの設定（webpack）

最初に地図に色をつけた状態を確認したいので、ここから地図サンプルを試します。
https://mapstyle.withgoogle.com/

このウィザードはすべての設定を調整できるので、項目が非常に多いです。ですので、今回は良くあるパターンとして、グレーにするという設定をしたいと思います。

とは言っても、設定はサイドメニューのSilverを選択するだけです。それとなぜだか分からないけどピンの表示がデフォルトでオフになっているので、左下のMORE OPTIONから

Feature type: All
Element type: Icon
Stylers: inherit

と選んでいくと、ピンが表示されるようになります。これで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;

これで大概の地図表示はカバーできるんじゃないかと思いますっ。
ぜひご参考ください。

Google Mapの埋め込み

Google Cloud Platformの登録

Google Map用API Keyの発行

javascriptの設定（webpack）

Tags