Penanda

Pilih platform: Android iOS JavaScript

Pengantar

Penanda mengidentifikasi lokasi pada peta. Secara default, penanda menggunakan gambar standar. Penanda dapat menampilkan gambar kustom, yang dalam hal ini biasanya disebut sebagai "ikon". Penanda dan ikon adalah objek dengan jenis Marker. Anda dapat menetapkan ikon khusus dalam konstruktor penanda, atau dengan memanggil setIcon() pada penanda. Lihat selengkapnya tentang menyesuaikan gambar penanda.

Umumnya, penanda berjenis overlay. Untuk informasi tentang jenis overlay lainnya, lihat Menggambar pada peta.

Penanda didesain agar interaktif. Misalnya, penanda secara default menerima peristiwa 'click', sehingga Anda dapat menambahkan pemroses peristiwa untuk memunculkan jendela info yang menampilkan informasi kustom. Anda dapat mengizinkan pengguna memindahkan penanda pada peta dengan menetapkan properti draggable penanda ke true. Untuk informasi selengkapnya tentang penanda yang dapat ditarik, lihat di bawah.

Menambahkan penanda

Konstruktor google.maps.Marker menggunakan satu literal objek Marker options, yang menentukan properti awal penanda.

Kolom berikut sangat penting dan biasanya ditetapkan saat membuat penanda:

position (wajib) menentukan LatLng yang mengidentifikasi lokasi awal penanda. Salah satu cara untuk mengambil LatLng adalah menggunakan layanan Geocoding.
map (opsional) menetapkan Map untuk menempatkan penanda. Jika Anda tidak menetapkan peta pada konstruksi penanda, penanda akan dibuat tetapi tidak dilekatkan pada (atau ditampilkan pada) peta. Anda dapat menambahkan penanda nanti dengan memanggil metode setMap() penanda.

Contoh berikut menambahkan penanda sederhana ke peta di Uluru, di tengah-tengah Australia:

TypeScript

function initMap(): void {
  const myLatLng = { lat: -25.363, lng: 131.044 };

  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: myLatLng,
    }
  );

  new google.maps.Marker({
    position: myLatLng,
    map,
    title: "Hello World!",
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

function initMap() {
  const myLatLng = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: myLatLng,
  });

  new google.maps.Marker({
    position: myLatLng,
    map,
    title: "Hello World!",
  });
}

window.initMap = initMap;index.js

Lihat contoh

Mencoba Contoh

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Pada contoh di atas, penanda ditempatkan di peta pada konstruksi penanda menggunakan properti map pada opsi penanda. Atau, Anda dapat menambahkan penanda ke peta secara langsung menggunakan metode setMap() penanda, seperti yang ditunjukkan pada contoh di bawah ini:

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!"
});

// To add the marker to the map, call setMap();
marker.setMap(map);

title penanda akan muncul sebagai tooltip.

Jika Anda tidak ingin meneruskan Marker options apa pun di konstruktor penanda, teruskan objek kosong {} dalam argumen terakhir konstruktor.

Lihat contoh

Menghapus penanda

Untuk menghapus penanda dari peta, panggil metode setMap() yang meneruskan null sebagai argumen.

marker.setMap(null);

Perhatikan, metode di atas tidak menghapus penanda secara permanen. Metode ini hanya menghapus penanda dari peta. Jika ingin menghapus penanda secara permanen, Anda harus menghapusnya dari peta, lalu menetapkan penanda itu sendiri ke null.

Jika ingin mengelola kumpulan penanda. Anda harus membuat array untuk menyimpan penanda tersebut. Dengan menggunakan array ini, Anda kemudian dapat memanggil setMap() pada setiap penanda dalam array satu per satu jika Anda perlu menghapus penanda. Anda dapat menghapus penanda secara permanen dengan menghapusnya dari peta, lalu menetapkan length array ke 0, yang akan menghapus semua referensi ke penanda tersebut.

Lihat contoh

Menyesuaikan gambar penanda

Anda dapat menyesuaikan tampilan visual penanda dengan menentukan file gambar atau ikon berbasis vektor untuk ditampilkan, bukan pushpin Google Maps default. Anda dapat menambahkan teks dengan label penanda, dan menggunakan ikon kompleks untuk menentukan wilayah yang dapat diklik, serta menetapkan urutan tumpukan penanda.

Penanda dengan ikon gambar

Dalam kasus paling dasar, ikon dapat menunjukkan gambar yang akan digunakan, bukan ikon pushpin default Google Maps. Untuk menentukan ikon tersebut, tetapkan properti icon penanda ke URL gambar. Maps JavaScript API akan menetapkan ukuran ikon secara otomatis.

TypeScript

// This example adds a marker to indicate the position of Bondi Beach in Sydney,
// Australia.
function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
    }
  );

  const image =
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
  const beachMarker = new google.maps.Marker({
    position: { lat: -33.89, lng: 151.274 },
    map,
    icon: image,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// This example adds a marker to indicate the position of Bondi Beach in Sydney,
// Australia.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
  });
  const image =
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
  const beachMarker = new google.maps.Marker({
    position: { lat: -33.89, lng: 151.274 },
    map,
    icon: image,
  });
}

window.initMap = initMap;index.js

Lihat contoh

Mencoba Contoh

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Penanda dengan ikon berbasis vektor

Anda dapat menggunakan jalur vektor SVG kustom untuk menetapkan tampilan visual penanda. Untuk melakukannya, teruskan literal objek Symbol dengan jalur yang diinginkan ke properti icon penanda. Anda dapat menentukan jalur kustom menggunakan notasi jalur SVG, atau menggunakan salah satu jalur yang telah ditetapkan di google.maps.SymbolPath. Properti anchor diperlukan agar penanda dapat dirender dengan benar saat tingkat zoom berubah. Pelajari lebih lanjut cara menggunakan Simbol untuk membuat ikon berbasis vektor untuk penanda (dan polyline).

TypeScript

// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a marker-shaped
// symbol with a blue fill and no border.

function initMap(): void {
  const center = new google.maps.LatLng(-33.712451, 150.311823);
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 9,
      center: center,
    }
  );

  const svgMarker = {
    path: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
    fillColor: "blue",
    fillOpacity: 0.6,
    strokeWeight: 0,
    rotation: 0,
    scale: 2,
    anchor: new google.maps.Point(0, 20),
  };

  new google.maps.Marker({
    position: map.getCenter(),
    icon: svgMarker,
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a marker-shaped
// symbol with a blue fill and no border.
function initMap() {
  const center = new google.maps.LatLng(-33.712451, 150.311823);
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 9,
    center: center,
  });
  const svgMarker = {
    path: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
    fillColor: "blue",
    fillOpacity: 0.6,
    strokeWeight: 0,
    rotation: 0,
    scale: 2,
    anchor: new google.maps.Point(0, 20),
  };

  new google.maps.Marker({
    position: map.getCenter(),
    icon: svgMarker,
    map: map,
  });
}

window.initMap = initMap;index.js

Lihat contoh

Mencoba Contoh

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Label penanda

Label penanda adalah huruf atau angka yang muncul di dalam penanda. Gambar penanda di bagian ini menampilkan label penanda dengan huruf 'B'. Anda dapat menentukan label penanda sebagai string atau objek MarkerLabel yang menyertakan string dan properti label lainnya.

Saat membuat penanda, Anda dapat menentukan properti label dalam objek MarkerOptions. Atau, Anda dapat memanggil setLabel() pada objek Penanda untuk menetapkan label pada penanda yang ada.

Contoh berikut menampilkan penanda berlabel saat pengguna mengklik pada peta:

TypeScript

// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let labelIndex = 0;

function initMap(): void {
  const bangalore = { lat: 12.97, lng: 77.59 };
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 12,
      center: bangalore,
    }
  );

  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, "click", (event) => {
    addMarker(event.latLng, map);
  });

  // Add a marker at the center of the map.
  addMarker(bangalore, map);
}

// Adds a marker to the map.
function addMarker(location: google.maps.LatLngLiteral, map: google.maps.Map) {
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
  new google.maps.Marker({
    position: location,
    label: labels[labelIndex++ % labels.length],
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let labelIndex = 0;

function initMap() {
  const bangalore = { lat: 12.97, lng: 77.59 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: bangalore,
  });

  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, "click", (event) => {
    addMarker(event.latLng, map);
  });
  // Add a marker at the center of the map.
  addMarker(bangalore, map);
}

// Adds a marker to the map.
function addMarker(location, map) {
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
  new google.maps.Marker({
    position: location,
    label: labels[labelIndex++ % labels.length],
    map: map,
  });
}

window.initMap = initMap;index.js

Lihat contoh

Mencoba Contoh

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Ikon rumit

Anda dapat menentukan bentuk rumit untuk menunjukkan wilayah yang dapat diklik, dan menentukan tampilan ikon terkait dengan overlay lain ("urutan tumpukannya"). Ikon yang ditentukan dengan cara ini harus menetapkan properti icon ke objek berjenis Icon.

Objek Icon menentukan gambar. Objek ini juga menentukan size ikon, origin ikon (misalnya, jika gambar yang Anda inginkan adalah bagian dari gambar yang lebih besar dalam sprite), dan anchor tempat hotspot ikon berada (berdasarkan asalnya).

Jika Anda menggunakan label dengan penanda kustom, Anda dapat menempatkan label dengan properti labelOrigin di objek Icon.

TypeScript

// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 10,
      center: { lat: -33.9, lng: 151.2 },
    }
  );

  setMarkers(map);
}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
const beaches: [string, number, number, number][] = [
  ["Bondi Beach", -33.890542, 151.274856, 4],
  ["Coogee Beach", -33.923036, 151.259052, 5],
  ["Cronulla Beach", -34.028249, 151.157507, 3],
  ["Manly Beach", -33.80010128657071, 151.28747820854187, 2],
  ["Maroubra Beach", -33.950198, 151.259302, 1],
];

function setMarkers(map: google.maps.Map) {
  // Adds markers to the map.

  // Marker sizes are expressed as a Size of X,Y where the origin of the image
  // (0,0) is located in the top left of the image.

  // Origins, anchor positions and coordinates of the marker increase in the X
  // direction to the right and in the Y direction down.
  const image = {
    url: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(20, 32),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(0, 32),
  };
  // Shapes define the clickable region of the icon. The type defines an HTML
  // <area> element 'poly' which traces out a polygon as a series of X,Y points.
  // The final coordinate closes the poly by connecting to the first coordinate.
  const shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: "poly",
  };

  for (let i = 0; i < beaches.length; i++) {
    const beach = beaches[i];

    new google.maps.Marker({
      position: { lat: beach[1], lng: beach[2] },
      map,
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3],
    });
  }
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 10,
    center: { lat: -33.9, lng: 151.2 },
  });

  setMarkers(map);
}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
const beaches = [
  ["Bondi Beach", -33.890542, 151.274856, 4],
  ["Coogee Beach", -33.923036, 151.259052, 5],
  ["Cronulla Beach", -34.028249, 151.157507, 3],
  ["Manly Beach", -33.80010128657071, 151.28747820854187, 2],
  ["Maroubra Beach", -33.950198, 151.259302, 1],
];

function setMarkers(map) {
  // Adds markers to the map.
  // Marker sizes are expressed as a Size of X,Y where the origin of the image
  // (0,0) is located in the top left of the image.
  // Origins, anchor positions and coordinates of the marker increase in the X
  // direction to the right and in the Y direction down.
  const image = {
    url: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(20, 32),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(0, 32),
  };
  // Shapes define the clickable region of the icon. The type defines an HTML
  // <area> element 'poly' which traces out a polygon as a series of X,Y points.
  // The final coordinate closes the poly by connecting to the first coordinate.
  const shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: "poly",
  };

  for (let i = 0; i < beaches.length; i++) {
    const beach = beaches[i];

    new google.maps.Marker({
      position: { lat: beach[1], lng: beach[2] },
      map,
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3],
    });
  }
}

window.initMap = initMap;index.js

Lihat contoh

Mencoba Contoh

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Mengonversi objek `MarkerImage` ke jenis `Icon`

Hingga Maps JavaScript API versi 3.10, ikon kompleks ditetapkan sebagai objek MarkerImage. Literal objek Icon ditambahkan dalam versi 3.10, dan menggantikan MarkerImage dari versi 3.11 dan seterusnya. Literal objek Icon mendukung parameter yang sama seperti MarkerImage, sehingga memudahkan Anda mengonversi MarkerImage menjadi Icon dengan menghapus konstruktor, menggabungkan parameter sebelumnya dalam {}, dan menambahkan nama-nama setiap parameter. Contoh:

var image = new google.maps.MarkerImage(
    place.icon,
    new google.maps.Size(71, 71),
    new google.maps.Point(0, 0),
    new google.maps.Point(17, 34),
    new google.maps.Size(25, 25));

menjadi

var image = {
  url: place.icon,
  size: new google.maps.Size(71, 71),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(17, 34),
  scaledSize: new google.maps.Size(25, 25)
};

Mengoptimalkan penanda

Pengoptimalan akan meningkatkan performa dengan merender banyak penanda sebagai elemen statis tunggal. Hal ini berguna jika ada banyak penanda yang diperlukan. Secara default, Maps JavaScript API akan menentukan apakah penanda akan dioptimalkan. Jika ada banyak penanda, Maps JavaScript API akan mencoba merender penanda dengan pengoptimalan. Tidak semua Penanda dapat dioptimalkan; dalam beberapa situasi, Maps JavaScript API mungkin perlu merender Penanda tanpa pengoptimalan. Nonaktifkan perenderan yang dioptimalkan untuk GIF atau PNG animasi, atau jika setiap penanda harus dirender sebagai elemen DOM terpisah. Contoh berikut menunjukkan cara pembuatan penanda yang dioptimalkan:

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!",
    optimized: true 
});

Membuat penanda dapat diakses

Anda dapat membuat penanda dapat diakses dengan menambahkan peristiwa pemroses klik, dan menetapkan optimized ke false. Pemroses klik menyebabkan penanda memiliki semantik tombol, yang dapat diakses menggunakan navigasi keyboard, pembaca layar, dan sebagainya. Gunakan opsi title untuk menampilkan teks yang dapat diakses bagi penanda.

Pada contoh berikut, penanda pertama menerima fokus saat tab ditekan; Anda kemudian dapat menggunakan tombol panah untuk berpindah di antara penanda. Tekan tab lagi untuk terus berpindah di antara kontrol peta lainnya. Jika penanda memiliki jendela info, Anda dapat membukanya dengan mengklik penanda, atau dengan menekan tombol enter atau spasi saat penanda dipilih. Saat jendela info ditutup, fokus akan kembali ke penanda terkait.

TypeScript

// The following example creates five accessible and
// focusable markers.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 12,
      center: { lat: 34.84555, lng: -111.8035 },
    }
  );

  // Set LatLng and title text for the markers. The first marker (Boynton Pass)
  // receives the initial focus when tab is pressed. Use arrow keys to
  // move between markers; press tab again to cycle through the map controls.
  const tourStops: [google.maps.LatLngLiteral, string][] = [
    [{ lat: 34.8791806, lng: -111.8265049 }, "Boynton Pass"],
    [{ lat: 34.8559195, lng: -111.7988186 }, "Airport Mesa"],
    [{ lat: 34.832149, lng: -111.7695277 }, "Chapel of the Holy Cross"],
    [{ lat: 34.823736, lng: -111.8001857 }, "Red Rock Crossing"],
    [{ lat: 34.800326, lng: -111.7665047 }, "Bell Rock"],
  ];

  // Create an info window to share between markers.
  const infoWindow = new google.maps.InfoWindow();

  // Create the markers.
  tourStops.forEach(([position, title], i) => {
    const marker = new google.maps.Marker({
      position,
      map,
      title: `${i + 1}. ${title}`,
      label: `${i + 1}`,
      optimized: false,
    });

    // Add a click listener for each marker, and set up the info window.
    marker.addListener("click", () => {
      infoWindow.close();
      infoWindow.setContent(marker.getTitle());
      infoWindow.open(marker.getMap(), marker);
    });
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// The following example creates five accessible and
// focusable markers.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: 34.84555, lng: -111.8035 },
  });
  // Set LatLng and title text for the markers. The first marker (Boynton Pass)
  // receives the initial focus when tab is pressed. Use arrow keys to
  // move between markers; press tab again to cycle through the map controls.
  const tourStops = [
    [{ lat: 34.8791806, lng: -111.8265049 }, "Boynton Pass"],
    [{ lat: 34.8559195, lng: -111.7988186 }, "Airport Mesa"],
    [{ lat: 34.832149, lng: -111.7695277 }, "Chapel of the Holy Cross"],
    [{ lat: 34.823736, lng: -111.8001857 }, "Red Rock Crossing"],
    [{ lat: 34.800326, lng: -111.7665047 }, "Bell Rock"],
  ];
  // Create an info window to share between markers.
  const infoWindow = new google.maps.InfoWindow();

  // Create the markers.
  tourStops.forEach(([position, title], i) => {
    const marker = new google.maps.Marker({
      position,
      map,
      title: `${i + 1}. ${title}`,
      label: `${i + 1}`,
      optimized: false,
    });

    // Add a click listener for each marker, and set up the info window.
    marker.addListener("click", () => {
      infoWindow.close();
      infoWindow.setContent(marker.getTitle());
      infoWindow.open(marker.getMap(), marker);
    });
  });
}

window.initMap = initMap;index.js

Lihat contoh

Mencoba Contoh

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Menganimasikan penanda

Anda dapat menganimasikan penanda agar menampilkan gerakan dinamis dalam berbagai macam situasi. Untuk menetapkan cara penanda dianimasikan, gunakan properti animation penanda, dari jenis google.maps.Animation. Nilai-nilai Animation berikut didukung:

DROP menunjukkan bahwa penanda harus turun dari bagian atas peta ke lokasi akhirnya saat pertama kali ditempatkan di peta. Animasi akan berhenti setelah penanda tidak bergerak dan animation akan kembali ke null. Jenis animasi ini biasanya ditentukan selama pembuatan Marker.
BOUNCE menunjukkan bahwa penanda akan memantul-mantul di tempat. Penanda memantul terus-menerus hingga properti animation-nya ditetapkan secara eksplisit ke null.

Anda dapat memulai animasi pada penanda yang ada dengan memanggil setAnimation() pada objek Marker.

TypeScript

// The following example creates a marker in Stockholm, Sweden using a DROP
// animation. Clicking on the marker will toggle the animation between a BOUNCE
// animation and no animation.

let marker: google.maps.Marker;

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 13,
      center: { lat: 59.325, lng: 18.07 },
    }
  );

  marker = new google.maps.Marker({
    map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: { lat: 59.327, lng: 18.067 },
  });
  marker.addListener("click", toggleBounce);
}

function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// The following example creates a marker in Stockholm, Sweden using a DROP
// animation. Clicking on the marker will toggle the animation between a BOUNCE
// animation and no animation.
let marker;

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 13,
    center: { lat: 59.325, lng: 18.07 },
  });

  marker = new google.maps.Marker({
    map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: { lat: 59.327, lng: 18.067 },
  });
  marker.addListener("click", toggleBounce);
}

function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

window.initMap = initMap;index.js

Lihat contoh

Mencoba Contoh

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Jika Anda memiliki banyak penanda, Anda mungkin tidak ingin menempatkan semuanya di peta sekaligus. Anda dapat menggunakan setTimeout() untuk memberikan ruang pada animasi penanda menggunakan pola seperti yang ditunjukkan di bawah ini:

function drop() {
  for (var i =0; i < markerArray.length; i++) {
    setTimeout(function() {
      addMarkerMethod();
    }, i * 200);
  }
}

Lihat contoh

Membuat penanda dapat ditarik

Untuk memungkinkan pengguna menarik penanda ke lokasi yang berbeda pada peta, tetapkan draggable ke true dalam opsi penanda.

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

// Place a draggable marker on the map
var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    draggable:true,
    title:"Drag me!"
});

Penyesuaian Penanda Lebih Lanjut

Untuk penanda yang disesuaikan sepenuhnya, lihat contoh pop-up yang disesuaikan.

Untuk ekstensi class Penanda lebih lanjut, pengelompokan dan pengelolaan penanda, serta penyesuaian overlay, lihat library open source.

Penanda

Pengantar

Menambahkan penanda

TypeScript

JavaScript

Mencoba Contoh

Menghapus penanda

Menyesuaikan gambar penanda

Penanda dengan ikon gambar

TypeScript

JavaScript

Mencoba Contoh

Penanda dengan ikon berbasis vektor

TypeScript

JavaScript

Mencoba Contoh

Label penanda

TypeScript

JavaScript

Mencoba Contoh

Ikon rumit

TypeScript

JavaScript

Mencoba Contoh

Mengonversi objek MarkerImage ke jenis Icon

Mengoptimalkan penanda

Membuat penanda dapat diakses

TypeScript

JavaScript

Mencoba Contoh

Menganimasikan penanda

TypeScript

JavaScript

Mencoba Contoh

Membuat penanda dapat ditarik

Penyesuaian Penanda Lebih Lanjut

Mengonversi objek `MarkerImage` ke jenis `Icon`