以上で完了です。

開発を始めるには、デベロッパー ドキュメント をご覧下さい。

Google Maps JavaScript API をアクティベートする

まず初めに Google Developers Console で次の作業を行います。

  1. プロジェクトを作成または選択する
  2. Google Maps JavaScript API と関連サービスをアクティベートする
  3. 適切なキーを作成する
続ける

コンセプト

モバイル端末向けの開発

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 のデベロッパー ドキュメントをご覧下さい。

ローカライズ

デフォルトの言語設定を変更して、地域コードを指定すると、Google Maps JavaScript API アプリケーションをローカライズすることができます。つまり、指定した国や地域に応じてマップの動作を変えることができます。詳細については、マップのローカライズをご覧ください。

バージョニング

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

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

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