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

地図や位置情報を用いたシステムのご提案・開発ならマルティスープへ

マルティスープは、創業以来のGISとモバイル開発の実績と技術力で、営業支援システムやリサーチ・公共インフラ・工事・警備業界の現場を支援するシステム開発など、地図や位置情報を使った業務システムの導入のご提案や開発をいたします。

現場をつなぐコミュニケーションが屋内外業務のパフォーマンスを最大限に。マルティスープのiField(アイ・フィールド)®シリーズは、屋内外業務の現場の実力を減少させるコミュニケーション障壁を除き、使い慣れたスマートデバイスを使って 現場の実力をリアルに伝えるサービス。

位置・空間情報のエキスパート集団として一緒に働きませんか?

マルティスープは地図情報をはじめとする位置・空間情報技術のエキスパート集団です。当社で日々研究している地図や位置情報といった技術は、災害支援など貢献度の高いシステムとして使用されることもあれば、スマートフォンアプリのゲームとして使われることもあり、その利用用途・価値は、今後もますます広がっていっています。
私たちの企業理念は、「創る喜び、使う喜び」です。
今後の開発体制をより強化するために、新卒・中途問わず、当社の未来を共に創っていただける新メンバーを募集します!

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

2017.02.01

Embed API で会社のアクセスマップを作成する

こんにちは。

会社のホームページにアクセスマップを作成することがありますが、みなさんどのように作成していますか?

昔はFLASHや・・・

続きを読む

2017.04.23

KML を GeoJSON に変換して描画する

みなさん、こんちには。

最近、Google マイマップを使って図形を描画する機会がありました。

そこで、マイマップの機能を使い、K・・・

続きを読む

2017.01.12

Roads API を使って道路へスナップする

みなさん、こんにちは!

 

今回は、Google Maps API のウェブサービスのひとつ「

続きを読む

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