GoogleからHERE Maps API for JavaScriptに切り替える

このチュートリアルでは、簡単な地図の表示をGoogle Maps JavaScript API からHERE Maps JavaScript API に切り替える手順について説明します。

このチュートリアルでは、コードをGoogle Maps APIからHERE Maps APIに変換して、次のことを実現します。

新規または既存のWebアプリケーションでインタラクティブなベクターマップを表示し、マーカー、ポリゴン、ポップアップなどのマップオブジェクトをオーバーレイします。

HERE Maps JavaScript APIに切り替える理由

HEREロケーションプラットフォームには、Googleと比較して、次のような複数のメリットがあります。

利用しやすい料金とシンプルな料金設定。HEREでは、利用するサービスの種類に関係なく、1か月あたり25万トランザクションまで無料で利用できます。複雑な料金表はありません。
3Dカメラオプションとオブジェクトレンダリング。強化された3Dビューを使用して、見た目に優れた位置情報アプリケーションを開発できます。

資格情報を取得する

HEREアカウントをお持ちでない場合は、「HEREプラットフォームアカウント」で詳細を参照してください。

HEREアカウントに登録したら、APIキーを取得します。

Googleマップを表示する

次のコードは、簡単なGoogle Maps JavaScript APIの設定を示しています。

<html>
  <head>
    <title>Simple Google Map</title>
    <style>
      html,
      body {
        border: 0;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100vh;
        width: 100vw;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById("map"), {
          center: { lat: 37.773972, lng: -122.431297 },
          zoom: 13,
        });
      }
    </script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=GOOGLE-API-KEY&callback=initMap"
      async
      defer
    ></script>
  </body>
</html>

HERE Mapsを表示する

既存のHTMLおよびCSSスケルトンを維持し、次のタスクを実行します。

HERE JavaScriptソースファイルをインポートする
アプリケーションのAPIキーを追加して、HEREプラットフォームでの認証を行う
JavaScriptを使用してHEREマップを初期化する

既存のコードを次のように編集します。

<html>
  <head>
    <title>Simple HERE Map</title>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://js.api.here.com/v3/3.2/mapsjs-ui.css"
    />
    <style>
      html,
      body {
        border: 0;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100vh;
        width: 100vw;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="https://js.api.here.com/v3/3.2/mapsjs-core.js"></script>
    <script src="https://js.api.here.com/v3/3.2/mapsjs-service.js"></script>
    <script src="https://js.api.here.com/v3/3.2/mapsjs-ui.js"></script>
    <script src="https://js.api.here.com/v3/3.2/mapsjs-mapevents.js"></script>
    <script>
      const platform = new H.service.Platform({ apikey: "HERE-API-KEY" });
      const defaultLayers = platform.createDefaultLayers();
      const map = new H.Map(
        document.getElementById("map"),
        defaultLayers.vector.normal.map,
        {
          center: { lat: 37.773972, lng: -122.431297 },
          zoom: 13,
          pixelRatio: window.devicePixelRatio || 1,
        }
      );
      window.addEventListener("resize", () => map.getViewPort().resize());
      const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
      const ui = H.ui.UI.createDefault(map, defaultLayers);
    </script>
  </body>
</html>

📘
注
APIキーをHERE-API-KEYに置き換えます。