HERE Advent Calendar 2025

HERE Technologies

【2025年版】HERE Maps API for JavaScript v3.2 を CodePen で動かす

Last updated at 2025-12-19Posted at 2025-12-19

はじめに

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 作成で詰まっている方の、最初の一歩として参考になれば幸いです。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up