JSFiddleでgmaps.jsが動かない原因と動かすための完全ガイド

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

本記事は、JSFiddle上でGoogle Mapsを手軽に扱えるライブラリ「gmaps.js」を試したいフロントエンド初学者〜中級者を対象にしています。gmaps.jsは導入しやすい反面、JSFiddle特有の読み込み順やGoogle Maps APIキー、リファラ制限などの落とし穴で「動かない」状況に陥りがちです。この記事では、JSFiddleでgmaps.jsが動かない典型的な原因を整理し、最小構成の動作例、正しいスクリプトの読み込み順、APIキー設定、コンソールエラーの読み解き方まで実践的に解説します。読了後には、エラーを自力で切り分け、安定して地図を表示できるようになります。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 - HTML/CSS/JavaScriptの基本的な知識 - ブラウザのDevTools（Console/Network）の基本操作

なぜJSFiddleでgmaps.jsが動かないのか：概要・背景

gmaps.jsはGoogle Maps JavaScript APIをラップして扱いやすくする軽量ライブラリです。ローカルの静的HTMLでは問題なく動くコードが、JSFiddle上では突然動かなくなることがあります。主な要因は次の通りです。

1) Google Maps APIキーとリファラ制限 - Google MapsはAPIキーが必須です（トライアルでも）。キーが無効・未設定・ドメイン制限の不一致で読み込みが失敗します。 - JSFiddleは実行時にfiddleのサブドメインや結果表示用ドメインが使われるため、リファラ制限の設定を誤ると403やエラーコードMissingKey, RefererNotAllowedMapError等になります。

2) スクリプト読み込み順と「onload」タイミング - gmaps.jsはMaps APIのグローバルgoogleオブジェクトに依存します。Maps APIより先にgmaps.jsや初期化コードを動かすとundefinedエラーになります。 - JSFiddleの「onLoad」「no wrap」などのオプションによって実行タイミングが変化します。

3) Mixed Content/HTTPSとエンドポイント - JSFiddleはHTTPSで動作します。Google Maps APIやgmaps.jsをHTTPで読み込むとブロックされます。

4) CSP/サンドボックスと外部リソース - 外部スクリプトURLの指定ミスや、古いCDN/URLの利用で404→初期化失敗に繋がります。

本記事では、これらのポイントを押さえた「最小構成」を提示しつつ、JSFiddle固有の設定まで踏み込んで解説します。

JSFiddleで動かすための具体手順と実装

以下は、JSFiddleでgmaps.jsを確実に動作させるためのステップです。

ステップ1：Google CloudでAPIキーを準備

1) Google Cloud Consoleでプロジェクト作成 - Google Cloud Consoleにアクセスし、新規プロジェクトを作成。

2) API有効化 - APIs & Services > Library から「Maps JavaScript API」を有効化。

3) APIキー発行と制限 - APIs & Services > Credentials でAPIキーを作成。 - Application restrictions: HTTP referrers（ウェブサイト）を選択。 - リファラに以下例を登録（用途に応じて最小限にする） - https://jsfiddle.net/ - https://fiddle.jshell.net/ - https://.jsfiddle.net/ - API restrictionsは「Maps JavaScript API」を指定してもよい（推奨）。

4) 請求の有効化 - Mapsは請求アカウント必須（無料枠あり）。未設定だとエラーになります。

ポイント - 一時検証ならリファラ制限を緩めて挙動確認→問題なければ最小化するのが安全。

ステップ2：JSFiddleの設定

1) フレームワークと拡張 - JSFiddleの左ペイン「Frameworks & Extensions」で外部リソースを設定せず、HTML内で明示的にscriptタグを並べるのが安全です（読み込み順を自分で制御するため）。

2) JavaScriptの実行タイミング - 左ペイン「JavaScript settings」で「onLoad」または「No wrap - in 」を意識。 - 本記事の例では「onLoad」を推奨。地図初期化はwindow.initMapとしてコールバックで実行します。

3) 結果パネルの高さ - Mapコンテナに高さが無いと地図が見えません。CSSで高さを指定。

ステップ3：最小構成のコード例（そのまま貼り付け可能）

HTMLパネルに以下を貼り付け（API_KEY_HEREを置き換え）。JSパネルは空でOKです。

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

<!-- gmaps.js（公式CDNがメンテ薄のため信頼できるミラーを使用。必要に応じてバージョン固定） -->
<script src="https://cdn.jsdelivr.net/npm/gmaps@0.4.25/gmaps.min.js"></script>

<!-- Maps JavaScript API（callback=initMapで初期化） -->
<script>
  // JSFiddleのonLoad設定に依存せず、コールバックで確実に初期化する
  function initMap() {
    // gmaps.jsは内部でgoogle.mapsを前提とする。ここまでにMaps APIが読めていることが重要。
    var map = new GMaps({
      el: '#map',
      lat: 35.6809591,
      lng: 139.7673068,
      zoom: 14
    });

    map.addMarker({
      lat: 35.6809591,
      lng: 139.7673068,
      title: 'Tokyo Station',
      infoWindow: { content: '<b>Tokyo Station</b>' }
    });
  }
</script>
<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&callback=initMap">
</script>

ポイント - gmaps.min.jsを先に読み込み、次にMaps APIをcallback付きで読み込みます。 - initMapはグローバル関数としてwindowに公開される必要があります（上記のようにトップレベル関数でOK）。 - CSSで#mapに高さを設定しないと見えません。

代替の読み込み順について - 一般にMaps API→gmaps.jsの順で読むサンプルもありますが、初期化をcallbackで遅延するなら上記順でも動作します。確実性を高めるなら「Maps API（no callback）」→「gmaps.js」→最後にinitMap()呼び出し、の順に組む方法もあります。

ステップ4：外部リソースを「Resources」に設定する場合

JSFiddleの「External Resources」に以下を追加する方法でも可。ただし順序が崩れやすいので注意。

• https://cdn.jsdelivr.net/npm/gmaps@0.4.25/gmaps.min.js
• https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE

この場合、JSパネルで次を記述し、JS設定を「onLoad」にする：

window.addEventListener('load', function() {
  if (!window.google || !google.maps) {
    console.error('Google Maps APIの読み込みに失敗しました');
    return;
  }
  var map = new GMaps({
    el: '#map',
    lat: 35.6809591,
    lng: 139.7673068,
    zoom: 14
  });
});

HTML側に

map.geocode({
  address: '東京駅',
  callback: function(results, status) {
    if (status !== 'OK' || !results.length) return;
    var latlng = results[0].geometry.location;
    map.setCenter(latlng.lat(), latlng.lng());
    map.addMarker({ lat: latlng.lat(), lng: latlng.lng(), title: '東京駅' });
  }
});

map.addStyle({
  styledMapName: 'Dark',
  styles: [{ featureType: 'all', elementType: 'all', stylers: [{ saturation: -80 }] }],
  mapTypeId: 'dark'
});
map.setStyle('dark');