jsfiddleでgmaps.jsが動かない？よくある落とし穴と解決策！🗺️

はじめに (対象読者・この記事でわかること)

この記事は、Web開発の学習を始めたばかりのプログラミング初学者の方や、オンラインのコード実行環境であるjsfiddleを使ってJavaScriptライブラリの動作確認をしたい方を対象としています。特に、Google MapsをJavaScriptで簡単に扱えるgmaps.jsライブラリをjsfiddle上で試そうとして、「なぜか地図が表示されない」「エラーが出てしまう」といった問題に直面している方にとって役立つ情報を提供します。

この記事を読むことで、jsfiddleでのJavaScriptライブラリの正しい読み込み方、gmaps.jsを使った基本的な地図表示の方法、そしてGoogle Maps JavaScript API利用時の必須条件であるAPIキーの設定方法がわかります。さらに、gmaps.jsがjsfiddleで動かない際によくあるエラーとその解決策を具体的に理解し、スムーズに地図表示を実装できるようになるでしょう。筆者自身も同様の問題に遭遇し、解決に時間を要した経験から、そのノウハウを共有するためにこの記事を執筆しました。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 - HTML/CSSの基本的な知識（要素の配置やスタイリング） - JavaScriptの基本的な文法と操作（変数、関数、DOM操作の基礎）

🗺️ jsfiddleとgmaps.jsの概要：なぜ動かないのか？

jsfiddleは、HTML、CSS、JavaScriptのコードをブラウザ上で書いて即座に実行結果を確認できる便利なオンラインIDEです。ライブラリの動作テストやちょっとしたデモ作成に非常に役立ちます。一方、gmaps.jsは、Google Maps JavaScript APIをよりシンプルに、少ないコード量で利用するための軽量なJavaScriptライブラリです。マーカーの追加、ルートの描画、ジオコーディングなど、多くの機能が簡単に実装できます。

しかし、この便利なgmaps.jsをjsfiddle上で動かそうとすると、意外と躓くポイントがあります。主な原因は以下の3点に集約されます。

1. 外部ライブラリ（gmaps.jsとGoogle Maps API本体）の読み込み方法の誤り: jsfiddleでは、外部のJavaScriptライブラリを読み込むための特定のUI（User Interface）があります。これを正しく使わないと、ライブラリがロードされず「未定義」エラーが発生します。
2. Google Maps JavaScript APIの読み込み忘れ、または順序の間違い: gmaps.jsは、Google Maps JavaScript APIの上に構築されたラッパーライブラリです。そのため、gmaps.jsを使う前に、必ずGoogle Maps JavaScript API本体を先に読み込む必要があります。
3. Google Maps APIキーの欠如、または設定不備: 2018年以降、Google Maps JavaScript APIを利用するには、必須でAPIキーが必要になりました。APIキーが設定されていない、または不正なキーを使用している場合、地図は表示されず、コンソールにエラーが出力されます。

これらのポイントを理解し、適切に対処すれば、jsfiddleでもgmaps.jsを問題なく動作させることができます。次のセクションでは、具体的な手順と解決策を見ていきましょう。

🛠️ jsfiddleでgmaps.jsを動かす具体的な手順とトラブルシューティング

ここでは、jsfiddleでgmaps.jsを使って地図を表示するまでの具体的な手順と、遭遇しやすいエラーとその解決方法を詳細に解説します。

ステップ1: jsfiddleの基本設定

まずは、jsfiddleの新しいFiddleを開き、以下の準備をします。

1. HTMLペイン: 地図を表示するためのdiv要素を用意します。必ずIDを設定してください。

   html <div id="map" style="width: 100%; height: 400px;"></div>

   style属性で幅と高さを指定しておかないと、div要素のサイズが0になり地図が表示されないことがあります。

2. JavaScriptペイン: 初期状態では空で構いません。ここにgmaps.jsのコードを記述していきます。

ステップ2: gmaps.jsとGoogle Maps JavaScript APIの読み込み

ここが最も重要なポイントです。jsfiddleの左サイドバーにある「External Resources」セクションを使います。

1. Google Maps JavaScript APIの読み込み: 最初に、Google Maps JavaScript API本体を読み込みます。URLの末尾にkey=YOUR_API_KEYを追記し、YOUR_API_KEYの部分をご自身で取得した有効なAPIキーに置き換えてください。

   • URL例: https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY
   • このURLを「External Resources」の入力欄に貼り付け、「＋」ボタンをクリックして追加します。

   【重要】APIキーの取得について: Google Maps APIキーは、Google Cloud Platform (GCP) から取得する必要があります。 - Googleアカウントが必要です。 - GCPプロジェクトを作成し、課金アカウントを有効にする必要があります（無料枠があります）。 - Google Maps JavaScript API を有効化します。 - APIキーを生成し、セキュリティのために適切な制限（HTTPリファラー制限など）を設定することを強くお勧めします。 - 詳細はGoogle Cloud ドキュメントを参照してください。

2. gmaps.jsの読み込み: 次に、gmaps.jsライブラリを読み込みます。必ずGoogle Maps JavaScript APIの後に追加してください。

   • URL例: https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.25/gmaps.min.js (最新版は公式サイト等で確認してください)
   • このURLも同様に「External Resources」に追加します。

   最終的に、「External Resources」には上から順に「Google Maps APIキー付きURL」と「gmaps.jsのURL」がリストされている状態が理想です。

ステップ3: gmaps.jsを使った地図の表示

JavaScriptペインに以下のコードを記述します。

Javascript

window.onload = function() {
    var map = new GMaps({
        el: '#map', // HTMLで作成したdiv要素のIDを指定
        lat: 35.681236, // 地図の中心の緯度（例: 東京駅）
        lng: 139.767125, // 地図の中心の経度（例: 東京駅）
        zoom: 12 // ズームレベル
    });

    // オプション: マーカーを追加する
    map.addMarker({
        lat: 35.681236,
        lng: 139.767125,
        title: '東京駅',
        infoWindow: {
            content: '<p>ここは東京駅です。</p>'
        }
    });
};

window.onloadでラップしているのは、HTML要素や外部スクリプトの読み込みが完了してからGMapsインスタンスを生成するためです。jsfiddleでは通常、JavaScriptはonloadで実行される設定が多いですが、明示的に記述することで確実性が増します。

ここまで設定したら、Runボタンをクリックして地図が表示されるか確認しましょう。

ハマった点やエラー解決

jsfiddleでgmaps.jsを動かそうとすると、以下のようなエラーに遭遇することがよくあります。

エラー1: 地図が表示されない、コンソールにGoogle Maps JavaScript API must be loaded系のエラー

• 原因: Google Maps JavaScript APIが正しく読み込まれていないか、APIキーに問題がある可能性があります。
  • APIキーが間違っている、または有効化されていない。
  • APIキーに適切な制限が設定されていない（例: jsfiddleからのアクセスを許可していない）。
  • Google Maps APIのURLが間違っている。
• 解決策:
  • Google Cloud Platformで、使用しているAPIキーが有効であり、「Google Maps JavaScript API」が有効になっていることを確認してください。
  • APIキーにHTTPリファラー制限を設定している場合、jsfiddleのドメイン（jsfiddle.net）を許可リストに追加してください。
  • 「External Resources」のGoogle Maps APIのURLが、https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY の形式で正しく記述されており、YOUR_API_KEYが正しいキーに置き換えられていることを確認してください。

エラー2: コンソールにGMaps is not defined、またはUncaught ReferenceError: GMaps is not defined

• 原因: gmaps.jsライブラリが正しく読み込まれていないか、Google Maps JavaScript APIより先に読み込まれている可能性があります。
• 解決策:
  • 「External Resources」にgmaps.jsのCDNリンクが正しく追加されているか確認してください。URLが間違っているとロードされません。
  • 「External Resources」のリストで、Google Maps JavaScript APIのURLがgmaps.jsのURLよりも上（先）に配置されていることを確認してください。jsfiddleは上から順にスクリプトを読み込みます。

エラー3: You have included the Google Maps API multiple times

• 原因: Google Maps JavaScript APIを複数回読み込んでいる場合に発生します。
• 解決策:
  • 「External Resources」にGoogle Maps APIのURLが複数回追加されていないか確認してください。
  • HTMLペインに<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>のような形でAPIの読み込みが記述されていないか確認してください。jsfiddleでは「External Resources」に記述すればHTMLに記載する必要はありません。

エラー4: 特定の機能（ジオコーディング、ルート検索など）が動かない

• 原因: Google Cloud Platformで、その機能に対応するAPIが有効化されていない可能性があります。
• 解決策:
  • 例えばジオコーディングを行うには「Geocoding API」、ルート検索を行うには「Directions API」などが有効になっている必要があります。GCPのAPIライブラリで、使用したいAPIが「有効」になっていることを確認してください。

解決策

上記のエラーに共通する解決策は以下の通りです。

1. Google Maps APIキーの確認: 最も一般的な原因です。有効なAPIキーをGCPで取得し、必要なAPI（JavaScript APIなど）が有効化されており、課金が有効になっていることを確認してください。
2. jsfiddleのExternal Resourcesの順序とURL:
   • Google Maps JavaScript API (https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY) を必ず一番上（最初）に。
   • その次にgmaps.js (https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.25/gmaps.min.js など) を追加します。
   • URLのスペルミスがないか、再度確認してください。
3. HTMLのdiv要素のIDとスタイル:
   • div要素に一意のIDが設定されており、JavaScriptコードのelプロパティと一致しているか確認してください。
   • widthとheightが設定されているか確認してください。display: noneやサイズが0だと見えません。
4. ブラウザのコンソールログを確認:
   • 何らかのエラーメッセージが出ている場合は、それをコピーしてGoogle検索すると、解決策が見つかりやすいです。

これらの点を確認すれば、ほとんどのgmaps.jsがjsfiddleで動かない問題は解決できるはずです。

まとめ

本記事では、jsfiddle上でgmaps.jsを使ってGoogleマップを正しく表示させるための具体的な手順と、よく遭遇するエラーのトラブルシューティングについて解説しました。

• Google Maps JavaScript APIとgmaps.jsの適切な読み込み順序が重要であることを理解しました。
• Google Maps APIキーの取得と有効化が地図表示の必須条件であることを確認しました。
• GMaps is not definedやAPIロードエラーなど、具体的なエラーメッセージの原因と解決策を学びました。

この記事を通して、あなたがjsfiddleでgmaps.jsをスムーズに動作させ、簡単に地図を扱えるようになったのであれば幸いです。APIキーの管理と外部ライブラリの正しい読み込み方をマスターすることは、Web開発におけるトラブルシューティング能力を向上させる上で非常に役立ちます。

今後は、マーカーのカスタマイズ、情報ウィンドウの表示、ルート検索やジオコーディングといったgmaps.jsのより発展的な機能についても記事にする予定です。

参考資料

• Google Maps JavaScript API 公式ドキュメント
• gmaps.js GitHubリポジトリ
• jsfiddle 公式サイト