コンセプト

モバイル端末向けの開発

Google Maps JavaScript API はモバイル端末に簡単にロードできて、正しく動作するように設計されています。その中でも Google が特に力を入れているのが、Android や iOS 携帯などの先進モバイル端末向けの開発です。モバイル端末は、一般的なデスクトップ用のブラウザより画面サイズが小さく、そのほとんどがモバイル端末に特有の操作(ピンチズームなど)に対応しています。モバイル端末上でアプリを正しく動作させたい場合は、以下の処理を行うことをお勧めします。

  • マップを含む <div> の width 属性と height 属性を 100% に設定します。ただし、この値を指定すると、古いデスクトップのブラウザ上では適切に表示されない場合があるのでご注意ください。
  • 以下のように DOM の navigator.userAgent プロパティを調べて、iPhone や Android 端末を検出できます。
    function detectBrowser() {
      var useragent = navigator.userAgent;
      var mapdiv = document.getElementById("map");
    
      if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
        mapdiv.style.width = '100%';
        mapdiv.style.height = '100%';
      } else {
        mapdiv.style.width = '600px';
        mapdiv.style.height = '800px';
      }
    }
    

    このように、端末に応じて画面の表示領域を変更したり、特定の端末に対してレイアウトを変更したりできます。

  • Android や iOS 端末では、以下の <meta> タグが優先されます。

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    

    ここでは、マップをフルスクリーンで表示し、ユーザ側でリサイズできないように設定しています。iPhone の Safari ブラウザの場合は、この <meta> タグをページ内の <head> 要素に入れる必要があるので注意してください。

IPhone 向けの開発についての詳細は Apple のデベロッパー ドキュメントを、Android 端末向けの開発についての詳細は Android のデベロッパー ドキュメントをご覧下さい。

ローカライズ

Maps API アプリをローカライズして国や地域に応じて動作を変えるには、デフォルトの言語設定を変更して、地域コードを設定します。

言語のローカライズ

Google Maps API はブラウザの言語設定で指定された言語を使用して、マップ上のコントロール名や著作権表示、運転ルート、ラベルなどのテキスト情報を表示します。一般的にはこの動作が理想的です。通常は、ユーザーによる言語設定をオーバーライドする必要はありません。ユーザーによる言語設定を無視して、強制的に特定の言語で情報を表示したい場合は、Maps API JavaScript コードをインクルードして使用言語を指定する際に、オプションの language パラメータを <script> タグに追加します。

たとえば、日本語で Maps API アプリを表示させたい場合は、以下のように &language=ja<script> タグに追加します。

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&language=ja"
type="text/javascript">
</script>

注: 上の例のように API をロードすると、ユーザーが設定した言語にかかわらず、すべてのユーザに対して日本語が使用されます。このオプションは、事前に動作を検討した上で設定してください。

例を見る(map-language.html)

Maps Javascript API は、左から右(LTR)および右から左(RTL)に書く文字の両方を含む双方向(Bidi)テキストにも対応しています。RTL 言語とは、アラビア語、ヘブライ語、ペルシア語などです。RTL 言語を正しく表示するには、通常は、ページの <html> 要素に dir='rtl' を追加する必要があります。以下の例では、アラビア語のコントロールを使用してエジプトのカイロのマップを表示しています。

例を見る(map-rtl.html)

サポートする言語のリストもご確認ください。サポートされる言語は頻繁に更新されるため、このリストがすべてのサポート言語を網羅しているとは限りません。

地域のローカライズ

Maps API を maps.googleapis.com からロードした場合は、アプリがアメリカを基準とした動作をするように、デフォルトでバイアスがかかっています。アプリを修正して、別のマップタイルを表示したい場合や、動作にバイアスをかけたい(特定の地域を優先してジオコーディングの結果を表示するなど)場合は、Maps API JavaScript のコードをインクルードする際に、region パラメータを <script> タグに追加して、デフォルトの動作をオーバーライドします。

Maps API アプリの開発者には、アプリが使用される国に合わせて正しい地域ローカライズを行い、その地域の法律を厳守したアプリを作成する責任があります。

region パラメータは、一般的に国コード トップ レベル ドメイン(ccTLD)と 1 対 1 になったマッピングを持つユニコード地域サブタグ ID を受け付けます。大半の Unicode 地域 ID は ISO 3166-1 コードと同一ですが、いくつか注意が必要な例外もあります。たとえば、英国の ccTLD は(ドメイン .co.uk と対応した)「uk」ですが、地域 ID は「GB」です。

たとえば、Maps API アプリを英国用にローカライズしたい場合は、以下のように &region=GB<script> タグに追加します。

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&region=GB"
type="text/javascript">
</script>

以下の 2 つの例は、デフォルト地域(US)を基準にして「トレド、オハイオ」にジオコードした「トレド」の地図と、ES(スペイン)に設定された region を基準にして「トレド、スペイン」にバイアスをかけた地図です。

中国での API ローディング

中国においては http://maps.google.cn から Google Maps API を提供しています。中国向けにコンテンツを提供する際は、https://maps.googleapis.comhttp://maps.google.cn に置き換えてください。次に例を示します。

<script src="http://maps.google.cn/maps/api/js?key=YOUR_API_KEY"
type="text/javascript">
</script>

中国ユーザーを対象に開発している場合は、中国の地域や言語パラメータを追加することもできます。API は language パラメータの値として、zh-CNzh-TW をサポートしています。

<script src="http://maps.google.cn/maps/api/js?region=cn&language=zh-CN&key=YOUR_API_KEY"
type="text/javascript">
</script>

バージョニング

Google Maps JavaScript API チームは定期的に API に新機能を追加し、不具合修正やパフォーマンス改善を行っています。アプリにロードする API バージョンは、Google Maps JavaScript API ブートストラップ リクエストの v パラメータを使って指定できます。詳細はバージョニングをご覧ください。

フィードバックを送信...

Google Maps JavaScript API
Google Maps JavaScript API
ご不明な点がありましたら、Google のサポートページをご覧ください。