マルティスープ
Staff Blog

2016.06.30

Google Maps APIsのライブラリ読み込み方法

みなさん、こんにちは!

Google Maps API のライブラリを読み込む方法は1つじゃないってご存知でしたか？

いやいや、1つだけ知ってれば、大丈夫だからいいですよ。

今の動作に問題ないから必要ないです。

なんて声が聞こえてきそうですね。確かに、普通は1つ知っていればいいんですが、

Google Maps API  のライブラリのURLのGETパラメータを動的に変更したい場合に必要となるので

今回はそのご紹介をします！

languageやregionを設定で変えたいというときにクライアントサイドだけ処理では少しいじる必要があります。

クライアントIDが必要だと思いますので取得設定方法は、過去のBLOGに書かれています。下記のリンクを確認してください。

クライアントIDの実装方法

1.headerのScriptタグに Google Maps API のURLを記載する。（最も一般的）

上のリンクにも書かれてますが、

<script src=”https//maps.google.com/maps/api/js?v=3&client=gme-xxxxx&channel=001″></script>

これです。どこのサイトにも載っているタイプです。

これをHeaderタグに張り付ければ使えるようになります。簡単ですね。

2. google.loadを使ってmapsを読み込む

google.loadコマンドを使えるようにheaderに下のタグを貼り付けます。

    <script src=”http://www.google.com/jsapi/”></script>

次に読み込むファイル、もしくはスクリプト内でgoogle.loadを実行します。

    <script>

        google.load(‘maps’,

            ‘3.x’,{

                    ‘other_params’ : ‘sensor=fakse&libraries=geometry&language=’ + lang,

                    ‘callback’ : mapsLoadeds });

    </script>

これでmapsのv3のJSONPを取得してくれます。3.xの箇所やcallbackは任意で書き換えて下さい。

他のパラメータが必要な場合は’other_params’に続けて書くことができます。

仕様についてはGoogle Loaderの本家資料をご覧ください。

google.loaderの開発者用ドキュメント

3.bodyの下部にScriptタグに Google Maps API のURLを記載する。

やや、変則的ではありますが、bodyの下部に

    <script>
        //変数取得処理

        var lang = xxx;

        var script = document.createElement(‘script’);

        script.type = ‘text/javascript’;

        script.src = ‘https://maps.googleapis.com/maps/api/js?

                              v=3&libraries=geometry&language=’ + lang;

        document.body.appendChild(script);
    </script>

を貼り付けます。

この場合は、 Google Maps API 関連の処理は、window.onloadの時に走るようにする必要があります。

google.loadを使わずに、動的にライブラリのパラメータを取得する場合に使うことができます。

google.loadが使えればこの方法は必要ないですが、何かでgoogle.loadが使えない場合に試してみてください。