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.02.26

Wi-Fi マックアドレスから位置取得

みなさん、こんにちは。

Google Maps API には様々なAPIがありますが、その中の「続きを読む

2017.07.09

Geocoding API を使って郵便番号から住所を入力するフォーム

みなさん、こんにちは。

よく入力フォームで住所を入力するとき、郵便番号から自動で住所を入力する方法がありますね。今回は、Google Ma・・・

続きを読む

2017.01.16

東京の花粉量をヒートマップで可視化する

みなさん、こんにちは!

Google Maps JavaScript API のライブラリには、データ可視化ライブラリ(visualiza・・・

続きを読む

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

お問い合わせお見積もりから開発のご相談まで、お気軽にお問い合わせください。

(※)は入力必須項目です。

当社では、お客様がお問い合わせの際に必要な個人情報または、 お問い合わせ内容等につきましては、
お問い合わせの回答の目的のみに利用します。

Google Maps for Work™に関するご質問やお見積りは、
マルティスープまでお気軽にお問い合わせください03-3518-9013 (受付時間:平日 9:00−18:00)