GoogleからHERE Maps API for JavaScriptジオコーディングに切り替える

このチュートリアルでは、簡単なジオコーディングマップをGoogle Maps JavaScript APIからHERE Maps API for JavaScriptに切り替える手順について説明します。

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

JavaScriptインターフェースを使用して、リクエストを作成し、HEREジオコーディングAPIからレスポンスを受信する (住所を座標に変換する)。
地図上にジオコードレスポンスのマーカーを追加する。

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,
        });

        //Begin Geocoder
        const geocoder = new google.maps.Geocoder();
        const address = "1070 Lombard Street, San Francisco";
        geocoder.geocode({ address }, (results, status) => {
          const marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location,
          });
        });
      }
    </script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=GOOGLE-API-KEY&callback=initMap"
      async
      defer
    ></script>
  </body>
</html>

HERE Mapsのジオコーディング

既存のコードを次のように編集します。このコードはHEREジオコーディングAPIにリクエストを送信し、レスポンスの座標を使用して地図上にマーカーを表示します。

<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);

      // Begin geocoding
      const geocoder = platform.getSearchService();
      geocoder.geocode(
        { q: "1070 Lombard Street, San Francisco" },
        (result) => {
          // Add a marker for each location found
          result.items.forEach((item) => {
            map.addObject(new H.map.Marker(item.position));
          });
        },
        console.error
      );
    </script>
  </body>
</html>

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

HERE Maps JavaScript APIを使用したジオコーディングの詳細については、こちらのガイドを参照してください。