はじめに

HERE Maps API for JavaScript は v3.2 から内部構成が整理されました。

その影響で、次のポイントで自分自身がハマリました。。。

地図が真っ白になる
401 / 403 エラーが出る
v3.1 のコードがそのまま動かない
Japan 向けスタイルが分からない

本記事では、

HERE Maps API for JavaScript v3.2
Japan 向け Vector Tile（core/mc）
Tokyo theme（tko.normal.day）

を使い、
👉 CodePen 上で「確実に日本地図を表示できる最小構成」
を作るところまで、ChatGPT-5.2 とまとめました。

※ 検索（Geocoding / Reverse Geocoding）は設計が長くなるため、今回は一旦除外します。

この記事でできること

HERE Maps JS v3.2 を CodePen で表示できる
Japan 向け core/mc ベクタータイルの正しい使い方が分かる
v3.1 時代の oslo/japan スタイルによる 403 問題を回避できる
**「なぜ白地図になるのか」**を理解できる

事前準備

HERE アカウントと APIキー

事前に以下を準備してください。

HERE Platform にサインアップ
Access Manager で App を作成
API Key を発行

参考手順

CodePen の設定（重要）

JavaScript（External Scripts）

CodePen の Settings → JavaScript → Add External Scripts に、HERE Maps API for JavaScript v3.2 系のみを追加します。

https://js.api.here.com/v3/3.2/mapsjs-core.js
https://js.api.here.com/v3/3.2/mapsjs-service.js
https://js.api.here.com/v3/3.2/mapsjs-ui.js
https://js.api.here.com/v3/3.2/mapsjs-mapevents.js

ポイントは

v3.2 系で完全に統一する
mapsjs-harp.js は不要（v3.2 では core に統合済み）
v3.1 の URL を 1本でも混在させない

CSS（External Stylesheets）

CSS も v3.2 系の UI スタイルのみを指定します。
CodePen の Settings → CSS → Add External Stylesheets に以下を追加します。

https://js.api.here.com/v3/3.2/mapsjs-ui.css

使用するのは mapsjs-ui.css（v3.2）

⚠️ JavaScript と CSS のバージョン不一致は白地図の原因になります

ハマりポイント

v3.1 の Japan スタイルは v3.2 では使えない

v3.1 時代によく使われていた oslo/japan スタイル

https://js.api.here.com/v3/3.1/styles/omv/oslo/japan/normal.day.json

は、v3.2 環境では 403 エラーになります。
理由は以下の通りです。

v3.1 専用スタイルである
oslo/japan は v3.2 では提供されていない
json / yaml の混在で誤った URL を参照しやすい

👉 v3.2 では Tokyo theme（tko）を使うのが正解です。

v3.2 Japan 向けの正解構成

v3.2 で日本地図を安定表示するための構成は以下です。

Vector Tile： v2/vectortiles/core/mc
Style： tko.normal.day
Engine： HARP（v3.2 標準）
Language：日本語（lg: ja）

参考リンク: 日本のデータを含む地図を表示する

この構成により、以下の問題を回避できます。

401 エラー
403 エラー
白地図

実装イメージ（最小構成）

今回の構成では、次のようなシンプルな UI を想定しています。

APIキー入力欄
「地図表示」ボタン
地図表示エリア

CodePen 上で APIキーを入力し、ボタンを押すだけで 日本地図が即座に表示される構成 です。ChatGPT-5.2 と壁打ちしながら作成してます。

HTML

<h3>HERE Maps JS v3.2 (Japan core/mc + tko style)</h3>

<div class="row">
  <label>API Key</label>
  <input id="apiKey" type="password" placeholder="APIキーを入力">
  <button id="btnInit">地図表示</button>
</div>

<div id="status" class="status">
  APIキーを入力して「地図表示」を押してください。
</div>

<div id="mapContainer"></div>

CSS

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", Arial, sans-serif;
  margin: 16px;
}

.row {
  display: flex;
  gap: 8px;
  align-items: center;
}

input {
  flex: 1;
  padding: 10px;
}

button {
  padding: 10px 12px;
}

.status {
  margin: 12px 0;
  padding: 10px;
  background: #f7f9ff;
  border-radius: 8px;
}

#mapContainer {
  width: 100%;
  height: 440px;
  border: 1px solid #ddd;
  border-radius: 12px;
}

JavaScript（地図表示のみ）

/* global H */
(() => {
  "use strict";

  const elKey = document.getElementById("apiKey");
  const elBtn = document.getElementById("btnInit");
  const elStatus = document.getElementById("status");
  const elMap = document.getElementById("mapContainer");

  let map = null;

  function setStatus(msg) {
    elStatus.textContent = msg;
    console.log("[STATUS]", msg);
  }

  function initMap(apiKeyRaw) {
    const apikey = (apiKeyRaw || "").trim();
    if (apikey.length < 20) {
      setStatus("APIキーが不正です。");
      return;
    }

    setStatus("初期化中…");

    const platform = new H.service.Platform({ apikey });
    const engineType = H.Map.EngineType.HARP;
    const defaultLayers = platform.createDefaultLayers({ engineType });

    const omvService = platform.getOMVService({
      path: "v2/vectortiles/core/mc",
      queryParams: { content: "default,transit" },
    });

    const style = new H.map.render.harp.Style(
      "https://js.api.here.com/v3/3.2/styles/harp/oslo/tko.normal.day.json"
    );

    const provider = new H.service.omv.Provider(omvService, style, {
      engineType,
      lg: "ja",
    });

    const layer = new H.map.layer.TileLayer(provider, { max: 22 });

    if (map) map.dispose();

    map = new H.Map(elMap, layer, {
      zoom: 12,
      center: { lat: 35.68026, lng: 139.76744 },
      pixelRatio: window.devicePixelRatio || 1,
    });

    new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
    H.ui.UI.createDefault(map, defaultLayers);

    window.addEventListener("resize", () => map.getViewPort().resize());

    setStatus("地図表示OK（3.2 / core/mc / tko.normal.day）");
  }

  elBtn.addEventListener("click", () => initMap(elKey.value));
})();

実行結果

HERE Maps JS v3.2 で日本地図が表示される
401 / 403 / 白地図問題を回避できる
CodePen 上で安定して再現可能

まずは 「地図が出る」状態を確実に作ること をゴールにしました。

See the Pen HERE Japan MAP Demo 3.2 by Kenji Komatsu (@kekomat) on CodePen.

今回やらなかったこと（次回以降）

今回は地図表示に集中するため、以下は扱っていません。

Geocoding / Reverse Geocoding
検索結果と地図の完全連動
APIキーの localStorage 保存

まず「地図が出る」状態を作る.
検索や高度な UI は、その上に積み上げていこうと思います。

まとめ

HERE Maps API for JavaScript v3.2 で日本向けの地図表示では、

core/mc ベクタータイルを使う
Tokyo theme（tko.normal.day）を指定する
HARP エンジン（v3.2 標準）に任せる

という構成が、現時点で最も安定しています。

v3.2 への移行や CodePen 作成で詰まっている方の、最初の一歩として参考になれば幸いです。