MULTISOUP

MULTISOUP

MULTISOUP

Staff Blog

Introduction example

2016.06.30

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

img

みなさん、こんにちは!

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が使えない場合に試してみてください。

【関連記事】こんな記事も読まれています

2017.01.06

マラソン大会の難易度を高度から判断してみる

みなさん、あけましておめでとうございます!

2017年も本ブログでは、グーグルマップをはじめ地図や位置情報に関するおもしろい情報を発信して・・・

続きを読む

2017.01.24

InfoWindow をカスタマイズする

こんにちは。

Google Maps 上に描画したマーカーをクリックしたときに表示する吹き出し、通称「InfoWindow」をカスタマイズ・・・

続きを読む

2016.08.25

Googleマップで過去の航空写真を見る

みなさん、こんにちは。

国土地理院が提供するタイル地図とGoogleマップの連携方法を説明します。

今回は、Googleマ・・・

続きを読む

 - Google Maps APIs, Google Maps JavaScript API, スタッフ日記