Google Maps API V3: InfoWindows

In de vorige tutorial hebben we gekeken hoe we markers kunnen maken. En we hebben een functie gemaakt. Vandaag gaan we hier verder op in. We gaan nu geen nieuwe markers meer toevoegen, maar kijken naar tooltips voor markers en hoe we die in onze vorige functie kunnen invoegen.

InfoWindows

Wat op Google Maps kaarten vaak gebruikt wordt zijn de tooltips die tevoorschijn komen als je op een marker klikt. Hierin staat vaak wat informatie. We kunnen dit met de functie InfoWindow maken.

Maar voordat we dit kunnen doen gaan we eerst kijken naar hoe je events regelt in de API. Hoe we bijv. kunnen zeggen wanneer ergens op geklikt wordt. Dit wordt gedaan met de class event en de functie addListener. Dit klinkt waarschijnlijk moeilijk dus laten we een voorbeeldje geven:

var positieMarker = new google.maps.LatLng(52.2654,5.2165);
var markerMap = new google.maps.Marker({
  position: positieMarker,
  map: map,
  title: 'Dit is een marker met een event!'
});

google.maps.event.addListener(markerMap, 'click', function() {
  map.setCenter(positieMarker);
});

De eerste 6 regels komen je waarschijnlijk bekent voor. Hier maken we namelijk een marker aan.
De volgende regels geven ons event aan. We zien dat de functie event.AddListener wordt aangeroepen.

Vervolgens vullen we daar een paar dingen in:
– De variabele van de marker waar we een event aan toe willen voegen
– Het event. Dit kan click, dblclick, mouseup, mousedown, mouseover en mouseout zijn.
– De functie die uitgevoerd moet worden.
In die functie zien we dat we de kaart gaan centreren op de positie van de Marker.

Nu we de events begrijpen kunnen we beginnen met de infowindows. Laten we eerst de content van de infowindow in een var zetten:

var contentInfowindow = '

Hier de titel

Hier de content. Met wat leuke tekst erin ';

Dit kan je zelf helemaal opmaken en je eigen tags gebruiken. Want we voegen dit toe aan een lege div die op de pagina gemaakt wordt.

Nu de content gemaakt is gaan we een infowindow maken:

var infoWindow = new google.maps.InfoWindow({
  content: contentInfowindow
});

We zien dat we nu alleen nog maar de content hebben toegevoegd. Het is verstandig om de infowindow ook een max-width te geven (anders wordt hij heel lang). Je kan ook aangeven dat de infoWindow vooraan moet komen of achter een andere.

Als we dit allemaal toevoegen ziet het er zo uit:

var infoWindow = new google.maps.InfoWindow({
  content: contentInfowindow,
  maxWidth: 200,
  zIndex: 2
});

Nu gaan we met de events dit window openen. Dat doe je met de functie open. Hierin moet je 2 dingen zetten:
– In welke map hij geopend moet worden
– Bij welke marker hij moet staan
De code ziet er in ons geval zo uit:

google.maps.event.addListener(markerMap, 'click', function() {

  infoWindow.open(map, markerMap);

});

We zien dat we nu een infoWindow krijgen bij de markerMap die wie toenet hebben aangemaakt.

In de functie

We hebben in de vorige tutorial een functie aangemaakt voor het maken van markers. Het is natuurlijk veel beter om dit daar te gaan gebruiken. Laten we eerst de functie weer ophalen:

function addMarker(positieMarker, titleMarker) {

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

}

We zien dat we in de functie een var marker aanmaken. We kunnen dus heel simpel die gebruiken in ons event.

Verder kunnen we door nog een parameter aan de functie toe te voegen ook nog een infowindow laten zien. De code voor de functie wordt dan:

function addMarker(positieMarker, titleMarker, windowMarker) {

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

  google.maps.event.addListener(marker, 'click', function() {
    windowMarker.open(map, marker);
  });

}

Hiermee moeten we nog een var aanmaken in onze andere functie. Dit is weer een array en daarin zetten we de infowindows:

var infowindowMarkers = [
  new google.maps.InfoWindow({ content: '

Utrecht

Welkom in Utrecht! ', maxWidth: 300 }), new google.maps.InfoWindow({ content: '

Soest

Welkom in Soest! ', maxWidth: 300 }), new google.maps.InfoWindow({ content: '

Amersfoort

Welkom in Amersfoort! ', maxWidth: 300 }), new google.maps.InfoWindow({ content: '

Huizen

Welkom in Huizen! ', maxWidth: 300 }), new google.maps.InfoWindow({ content: '

Naarden

Welkom in Naarden! ', maxWidth: 300 }), new google.maps.InfoWindow({ content: '

Woudenberg

Welkom in Woudenberg! ', maxWidth: 300 }) ];

Nu voegen we in onze for loop nog de parameter in de var in:

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

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

}

De totale code:

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)
];

var infowindowMarkers = [
  new google.maps.InfoWindow({ content: '

Utrecht

Welkom in Utrecht! ', maxWidth: 300 }), new google.maps.InfoWindow({ content: '

Soest

Welkom in Soest! ', maxWidth: 300 }), new google.maps.InfoWindow({ content: '

Amersfoort

Welkom in Amersfoort! ', maxWidth: 300 }), new google.maps.InfoWindow({ content: '

Huizen

Welkom in Huizen! ', maxWidth: 300 }), new google.maps.InfoWindow({ content: '

Naarden

Welkom in Naarden! ', maxWidth: 300 }), new google.maps.InfoWindow({ content: '

Woudenberg

Welkom in Woudenberg! ', maxWidth: 300 }) ]; for(var i = 0; i < positionMarkers.length; i++) { addMarker(positionMarkers[i], 'Dit is marker nummer: ' + i, infowindowMarkers[i]); } function addMarker(positieMarker, titleMarker, windowMarker) { var marker = new google.maps.Marker({ position: positieMarker, map: map, title: titleMarker }); google.maps.event.addListener(marker, 'click', function() { windowMarker.open(map, marker); }); }

En een werkend voorbeeld.

 
Vond je dit een interessant artikel?
Wil je op de hoogte gehouden worden als er weer een nieuw artikel verschijnt?
Meld je dan aan »

Deze bijdrage was gepubliceerd in Overige.

2 gedachten over “Google Maps API V3: InfoWindows

  1. Pingback: Google Maps API V3: Lijnen en vakken

  2. Pingback: Google Maps API V3: Extra aanpassingen

Geef een reactie

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