Wprowadzenie
Znacznik wskazuje lokalizację na mapie. Domyślnie znacznik używa funkcji
standardowy obraz. Znaczniki mogą wyświetlać niestandardowe obrazy, w tym przypadku
nazywanych „ikonami”. Znaczniki i ikony są obiektami typu
Marker
Możesz ustawić ikonę niestandardową w konstruktorze znacznika lub przez
Wywołuję setIcon()
na znaczniku. Więcej informacji:
dostosowania obrazu znacznika.
Ogólnie rzecz biorąc, znaczniki to rodzaj nakładki. Informacje na temat innych typów nakładek, patrz Rysunek na mapie.
Znaczniki zostały zaprojektowane tak, aby były interaktywne. Na przykład domyślnie
odbieraj zdarzenia 'click'
, więc możesz dodać detektor zdarzeń do
wyświetlić
okno informacyjne
wyświetlania niestandardowych informacji. Możesz zezwolić użytkownikom na przenoszenie znacznika na
mapy, ustawiając właściwość draggable
znacznika na
true
Więcej informacji o znacznikach możliwych do przeciągania znajdziesz w sekcji
poniżej.
Dodaj znacznik
google.maps.Marker
konstruktor przyjmuje pojedynczy obiekt Marker options
literał określający początkowe właściwości znacznika.
Podane niżej pola są szczególnie ważne i często ustawiane, gdy: utworzenie znacznika:
-
position
(wymagany) określaLatLng
identyfikujący początkową lokalizację znacznika. Jeden sposobem na pobranieLatLng
jest użycie Usługa geokodowania. -
map
(opcjonalnie) określa poleMap
, na którym ma zostać umieść znacznik. Jeśli nie wskażesz mapy przy budowie znacznik zostanie utworzony, ale nie będzie połączony (ani nie jest wyświetlany) mapę. Znacznik możesz dodać później, wywołując jego funkcję MetodasetMap()
.
Poniższy przykład dodaje prosty znacznik do mapy w Uluru, w centrum Australii:
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;
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;
Zobacz próbkę
W powyższym przykładzie znacznik jest umieszczony na mapie przy budowaniu
za pomocą właściwości map
w opcjach znacznika.
Możesz też dodać znacznik bezpośrednio do mapy, używając
setMap()
znacznika, jak w przykładzie poniżej:
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);
Pole title
znacznika pojawi się jako etykietka.
Jeśli nie chcesz przekazywać Marker options
w
konstruktora znacznika, zamiast tego przekaż pusty obiekt {}
w funkcji
ostatniego argumentu konstruktora.
Usuwanie znacznika
Aby usunąć znacznik z mapy, wywołaj metodę setMap()
podając wartość null
jako argument.
marker.setMap(null);
Pamiętaj, że powyższa metoda nie powoduje usunięcia znacznika. Usuwa
znacznik na mapie. Jeżeli natomiast chcesz usunąć znacznik,
usunąć ją z mapy, a następnie ustawić znacznik na
null
Jeśli chcesz zarządzać zestawem znaczników, utwórz tablicę do przechowywania
znaczniki. Za pomocą tej tablicy możesz następnie wywołać funkcję setMap()
na
każdy znacznik w tablicy, gdy trzeba usunąć te znaczniki. Ty
mogą usunąć znaczniki, usuwając je z mapy, a następnie ustawiając
z tablicy length
do 0
, co powoduje usunięcie wszystkich
lub odwołania do znaczników.
Dostosowywanie obrazu znacznika
Możesz dostosować wygląd znaczników, określając image file lub ikona wektorowa do wyświetlenia zamiast domyślnej Ikona pinezki Map Google. Możesz dodać tekst za pomocą marker label i użyj złożone ikony definiujące klikalne obszary, i ustaw kolejność znaczników.
Znaczniki z ikonami obrazów
W najbardziej podstawowym przypadku ikona może określać obraz, który ma zostać użyty zamiast
domyślna ikona pinezki Map Google. Aby wskazać taką ikonę, ustaw parametr
icon
znacznika do adresu URL obrazu. Interfejs Maps JavaScript API automatycznie dostosuje rozmiar ikony.
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;
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;
Zobacz próbkę
Znaczniki z ikonami wektorowymi
Za pomocą niestandardowych ścieżek wektorowych SVG można określić wygląd
za pomocą znaczników. W tym celu przekaż literał obiektu Symbol
z funkcją
żądaną ścieżkę do właściwości icon
znacznika. Możesz zdefiniować
ścieżki niestandardowej za pomocą
notacji ścieżki SVG lub skorzystaj z jednej ze wstępnie zdefiniowanych ścieżek w
google.maps.SymbolPath. Właściwość anchor
jest wymagana, by znacznik mógł
w przypadku zmiany poziomu powiększenia. Więcej informacji o
przy użyciu symboli i ikon wektorowych
dla znaczników (i linii łamanych).
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;
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;
Zobacz próbkę
Etykiety znaczników
![](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/documentation/javascript/images/markerlabel.png?authuser=5&hl=pl)
Etykieta znacznika to litera lub cyfra wyświetlana wewnątrz znacznika.
obraz znacznika w tej sekcji wyświetla etykietę znacznika z literą „B”
. Możesz określić etykietę znacznika jako ciągu
MarkerLabel
, który zawiera ciąg znaków i inne właściwości etykiet.
Podczas tworzenia znacznika możesz określić właściwość label
w:
MarkerOptions
.
obiektu. Możesz też zadzwonić do firmy setLabel()
pod numer
Znacznik
, aby ustawić etykietę istniejącego znacznika.
W poniższym przykładzie znaczniki etykiet są wyświetlane, gdy użytkownik kliknie ikonę mapa:
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;
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;
Zobacz próbkę
Złożone ikony
Możesz określić złożone kształty, aby wskazać regiony, które można kliknąć.
określać sposób wyświetlania ikon względem innych nakładek (ich
„kolejność grupowa”). Ikony określone w ten sposób powinny
icon
właściwości obiektu typu
Icon
Icon
definiują obraz. Definiują również size
ikona, ikona origin
(jeśli wybrany obraz jest częścią
(np. większego obrazu w spritecie), a elementy
anchor
, gdzie powinien znajdować się hotspot ikony (czyli
w zależności od miejsca pochodzenia).
Jeśli używasz etykiety z własną etykietą
możesz umieścić etykietę przy użyciu
właściwość labelOrigin
w
Icon
obiektu.
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;
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;
Zobacz próbkę
Konwertuję obiekty (MarkerImage
) na typ Icon
Do wersji 3.10 Maps JavaScript API złożone ikony
zostały zdefiniowane jako MarkerImage
obiekty.
Dodano literał obiektu Icon
w wersji 3.10 i zastępuje
MarkerImage
od wersji 3.11.
Literały obiektów Icon
obsługują te same parametry co
MarkerImage
, która umożliwia łatwą konwersję
MarkerImage
na Icon
, usuwając
konstruktora, umieszczając poprzednie parametry w parametrach {}
oraz
dodając nazwy poszczególnych parametrów. Na przykład:
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));
zmienia się w
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) };
Optymalizuj znaczniki
Optymalizacja zwiększa wydajność przez renderowanie wielu znaczników jako jednego statycznego. Jest to przydatne w przypadku, gdy Domyślnie interfejs Maps JavaScript API określi, czy znacznik będzie zoptymalizowany. Gdy występuje duża liczba za pomocą tagów, interfejs Maps JavaScript API spróbuje wyświetlić z optymalizacją. Nie wszystkie znaczniki można zoptymalizować. w niektórych w pewnych sytuacjach interfejs Maps JavaScript API może wymagać renderowania Znaczniki bez optymalizacji. Wyłącz zoptymalizowane renderowanie reklam animowanych GIF lub PNG albo gdy każdy znacznik musi być renderowany jako osobny element DOM. . Poniższy przykład pokazuje tworzenie znacznika zoptymalizowanego:
var marker = new google.maps.Marker({ position: myLatlng, title:"Hello World!", optimized: true });
Ustawianie znacznika jako dostępnego
Aby znacznik był dostępny, dodaj zdarzenie detektora kliknięć.
ustawiam wartość false
w polu optimized
. Detektor kliknięć
sprawia, że znacznik ma semantykę przycisku, do której można uzyskać dostęp
nawigację za pomocą klawiatury, czytniki ekranu itd. Użyj
Opcja title
wyświetlająca dostępny tekst do znacznika.
W poniższym przykładzie pierwszy znacznik zostanie zaznaczony, gdy klawisz Tab jest naciśnięto; możesz używać klawiszy strzałek do poruszania się między znacznikami. Naciśnij aby kontynuować poruszanie się po pozostałych elementach sterujących mapy. Jeśli ma okno informacyjne, możesz je otworzyć, klikając znacznik lub naciskając klawisz Enter lub spację po zaznaczeniu znacznika. Gdy okno informacyjne zostanie zamknięte, zaznaczenie powróci do powiązanego znacznika.
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;
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;
Zobacz próbkę
Animuj znacznik
Można animować znaczniki tak, aby prezentowały dynamiczny ruch w różnych
w różnych okolicznościach. Aby określić sposób animacji znacznika, użyj funkcji
właściwość animation
znacznika, typu
google.maps.Animation
Poniżej
Obsługiwane wartości Animation
:
-
DROP
oznacza, że znacznik powinien upuścić się z góry do ostatecznego położenia mapy po jej umieszczeniu na mapie. Animacja przestanie, gdy znacznik będzie w miejscu spoczynku, aanimation
Przywróć:null
. Ten typ animacji jest zwykle określony podczas tworzeniaMarker
. -
BOUNCE
oznacza, że znacznik powinien się odbić na swoim miejscu. O znacznik odsyłania będzie odsyłał do momentu Właściwośćanimation
jest ustawiona bezpośrednio nanull
.
Można zainicjować animację na istniejącym znaczniku, wywołując
setAnimation()
na obiekcie 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;
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;
Zobacz próbkę
Jeśli mają Państwo wiele znaczników, można nie chcieć umieszczać ich na mapie
za jednym razem. Możesz użyć funkcji setTimeout()
do przechowywania
markery na podstawie poniższego wzoru:
function drop() { for (var i =0; i < markerArray.length; i++) { setTimeout(function() { addMarkerMethod(); }, i * 200); } }
Ustawianie znacznika z możliwością przeciągania
Aby umożliwić użytkownikom przeciąganie znacznika do innej lokalizacji na mapie, ustaw
draggable
do true
w opcjach znaczników.
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!" });
Dalsze dostosowywanie znaczników
Aby uzyskać w pełni dostosowaną znacznik, zobacz przykład niestandardowego wyskakującego okienka.
Więcej informacji o klasie znaczników, grupowaniu znaczników i zarządzaniu nimi oraz dostosowywaniu nakładki znajdziesz w artykule biblioteki open source.