GoogleからHERE Maps API for JavaScriptルート検索に切り替える

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

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

JavaScriptインターフェースを使用して、リクエストを作成し、HERE Routing APIからレスポンスを受信する (ポイントAからポイントBまでのナビゲーション経路)。
地図上にポリラインルートの形状を追加する。

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

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

利用しやすい料金とシンプルな料金設定。HEREでは、利用するサービスの種類に関係なく、1日あたりのトランザクション制限なしで無料で利用できます。複雑な料金表はありません。
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 Routing
            const directionsService = new google.maps.DirectionsService();
            const directionsRenderer = new google.maps.DirectionsRenderer();
            directionsRenderer.setMap(map);
            const request = {
               origin: new google.maps.LatLng(37.80221, -122.4191),
               destination: new google.maps.LatLng(37.76839, -122.51089),
               travelMode: 'DRIVING'
            };
            directionsService.route(request, response => {
               directionsRenderer.setDirections(response);
            });
         }
      </script>
      <script src="https://maps.googleapis.com/maps/api/js?key=GOOGLE-API-KEY&callback=initMap" async defer></script>
   </body>
</html>

HERE Mapsのルート検索

既存のコードを次のように編集します。このコードはHERE Routing APIにリクエストを送信し、返された座標を使用して地図上に1つのポリラインを表示します。

<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" />
   <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>
   <style>
      html, body { border: 0; margin: 0; padding: 0; }
      #map { height: 100vh; width: 100vw; }
   </style>
</head>
<body>
   <div id="map"></div>
   <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 routing
      //Configure transportation mode, start, end points
      const request = {
         routingMode: 'fast',
         transportMode: 'car',
         origin: '37.80221,-122.4191',
         destination: '37.76839,-122.51089',
         return: 'polyline'
      };
      //Initialize routing service
      const router = platform.getRoutingService();
      router.calculateRoute(request, response => {
         //Parse the route's shape
         const sections = response.routes[0].sections;
         const lineString = H.geo.LineString.fromFlexiblePolyline(sections[0].polyline);
         //Create a polyline with the shape
         const routeLine = new H.map.Polyline(lineString, {
            style: { strokeColor: 'blue', lineWidth: 3 }
         });
         //Add route to map
         map.addObject(routeLine);
         //Zoom to bounds of the route shape
         map.getViewModel().setLookAtData({ bounds: routeLine.getBoundingBox() });
      });
   </script>
</body>
</html>

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

HERE Maps JavaScript APIを使用したルート検索の詳細については、こちらのガイドを参照してください。