Inleiding

Een markering geeft een locatie op een kaart aan. Standaard gebruikt een marker een standaardafbeelding. Markeringen kunnen aangepaste afbeeldingen weergeven, in welk geval ze meestal “pictogrammen” worden genoemd. Markeringen en pictogrammen zijn objecten van het type Marker. U kunt een aangepast pictogram instellen in de constructor van de marker, of door setIcon() op de marker aan te roepen. Zie hieronder meer over het aanpassen van de afbeelding van de marker.

In grote lijnen zijn markeringen een soort overlay. Zie Tekenen op de kaart voor informatie over andere soorten overlay.

Markeringen zijn ontworpen om interactief te zijn. Ze ontvangen bijvoorbeeld standaard "click" gebeurtenissen, zodat u een gebeurtenislistener kunt toevoegen om een informatievenster te openen met aangepaste informatie. U kunt gebruikers toestaan een markering op de kaart te verplaatsen door de markering “s draggable eigenschap naar true. Zie hieronder voor meer informatie over versleepbare markeringen.

Voeg een markering toe

De google.maps.Marker constructor neemt een enkele Marker options object letterlijk, waarbij de initiële eigenschappen van de markering worden gespecificeerd.

De volgende velden zijn bijzonder belangrijk en worden vaak ingesteld bij het construeren van een markering:

• position (verplicht) specificeert een LatLng die de initiële locatie van de markering aangeeft. Een manier om een LatLng op te halen is door de Geocoding-service te gebruiken.
• map (optioneel) specificeert de Map waarop de markering moet worden geplaatst. Als u de kaart niet specificeert bij de constructie van de markering, wordt de markering gemaakt maar niet toegevoegd aan (of weergegeven op) de kaart. U kunt de markering later toevoegen door de markering “s setMap() methode.

Het volgende voorbeeld voegt een eenvoudige markering toe aan een kaart in Uluru, in het midden van Australië:

In het bovenstaande voorbeeld is de markering op de kaart geplaatst bij de constructie van de markering met behulp van de eigenschap map in de markeringsopties. U kunt de markering ook rechtstreeks aan de kaart toevoegen door de markering “s setMap() methode, zoals getoond in het onderstaande voorbeeld:

De markering “s title verschijnt als knopinfo.

Als u geen Marker options in de constructor van de marker wilt doorgeven, geef dan in plaats daarvan een leeg object {} door in de laatste argument van de constructor.

Voorbeeld bekijken

Een markering verwijderen

Om een markering van de kaart te verwijderen, roept u de setMap() methode die null doorgeeft als het argument.

marker.setMap(null);

Merk op dat het bovenstaande methode verwijdert de markering niet. Het verwijdert de markering van de kaart. Als u in plaats daarvan de markering wilt verwijderen, moet u deze van de kaart verwijderen en vervolgens de markering zelf instellen op null.

Als u een set markeringen, moet u een array maken om de markeringen vast te houden. Met behulp van deze array kunt u vervolgens setMap() op elke markering in de array aanroepen wanneer u de markeringen moet verwijderen. U kunt de markeringen verwijderen door ze van de kaart te verwijderen en vervolgens de array “s length in te stellen op 0, waardoor alle verwijzingen naar de markeringen.

Voorbeeld bekijken

Een markering animeren

U kunt markeringen animeren zodat ze dynamische bewegingen vertonen in verschillende omstandigheden. Om de manier te specificeren waarop een markering marker is geanimeerd, gebruik dan de marker “s animation eigenschap, van het type google.maps.Animation. De volgende Animation -waarden worden ondersteund:

• DROP geeft aan dat de markering van de bovenkant van de kaart naar de uiteindelijke locatie toen deze voor het eerst op de kaart werd geplaatst. De animatie stopt zodra de markering tot stilstand is gekomen en animation zal terugkeren naar null. Dit type animatie wordt meestal gespecificeerd tijdens het maken van de Marker.
• BOUNCE geeft aan dat de markering moet terugveren plaats. Een stuiterende markering blijft stuiteren totdat de eigenschap animation expliciet is ingesteld op null.

Jij kan een animatie starten op een bestaande markering door setAnimation() aan te roepen op het Marker -object.

Als je veel markeringen hebt , wilt u ze misschien niet allemaal tegelijk op de kaart neerzetten. U kunt setTimeout() gebruiken om uw markeringen “-animaties te spreiden met een patroon zoals hieronder weergegeven:

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

Bekijk voorbeeld

Pas een markeringsafbeelding aan

Als u een letter of cijfer op een markering wilt weergeven, kunt u een markeringslabel gebruiken.Als u meer aanpassingen nodig heeft, kunt u een pictogram definiëren om weer te geven in plaats van de standaardmarkeringsafbeelding. Het definiëren van een pictogram omvat het instellen van een aantal eigenschappen die het visuele gedrag van de markering bepalen.

In de onderstaande secties worden markeringslabels, eenvoudige pictogrammen, complexe pictogrammen en symbolen (vectorpictogrammen) beschreven.

Markeringslabels

Een markeringslabel is een letter of cijfer dat in een markering verschijnt. De markeringsafbeelding in deze sectie toont een markeringslabel met de letter “B” erop. U kunt een markeringslabel specificeren als een tekenreeks of een MarkerLabel -object dat een tekenreeks en andere labeleigenschappen bevat.

Wanneer u een markering maakt, kunt u een label eigenschap in het MarkerOptions object. U kunt ook setLabel() op het Marker-object aanroepen om het label op een bestaande marker te plaatsen.

In het volgende voorbeeld worden gelabelde markeringen weergegeven wanneer de gebruiker op de kaart klikt :

Eenvoudige pictogrammen

In het meest eenvoudige geval kan een pictogram een afbeelding aangeven die moet worden gebruikt in plaats van het standaard Google Maps-punaise-pictogram. Om een dergelijk pictogram te specificeren, stelt u de eigenschap marker “s icon in op de URL van een afbeelding. De Maps JavaScript API past de grootte van het pictogram automatisch aan.

Complexe pictogrammen

Misschien wilt u complexe vormen specificeren om gebieden aan te duiden waarop kan worden geklikt, en specificeren hoe de pictogrammen moeten verschijnen ten opzichte van andere overlays (hun “stapelvolgorde”). Pictogrammen die op deze manier worden gespecificeerd, moeten hun icon eigenschappen naar een object van het type Icon.

Icon objecten definiëren een afbeelding. Ze definiëren ook de size van het pictogram, de origin van het pictogram (als de gewenste afbeelding deel uitmaakt van een grotere afbeelding in een sprite, bijvoorbeeld), en de anchor waar de hotspot van het pictogram zou moeten staan (die is gebaseerd op de oorsprong).

Als je een label met een aangepaste markering gebruiken, kunt u het label plaatsen met de eigenschap labelOrigin in de object.

MarkerImage objecten converteren naar Icon

Tot versie 3.10 van de Maps JavaScript API werden complexe pictogrammen gedefinieerd als MarkerImage -objecten. Het Icon -object letterlijk is toegevoegd in versie 3.10 en vervangt MarkerImage vanaf versie 3.11. Icon objectliteralen ondersteunen dezelfde parameters als MarkerImage, waardoor u gemakkelijk een MarkerImage kunt converteren naar een Icon door de constructor te verwijderen, de vorige parameters in {} “s te plaatsen en de namen van elke parameter toe te voegen. Bijvoorbeeld:

wordt

Symbolen

Naast rasterafbeeldingen ondersteunt een markering de weergave van vectorpaden genaamd Symbols . Om een vectorpad weer te geven, geeft u een Symbol -object letterlijk met het gewenste pad door aan de markering “s icon -eigenschap. U kunt een van de vooraf gedefinieerde paden in google.maps.SymbolPath gebruiken of een aangepast pad definiëren met SVG-padnotatie.

Zie de documentatie voor symbolen voor meer informatie.

Maak een marker versleepbaar

Om gebruikers toe te staan een marker naar een andere locatie op de kaart te slepen, stelt u draggable in op true in de markeringsopties.

Verdere aanpassing van markeringen

Voor een volledig aangepaste markering, zie het aangepaste pop-upvoorbeeld.