利用開始

このセクションでは、 HERE platform の HERE Maps API for Javascript を使用し実行する方法について説明します。

HERE アカウントを取得
プロジェクトを作成
API キーを入手
サンプルアプリケーションを作成しています
次のステップ

注

このセクションでは、 HERE Maps API for Javascript の使用を迅速に開始するために必要な最小限の設定について説明します。 HERE アカウントの設定、プロジェクトの作成、サービスのリンク、アプリの登録、および認証の詳細については、『 Identity & Access Management Guide』を参照してください。

HERE アカウントの取得

組織が HERE Workspace または HERE Marketplace にサインアップしている場合は、組織の管理者に連絡して、会社に設定されている HERE platform 組織の参加を招待をしてもらってください。組織が設定されていない場合は、 HERE platform の無料試用版をリクエストすることもできます。詳細については、 HERE platform の価格表を参照してください。

プロジェクトを作成

プロジェクトを作成するには、次の手順に従います。

HERE アカウントを使用して HERE platform にサインイン。
ランチャーから[プロジェクトマネージャ]を開きます。
[ 新しいプロジェクトを作成] をクリックする。
プロジェクトの名前を入力する。プロジェクト名は一意である必要はありません。
プロジェクト ID を入力します。プロジェクト ID は組織内で一意である必要があり、組織の有効期間中は変更できません。プロジェクト ID の長さは 4 ～ 16 文字である必要があります。
オプション　: 説明を入力する。
[保存]をクリックする。
[ リソース ] タブで、 [ サービス] を選択し、 [ サービスのリンク ] をクリックします。
HERE Vector Tile API サービスを検索して、マップをレンダリングしたり、使用するその他のサービスを検索し、 [ リンク ] をクリックします。
[完了]をクリックします。

API キーを入手

このガイドでは、既定のマップを表示し、 HERE Maps API for Javascript をベースにした簡単な HTML ページを作成します。まず、 HERE platform から API キーを取得する必要があります。

HERE Maps API for Javascript では、いくつかのサービスが公開されています。これらのサービスを API で使用するには、これらのサービスをプロジェクトにリンクする必要があります。利用可能なサービスのリストは次のとおりです。

HERE Geofencing
HERE Isoline Routing
HERE Map Attributes
HERE Routing
HERE Routing - Transit
HERE Transit -Next Departures
HERE Transit - Station Search
HERE Vector Tile
HERE Search - Autosuggest
HERE Search - Browse
HERE Search - Discover
HERE Search - Forward Geocoder
HERE Search - Place ID Lookup
HERE Search - Reverse Geocoder

API キーを取得するには、次の手順を実行します。

HERE アカウントを使用して HERE platform にサインイン。
ランチャから [Access Manager] を選択します。
[ アプリ] タブを選択し、[ 新しいアプリを登録 ] をクリックします。
アプリの名前を入力します。
オプション : アプリの説明を入力する。
オプション : プロジェクト メニューへの既定のアクセス権からアプリを選択して、プロジェクトにリンクします。プロジェクトの作成方法については、「プロジェクトの作成」セクションを参照してください。
[ 登録] をクリックします HERE platform によって、一意のアプリ ID を持つ新しいアプリが作成されます。
[資格情報]タブで、[API Keys]を選択し、[API キーを生成]をクリックして、アプリケーション認証資格情報用に最大 2 つのAPI キーを生成します。API キーが作成され、表示されます。

サンプルアプリケーションを作成しています

このユースケースは、非対話型のデフォルトマップを表示するアプリケーションを作成します。

この実装では、 JavaScript コードを使用して HTML ページにマップを表示します。この実装は、次の手順で構成されています。

HERE Maps API for Javascript をベースにしたアプリケーションの最初のステップは、必要なコードライブラリまたはモジュールをロードすることです。基本的なユースケースを実装するには、 core と service の 2 つのモジュールが必要です（ HERE Maps API for Javascript モジュールも参照）。

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

<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"
  type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"
  type="text/javascript" charset="utf-8"></script>

"src" 属性の URL には、 API の最新のメジャーリリースを反映するバージョン番号が含まれています。このバージョン番号は新しいリリースごとに変更されるため、下位互換性が失われる可能性があります。詳細については、「 API バージョン」を参照してください。

モバイルデバイスのパフォーマンスを最適化するには <head> 、 HTML ページのセクションに次のメタタグを追加します。

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

これは、 <head>coreとserviceモジュールをロードし、モバイルデバイスで最適なパフォーマンスを保証する完全な要素です。

<!DOCTYPE html>
  <html>
    <head>
      ...
      <meta name="viewport" content="initial-scale=1.0,
        width=device-width" />
      <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"
        type="text/javascript" charset="utf-8"></script>
      <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"
        type="text/javascript" charset="utf-8"></script>
      ...
    </head>
    <body>
      <div style="width: 640px; height: 480px" id="mapContainer"></div>

HERE Maps API for Javascript で作業アプリケーションを作成する際に不可欠なのは、 HERE REST API によって提供されるバックエンドサービスとの通信を確立することです。このシナリオでは、バックエンドサービスがマップデータに対するリクエストを処理し、表示のためにアプリケーションに配信します。

このためには、登録時に受け取ったAPI keyを使用してPlatformオブジェクトを初期化します。

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

さらに、このオブジェクトには、マップタイルサービスのスタブ、ルーティングサービスのスタブなど、完全に機能するサービス　スタブを簡単に作成できるメソッドが用意されています。

このシナリオを続行すると、固定ズームレベルの事前定義された場所を中心にした非インタラクティブなマップが表示されます。この効果を実装するには、次の手順

マップをレンダリングできる HTML コンテナ要素を作成 divします ( 例 : A) 。
H.Map 以下を指定して、オブジェクトをインスタンス化します。
- マップのコンテナ要素
- 使用する地図の種類
- 地図を表示するズームレベル
- 地図を中央に配置するポイントの地理座標

以下に示す実装 JavaScript コードMap は、 normal マップタイプ、ズームレベル１０、および緯度52.5 と経度 13.4 で与えられる、ドイツのベルリン近郊の場所をマップの中心として、オブジェクトを設定します。

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

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

実装では、次のマップイメージが表示されます。

次のセクションでは、ページの完全な HTML コードを含むソリューションを示します。

HTML サンプルページに記入します

以下に、基本的なシナリオを実装する完全なソースコードを示します。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"
    type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"
    type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div style="width: 640px; height: 480px" id="mapContainer"></div>
    <script>
      // Initialize the platform object
      var platform = new H.service.Platform({
        'apikey': 'YOUR_API_KEY'
      });

      // Obtain the default map types from the platform object
      var maptypes = platform.createDefaultLayers();

      // Instantiate (and display) the map
      var map = new H.Map(
        document.getElementById('mapContainer'),
        maptypes.vector.normal.map,
        {
          zoom: 10,
          center: { lng: 13.4, lat: 52.51 }
        });
    </script>
  </body>
</html>

次のステップ

使用可能な例の一覧については、この開発ガイドの「チュートリアル」のセクションを参照してください。
日本のデータに合わせて最適に動作するように HERE Maps API for Javascript を設定する方法については、「日本」を参照してください。
HERE Maps API for Javascript を最も一般的なバンドラーにバンドルする方法については、「バンドル」を参照してください。
このドキュメントに適用される利用規約につきましては、「HERE Documentation License」を参照してください。

利用開始

利用開始

注

HERE アカウントの取得

プロジェクトを作成

API キーを入手

サンプルアプリケーションを作成しています

HTML サンプルページに記入します

次のステップ

「」に一致する結果は件です

「」に一致する結果はありません

開発者

利用開始

注

HERE アカウントの取得

プロジェクトを作成

API キー を入手

サンプルアプリケーションを作成しています

HTML サンプルページに記入します

次のステップ

「」に一致する結果は 件です

「」に一致する結果はありません

開発者

API キーを入手

「」に一致する結果は件です