Google Maps API V3: Markers

Google Maps API V3: Markers

Enige tijd geleden heb ik een eerste artikel geplaatst van Wouter de Jong (Waldio), door omstandigheden en de vakantie heb ik verzuimd het vervolg te plaatsen, mijn excuses daarvoor, ook naar Wouter. De komende dinsdagen in de herkansing de artikelen van Wouter. Het eerste artikel ging over het ‘krijgen van de kaart’.

In de vorige tutorial hebben we een kaart aangemaakt. Maar aan alleen een kaart heb je niet zo heel veel. Daarom leren we in de 2e tutorial van deze reeks hoe we een marker aanmaken. Ook kijken we hoe we de code wat kunnen vereenvoudigen en hoe we meerdere markers aanmaken.

Een marker maken

Een marker moet een bepaalde plaats krijgen. Dus ook hier hebben we weer coördinaten nodig. Je kan hiervoor ook de coördinaten gebruiken van centerMap maar nu zal ik een andere aanmaken:

var positionMarker = new google.maps.LatLng(52.28958, 5.39524);

In de functie Marker moeten we standaard een paar opties verwerken:
– position = De positie van de marker op de kaart
– map = de variabele waarin de google.maps.Map in is verwerkt
De code zal er dus nu zo uitzien:

 var marker = new google.maps.Marker({
  position: positionMarker,
  map: map
});

Als we nu dit opslaan en we bekijken de kaart zien we keurig een marker op de kaart verschijnen.

Nu wil ik het nog hebben over 1 veelgebruikte optie bij markers: title. Dit wordt aan de marker toegevoegd als een title attribuut. Als je er met je muis overheen gaat zie je dus deze title. Laten we deze ook in de code hierboven toevoegen:

var marker = new google.maps.Marker({
  position: positionMarker,
  map: map,
  title: 'De polder in Flevoland'
});

Een functie aanmaken voor een marker

Om het aanmaken van een maker te vereenvoudigen maken we een functie die dat doet. Laten we beginnen met de bovenstaande code in een functie te stoppen:

function addMarker() {

  var marker = new google.maps.Marker({
    position: positionMarker,
    map: map,
    title: 'De polder in Flevoland'
  });

}

Nu willen we een paar dingen aanpasbaar maken: De positie en de title. Deze gaan we dus als variabele aan de functie meegeven en toevoegen op de goede plaats:

function addMarker(positieMarker, titleMarker) {

  var marker = new google.maps.Marker({
    position: positieMarker,
    map: map,
    title: titleMarker
  });

}

Laten we nu deze functie aanroepen in de getMap functie:

addMarker(positionMarker, 'De polder in Flevoland!');

Als we dit nu opslaan zien we niks. Hoe komt dat? Dat komt omdat we de var map alleen binnen de functie getMap hebben staan, hierdoor kan de functie addMarker niet bij de var map. Om dit op te lossen gaan we de var map buiten de functie declareren. Nu moeten we er wel op letten dat we geen var map = new google.maps.Map meer gebruiken, maar dat we die var weglaten. De variabele is immers al gedeclareerd:

var map;
function getMap() {
  // De code
  map = new google.maps.Map(document.getElementById('map'), optionMap);
}
function addMarker(positieMarker, titleMarker) {

  var marker = new google.maps.Marker({
    position: positieMarker,
    map: map,
    title: titleMarker
  });

}

Nu zullen we zien dat dit wel werkt.

Meerdere markers

Nu we een aparte functie hebben kunnen we automatisch meerdere markers laten maken. Dit doen we door de coördinaten in een array te zetten:

var positionMarkers = [
  new google.maps.LatLng(52.08958, 5.19524),
  new google.maps.LatLng(52.18958, 5.29524),
  new google.maps.LatLng(52.28958, 5.39524),
  new google.maps.LatLng(52.18958, 5.39524),
  new google.maps.LatLng(52.28958, 5.29524),
  new google.maps.LatLng(52.28958, 5.19524)
];

Nu we dit gedaan hebben kunnen we de array doorlopen en toevoegen aan de functie door middel van een for loop:

for(var i = 0; i < positionMarkers.length; i++) {

  addMarker(positionMarkers[i], 'Dit is marker nummer: ' + i);

}

Een uitleg van wat hier staan:
We beginnen met een waarde 0 van i. En zodra i kleiner is dan de grote van positionMarkers voeren we de code uit en tellen we er 1 bij i op.
Door positionMarkers[i] pakken we de hele tijd een coördinaat uit de array en voegen die in onze pas gemaakte functie. De titel geven we hier door middel van de tekst: ‘Dit is marker nummer’ en dan voegen we er de waarde van i bij.
Als we deze code gaan testen zien we dat er 6 markers op de kaart komen met de titels 0 t/m 5.

De code van deze tutorial:

var map;
function getMap() {
	
	var centerMap = new google.maps.LatLng(52.18958, 5.29524);
	var optionMap = {
	  center: centerMap,
	  zoom: 9,
	  MapTypeId: google.maps.MapTypeId.ROADMAP
	};
	
	map = new google.maps.Map(document.getElementById('map'), optionMap);
	
	var positionMarker = new google.maps.LatLng(52.28958, 5.39524);
	
	addMarker(positionMarker, 'De polder in Flevoland!');
	
	var positionMarkers = [
	  new google.maps.LatLng(52.08958, 5.19524),
	  new google.maps.LatLng(52.18958, 5.29524),
	  new google.maps.LatLng(52.18958, 5.39524),
	  new google.maps.LatLng(52.28958, 5.29524),
	  new google.maps.LatLng(52.28958, 5.19524),
	  new google.maps.LatLng(52.08958, 5.39524)
	];
	
	for(var i = 0; i < positionMarkers.length; i++) {

	  addMarker(positionMarkers[i], 'Dit is marker nummer: ' + i);
	
	}

	
}
function addMarker(positieMarker, titleMarker) {

  var marker = new google.maps.Marker({
    position: positieMarker,
    map: map,
    title: titleMarker
  });

}

Een werkend voorbeeld vind je hier.

          Leuk als je dit artikel deelt:
Share

3 gedachten over “Google Maps API V3: Markers

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *