ローカル コンテキストを使った地図のカスタマイズ

この例では、基本地図にカスタムの地図のスタイル設定を適用します。この地図はハワイのワイキキのもので、熱帯のカラーパターンのスタイルが設定されています。また、スポットの表示数を増やすため、maxPlaceCount を 18 に設定します。

コードを理解する

基本地図にアクセスする

基本地図は google.maps.localContext.LocalContextMapView オブジェクトの map プロパティとしてアクセスできます。この地図は通常の google.maps.Map オブジェクトであり、対象のクラスで利用できるすべてのパラメータとメソッドでカスタマイズできます。たとえば、カスタム マーカーやイベント リスナーを追加できます。

var marker = new google.maps.Marker({position: center, map:  localContextMapView.map});
localContextMapView.map.addListener('click', () => {
    localContextMapView.hidePlaceDetailsView();
  });

カスタム スタイルを適用する

google.maps.localContext.LocalContextMapView.map には標準の Map とは異なるデフォルトのスタイルがあるため、そのデフォルトをオーバーライドするか、カスタム スタイルをローカル コンテキスト ライブラリのデフォルトと統合するかを選択します。詳しくは、地図のスタイル設定をご覧ください。

カスタムのスタイル(stylesArray)を LocalContextMapView のデフォルトのスタイルの上にビルドする方法は次のとおりです。

TypeScript

// Merge map styles.
const mergedStyles = map.get("styles").concat(styles);

map.setOptions({
  center: center,
  zoom: 14,
  styles: mergedStyles,
});

JavaScript

// Merge map styles.
const mergedStyles = map.get("styles").concat(styles);

map.setOptions({
  center: center,
  zoom: 14,
  styles: mergedStyles,
});

カスタム マーカーを追加する

この例では、ホテルアイコンを使用して、中心点とデフォルトの赤いピンマーカーを区別しています。詳しくは、Markerlabel プロパティと icon プロパティを変更して、マーカーをカスタマイズする方法をご覧ください。

デフォルトでは、これらのマーカーはローカル コンテキスト ライブラリの POI マーカーの下に表示されます。ローカル コンテキスト ライブラリのマーカーによってカスタム マーカーが見えにくくなるのを防ぐためには、マーカーの zIndex プロパティを maxPlaceCount より大きい値に設定します。

TypeScript

// Add a marker at the center point
new google.maps.Marker({
  position: center,
  map: map,
  icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAdUlEQVR4AWMYOWAU/AfhYWMBCxA3A/FlIN4MxN7I6gjg80DcD8QC+CzIxqIxH6aOSHwfYQmmBZexuQymjgTcj8uCz1gUHybDgvO4LFiMRXE4GRb8x2UBDxCXQ8PxPdSrLNSxAD+g3ALCeNQCKoHhZcHAg1EAAM3cyWj3TGxhAAAAAElFTkSuQmCC",
  zIndex: 30,
});

JavaScript

// Add a marker at the center point
new google.maps.Marker({
  position: center,
  map: map,
  icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAdUlEQVR4AWMYOWAU/AfhYWMBCxA3A/FlIN4MxN7I6gjg80DcD8QC+CzIxqIxH6aOSHwfYQmmBZexuQymjgTcj8uCz1gUHybDgvO4LFiMRXE4GRb8x2UBDxCXQ8PxPdSrLNSxAD+g3ALCeNQCKoHhZcHAg1EAAM3cyWj3TGxhAAAAAElFTkSuQmCC",
  zIndex: 30,
});

サンプルを試す