Menata gaya LocalContextMapView

Bagian ini menunjukkan cara menyesuaikan tampilan visual peta LocalContextMapView dengan menerapkan gaya peta kustom dan menyesuaikan tampilan ikon penanda peta.

Menerapkan gaya peta kustom

Anda dapat menyesuaikan tampilan visual peta LocalContextMapView dengan menerapkan gaya kustom. Namun, perhatikan bahwa LocalContextMapView memiliki gaya default yang berbeda dengan Map standar.

Untuk sepenuhnya mengganti gaya default LocalContextMapView dengan gaya kustom (styles menyimpan array gaya kustom):

// Set the styles in map options.
localContextMapView.map.setOptions({
  styles,
});

Untuk menimpa gaya default LocalContextMapView dengan gaya kustom (styles):

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

Menyesuaikan ikon penanda

Anda dapat menetapkan tampilan visual ikon penanda dengan menyesuaikan warna pin, warna glyph, dan skala (ukuran). Lakukan hal ini saat melakukan inisialisasi LocalContextMapView. Anda dapat menetapkan nilai ini ke objek statis (gaya ikon tidak berubah sesuai status), atau fungsi dinamis (gaya ikon berubah saat ikon ditandai atau dipilih).

  • Gaya kustom digabungkan dengan gaya default.
  • Semua sintaksis warna CSS didukung termasuk kata kunci RGB, heksadesimal, HSL, dan warna.
  • Skala adalah nilai numerik, dengan skala 2 dua kali lebih besar dari skala 1, dan seterusnya. Secara default, pin memiliki nilai skala berbeda yang ditetapkan untuk status yang berbeda. Skala bersifat mutlak, jadi nilai yang Anda teruskan tidak akan mengubah ukuran pin secara relatif terhadap nilai default, melainkan mengganti default. Misalnya, menetapkan skala ke 1 untuk semua status akan membuat pin berukuran sama, terlepas dari statusnya.

Menetapkan warna dan skala ikon penanda secara statis

Anda dapat menetapkan warna serta skala default untuk ikon penanda dan glyph. Untuk melakukannya, tentukan nilai warna untuk glyphColor dan background, serta nilai numerik untuk scale di pinOptionsSetup. Contoh berikut menetapkan ikon ke hitam, glyph ke putih, dan meningkatkan skala menjadi 2:

const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.querySelector('#map'),
    placeTypePreferences: ['restaurant'],
    maxPlaceCount: 12,
    pinOptionsSetup: {glyphColor: '#FFF', background: '#000', scale: 2},
 });

Menetapkan warna dan skala ikon penanda secara dinamis

Untuk menetapkan warna default untuk ikon dan glyph penanda berdasarkan status (default, ditandai, atau dipilih), gunakan pernyataan bersyarat untuk menetapkan nilai yang diinginkan bagi setiap status. Saat pengguna mengarahkan mouse ke penanda, isHighlighted menjadi true. Saat pengguna mengklik penanda, isSelected akan menjadi true (benar). Saat tampilan detail tempat ditutup, ikon penanda akan kembali ke gaya visual default. Contoh berikut menunjukkan perubahan gaya ikon penanda berdasarkan status:

pinOptionsSetup: ({isSelected, isHighlighted}) => {
  if (isHighlighted) {
    return {glyphColor: 'white', background: '#990000', scale: 1.5};
  }
  if (isSelected) {
    return {glyphColor: 'rgb(0, 128, 0)', background: 'pink', scale: 2};
  }
},

Menggunakan gaya visual peta berbasis Cloud dengan Konteks Lokal versi Beta

Untuk menggunakan gaya visual peta berbasis Cloud bersama dengan Konteks Lokal versi Beta, lakukan langkah-langkah berikut:

  1. Membuat Map dengan mapId dan meneruskan ke LocalContextMapView
  2. Menonaktifkan label dan ikon untuk lokasi menarik (POI) generik.
  3. Menonaktifkan beberapa elemen di opsi Map bagian dalam. Langkah-langkah ini bersifat opsional.

Membuat Map dengan mapId dan meneruskan ke LocalContextMapView

Untuk menambahkan peta menggunakan ID gaya visual peta berbasis Cloud, tentukan elemen map (termasuk ID dan semua opsi Map bagian dalam), dan gunakan hal ini untuk melakukan inisialisasi LocalContextMapView, seperti yang ditunjukkan pada contoh berikut:

    function initMap() {
      const mapWithId = new google.maps.Map(document.createElement('div'),
        {center: {lat: 37.7749, lng: -122},
        zoom: 10,
        mapId: 'YOUR_MAP_ID_HERE'});
      const localContextMapView = new google.maps.localContext.LocalContextMapView({
        element: document.querySelector("#map"),
        placeTypePreferences: ["restaurant", "bar"],
        map: mapWithId,
        maxPlaceCount: 12,
      });
    };

Menonaktifkan label dan ikon untuk POI generik

Guna menonaktifkan label dan ikon untuk POI generik, lakukan langkah-langkah berikut:

  1. Kunjungi Konsol Google Cloud, lalu pilih Map Styles untuk membuka layar Map Styles.
  2. Dalam konfigurasi gaya untuk Points of interest, tetapkan Visibility ke Off untuk Labels dan Icons.
  3. Dalam konfigurasi gaya untuk Points of interest, tetapkan Visibility ke On untuk Park Labels.

Menetapkan opsi Map bagian dalam (opsional)

Selain opsi Map bagian dalam lainnya yang telah ditetapkan, Anda juga dapat menetapkan opsi Map bagian dalam berikut seperti yang ditunjukkan di sini:

localContextMapView.map.setOptions({
  // ...
  clickableIcons: false,
});