ガイドv3.2 API Referencev3.1 API Reference
ガイド
  1. 開発者ガイド

HERE Maps API for Javascriptの使用を開始する

 HERE Maps API for JavaScript version 3.2

このセクションでは、HEREプラットフォームでHERE Maps API for JavaScriptをすばやく使い始める方法について説明します。

📘

注

このセクションでは、HERE Maps API for JavaScript の使用を開始するために必要な最小限の設定について説明します。HEREアカウントの設定、プロジェクトの作成、サービスのリンク、アプリの登録、認証の詳細については、「Identity and Access Management - 管理者ガイド」を参照してください。

HEREアカウントを取得する

組織管理者からの招待状を通じて、または無料で利用を開始して、HEREプラットフォームへのアクセスを入手します。

  • 会社がすでにHEREプラットフォーム組織を設立している場合は、組織への参加に招待できる管理者に連絡してください。
  • 会社がまだHEREプラットフォーム組織を設立していない場合は、無料で利用を開始できます。詳細については、「HEREプラットフォームの価格設定」を参照してください。

APIキーを入手する

最初のHERE Maps API for Javascriptアプリを作成する前に、HEREプラットフォームからAPIキーを取得する必要があります。

  1. HEREアカウントを使用してHEREプラットフォームにサインインします。
  2. [ランチャ]ペインで[アクセスマネージャー]を選択します。
  3. [アクセスマネージャー]ページで[アプリ]タブをクリックします。
  4. [アプリ]タブ[Create new app](新しいアプリを作成) をクリックします。
  5. [Create new app](新しいアプリを作成) ウィンドウで新しいアプリの詳細を入力します。
    1. [App name](アプリ名) フィールドにアプリ名を入力します。
    2. [説明]フィールドにアプリのわかりやすい説明を入力します。
    3. [Create app](アプリを作成) をクリックします。HEREプラットフォームで、一意のアプリIDを持つ新しいアプリが作成されます。
  6. アプリ ページで最大 2 つの API キーを生成します。
    1. [資格情報] タブで [API キー] を選択し、[API キーを作成] をクリックします。HERE プラットフォームには作成した API キーと enabled ステータスが表示されます。
    2. 任意：追加の API キーを追加するには、[API キーを作成]をクリックします。 次の図は、API キーの生成の概要を視覚的に示しています。
アプリのAPIキーの生成
📘

注

HERE Maps API for JavaScriptは多数のサービスを公開しています。API がこれらのサービスと連携するには、これらのサービスをプロジェクトにリンクする必要があります。

サポート対象サービスの一覧についての詳細は、「APIリファレンス」のH.serviceのページを参照してください。

サンプルアプリを作成する

デフォルトマップをレンダリングし、ズーム、パン、レイヤー管理などの基本的なインタラクティブ機能を提供するアプリを開発します。これには、衛星画像、リアルタイムの交通状況、交通事案情報などの事前構成されたレイヤーの表示が含まれます。

必要なモジュールを読み込む

HERE Maps API for JavaScriptに基づくアプリを開発する場合の最初のステップは、必要なコードライブラリまたはモジュールを読み込むことです。基本的なユースケースの実装には、次のモジュールが必要です。

  • core
  • service
  • mapevents
  • ui

詳細については、「使用可能なAPIモジュール」を参照してください。

  1. これらのモジュールを読み込むには、以下の<script>要素をHTMLドキュメントの<head>に追加します。

    <script type="text/javascript" src="https://js.api.here.com/v3/3.2/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.2/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.2/mapsjs-mapevents.js"></script>
<script type="text/javascript" charset="utf-8" src="https://js.api.here.com/v3/3.2/mapsjs-ui.js" ></script>
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.2/mapsjs-ui.css" />
    📘

    注

    "src"属性のURLには、このAPIの最新のメジャーリリースを表すバージョン番号が含まれています。このバージョン番号は新しいリリースごとに変更されるため、後方互換性に影響を与える可能性があります。詳細については、「HERE Maps API for JavaScriptの各バージョンを確認する」を参照してください。

  2. モバイル機器で最適なパフォーマンスを確保するには、以下のメタタグをHTMLページの<head>セクションに追加します。

    <meta name="viewport" content="initial-scale=1.0, width=device-width" />

次のスニペットは、必要なすべてのライブラリを読み込む完全な<head>要素を提供します。<div>要素はマップが読み込まれるコンテナを提供します。

<!DOCTYPE html>
  <html>
    <head>
      ...
      <script type="text/javascript" src="https://js.api.here.com/v3/3.2/mapsjs-core.js"></script>
      <script type="text/javascript" src="https://js.api.here.com/v3/3.2/mapsjs-service.js"></script>
      <script type="text/javascript" src="https://js.api.here.com/v3/3.2/mapsjs-mapevents.js"></script>
      <script type="text/javascript" charset="utf-8" src="https://js.api.here.com/v3/3.2/mapsjs-ui.js" ></script>
      <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.2/mapsjs-ui.css" />
      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      ...
    </head>
    <body>
      <div style="width: 100%; height: 700px" id="mapContainer"></div>

HERE API for JavaScriptサービスを有効にする

HERE Maps API for JavaScriptによって動作するアプリを作成する際には、HERE REST APIが提供するバックエンドサービスとの通信を確立させる必要があります。これらのバックエンドサービスがマップデータのリクエストを処理し、その結果を表示用にアプリに提供します。

  1. <script> HTML要素内で、次の例に示すように、登録時に受け取ったAPI keyでPlatformオブジェクトを初期化します。

    const platform = new H.service.Platform({
  'apikey': '{YOUR_API_KEY}'
});

  2. 以下を指定してH.Mapオブジェクトをインスタンス化します。

    • マップ コンテナ要素

    • 使用するマップ タイプ

    • マップを表示するズーム レベル

    • 地図の中心となるポイントの地理座標 次のコードスニペットに示す実装例では、次の仕様でMapオブジェクトを設定します。マップタイプをnormal、ズームレベルを10に設定し、マップの中心はドイツのベルリンにあたる緯度52.5および経度13.4に位置するように設定します。

      // Obtain the default map types from the platform object:
const defaultLayers = platform.createDefaultLayers();

// Instantiate (and display) a map object:
const map = new H.Map(
    document.getElementById('mapContainer'),
    defaultLayers.vector.normal.map,
    {
      zoom: 10,
      center: { lat: 52.5, lng: 13.4 }
    });

  3. モバイルタッチ環境のサポートを含む、マップの基本的なパンおよびズーム操作を有効にします。

    // The behavior variable implements default interactions for pan/zoom
const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

  4. マップの動的なサイズ変更を有効にして、マップを囲むコンテナのサイズ変更に応じて動的に調整できるようにします。

    // Adds an event listener to react to the changing size of the map container
window.addEventListener('resize', () => map.getViewPort().resize());

  5. デフォルトのマップユーザーインターフェースを作成します。

    // Create a set of controls to toggle map views and control zoom
// Placed in the bottom-right corner of the map by default
const ui = H.ui.UI.createDefault(map, defaultLayers)

前のユースケースの実装では、次のインタラクティブマップが表示されます。

次の図は、マップユーザーインターフェースで使用できるデフォルトのビューを示しています。これらのビューは、ニーズに合わせて個別に切り替えることも、組み合わせることもできます。たとえば、交通情報を衛星画像に重ねるなど、さまざまな組み合わせが可能です。

衛星交通状況交通事案

完全なコードサンプル

以下は、このチュートリアルで説明したユースケースの対象とした完全なコードサンプルです。

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.2/mapsjs-core.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.2/mapsjs-service.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.2/mapsjs-mapevents.js"></script>
    <script type="text/javascript" charset="utf-8" src="https://js.api.here.com/v3/3.2/mapsjs-ui.js" ></script>
    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.2/mapsjs-ui.css" />
    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  </head>
  <body>
    <div style="width: 100%; height: 700px" id="mapContainer"></div>
    <script>
     // Initiate and authenticate your connection to the HERE platform:
     const platform = new H.service.Platform({
         'apikey': 'YOUR_HERE_API_KEY'
     });

     // Obtain the default map types from the platform object:
     const defaultLayers = platform.createDefaultLayers();

     // Instantiate (and display) a map:
     const map = new H.Map(
         document.getElementById("mapContainer"),
         defaultLayers.vector.normal.map, {
             zoom: 10,
             center: {
                 lat: 52.5,
                 lng: 13.4
             }
         });

     // MapEvents enables the event system.
     // The behavior variable implements default interactions for pan/zoom (also on mobile touch environments).
     const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

     // Enable dynamic resizing of the map, based on the current size of the enclosing container
     window.addEventListener('resize', () => map.getViewPort().resize());

    // Create the default UI:
    const ui = H.ui.UI.createDefault(map, defaultLayers)
    </script>
  </body>
</html>

次のステップ

14 日前の更新