Hoe een nummer te gebruiken in plaats van een letter in Google Custom Marker

Google Maps-markeringen markeren specifieke sites op een kaart. Standaard identificeert Google een afzonderlijke markering met een vierkant en meerdere markeringen met letters, maar dit is mogelijk niet geschikt voor sommige toepassingen. Als uw bedrijf bijvoorbeeld naar vestigingen verwijst als sites 1, 2 en 3, identificeren genummerde markeringen ze beter dan brieven. Gebruik aangepaste markeringen in uw programma om uw eigen labels voor kaartlocaties te ontwerpen. Deze markeringen gebruiken aangepaste pictogrammen, die u kunt coderen met de Google Charts API.

1.

Open de broncode van je programma met een Java-ontwikkelprogramma zoals Eclipse.

2.

Ga naar de functie "Initialiseren". Dit codeblok definieert uw kaart en definieert er opties voor. De code kan bijvoorbeeld lezen:

functie initialize () {

var coordinates = new google.maps.LatLng (42.346429, -71.097186);

var myOptions = {

zoom: 4,

midden: coördinaten,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

var ourHeadquarters = new google.maps.Map (document.getElementById ("map_canvas"), myOptions);

}

3.

Voeg een nieuwe regel toe die de breedtegraad en lengtegraad van uw marker definieert. Als uw markering bijvoorbeeld een breedtegraad van 42.349093 en een lengtegraad van -71.101971 moet bepalen, voegt u de volgende regel toe:

var markerCoordinates = new google.maps.LatLng (42.349093, -71.101971);

4.

Voeg het volgende blok toe om uw marker te maken:

var marker = new google.maps.Marker ({

positie: markerCoordinates,

kaart: ourHeadquarters,

});

Vervang "markerCoordinates" door de variabele die u in de vorige stap hebt gemaakt en vervang "ourHeadquarters" door de variabele die aan uw kaart is gekoppeld.

5.

Voeg de volgende regel toe binnen het markeringsblok om een ​​pictogram voor de markering te maken:

icoon: '// chart.apis.google.com/chartchst=d_map_pin_letter&chld=A|FF0000|000000'

6.

Vervang "A" in de regel door een cijfer. Vervang deze bijvoorbeeld door "1" en verander de regel in:

icoon: '// chart.apis.google.com/chartchst=d_map_pin_letter&chld=1|FF0000|999999'

7.

Wijzig "FF0000" in de HTML hexadecimale code van de achtergrond van de markering. Als u bijvoorbeeld de achtergrondkleur wilt instellen op geel, waarbij de code 'FFFF00' wordt gebruikt, vervangt u de code door 'FFFF00', waarbij u de regel wijzigt in:

icoon: '// chart.apis.google.com/chartchst=d_map_pin_letter&chld=1|FFFF00|999999'

8.

Wijzig "999999" in de HTML hexadecimale code van de tekst van het markeringsnummer. Als u bijvoorbeeld deze tekst in het zwart wilt schrijven, waarbij de code '000000' wordt gebruikt, vervangt u de code door '000000' en wijzigt u de regel in:

icoon: '// chart.apis.google.com/chartchst=d_map_pin_letter&chld=1|FFFF00|000000'