Google Maps API V3: Lijnen en vakken

Google Maps API V3: Lijnen en vakken

Na 2 keer gekeken te hebben naar markers is handig als we nu wat zien over nog een hele handige functie in de API. De lijnen en vakken van marker naar marker. De vorige artikelen vind je hier en hier.

Lijnen

In Google Maps zie je vaak lijnen van een punt naar een ander punt. Als dit een heel figuur vormt kan je deze lijnen ook opvullen met een kleur. Om te beginnen moeten we een array met bepaalde coördinaten erin hebben:

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

Dit vormt een vierkant. Wat we nu moeten doen is op deze array van punten de Polyline functie laten lopen.

Deze zorgt voor een lijn tussen de punten.

We moeten in deze functie standaard 1 ding zetten: De path van de lijn, kortom onze array. Deze voegen we in bij de functies:

var lijn = new google.maps.Polyline({
  path: coordsLijn
});

We zien nu nog niks gebeuren. Hoe kan dat? Dat komt omdat we nog een map moeten instellen. Dit doen we met de optie map, zoals normaal:

var lijn = new google.maps.Polyline({
  path: coordsLijn,
  map: map
});

Nu we zien we een lijn van punt 1 naar punt 2 naar punt 3 en naar punt 4.
We zien geen vierkant, omdat we in onze array eindigen bij punt 4.

Als we wel een vierkant willen zien dan moeten we op het eind nog een keer de eerste coördinaten herhalen.

Nu ziet deze zwarte lijn er nogal saai uit. We kunnen hem via de opties ook nog opmaken:

var lijn = new google.maps.Polyline({  path: coordsLijn,
  map: map,
  strokeColor: '#FF000',
  strokeWeight: 5,
  strokeOpacity: 0.5
});

We hebben nu de lijn (stroke) opgemaakt, dit kan met de volgende opties:

strokeColor, dit is de kleur van de lijn in HEX waardes (als een string)
strokeWeight, dit is de dikte van een lijn in pixels
strokeOpacity, de doorzichtbaarheid van de lijn

Vlakken

Een vlak maken werkt bijna het zelfde als een lijn maken. Je moet een vlak zien als een figuur van lijnen die gevuld is. Je moet dus ook hier eerst een array maken.

Voor het gemak gebruiken we de zelfde array als we in het begin hebben gemaakt. We hoeven bij een vlak niet het eerste coördinaat nog een keer herhalen, de API zal automatisch het figuur sluiten.

De functie die vlakken maakt heet een Polygon. Deze werkt hetzelfde als de Polyline:

var vlak = new google.maps.Polygon({
  paths: coordsLijn,
  map: map
});

Let goed op dat het bij een Polyline path is en bij een Polygon paths. Zodra we dit opslaan zien we een rechthoek over de kaart die gevuld is met zwart.

Stel dat we nu dit willen stijlen, dan kunnen we veel dingen instellen.

Zoals ik eerde al aangaf kun je een Polygon zien als een Polyline met een gevuld gat erin.

Zo kunnen we de line ook weer stijlen met de stroke opties. Voor de opvul kleur kunnen we kijken naar de fill opties:

var vlak = new google.maps.Polygon({
  paths: coordsLijn,
  map: map,
  strokeColor: '#F00',
  strokeWeight: 2,
  strokeOpacity: 0.8,
  fillColor: '#282',
  fillOpacity: 0.5
});

Nu zien we een rode lijn van 2 px breed en een vulkleur van groen die 50% transparant is.

De totale code:

var coordsLijn = [
  new google.maps.LatLng(52.28958, 5.19524),
  new google.maps.LatLng(52.28958, 5.39524),
  new google.maps.LatLng(52.08958, 5.39524),
  new google.maps.LatLng(52.08958, 5.19524),
];
var lijn = new google.maps.Polyline({
  path: coordsLijn,
  map: map,
  strokeColor: '#FF0000',
  strokeWeight: 5,
  strokeOpacity: 0.5
});

var vlak = new google.maps.Polygon({
  paths: coordsLijn,
  map: map,
  strokeColor: '#F00',
  strokeWeight: 2,
  strokeOpacity: 0.8,
  fillColor: '#282',
  fillOpacity: 0.5
});

Het voorbeeld

          Leuk als je dit artikel deelt:
Share

Eén gedachte over “Google Maps API V3: Lijnen en vakken

Geef een reactie

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