var map;
        function initialize() {
          var mapOptions = {
            zoom: 9,
            center: new google.maps.LatLng(50.612103, 4.445620),
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          
          map = new google.maps.Map(document.getElementById('map-canvas'),
              mapOptions);
            setMarkers(map);
        }
var beaches = [
['Anderlecht - Bruxelles',50.8172771,4.2871101,1],['Charleroi',50.4131931,4.4348048,2],['Châtelineau - Châtelet',50.405443,4.498045,3],['Mons',50.464388,3.937424,4],['Wierde - Namur',50.437370,4.912115,5]];

function setMarkers(map) {
  // Adds markers to the map.

  // Marker sizes are expressed as a Size of X,Y where the origin of the image
  // (0,0) is located in the top left of the image.

  // Origins, anchor positions and coordinates of the marker increase in the X
  // direction to the right and in the Y direction down.
  var image = {
    url: 'images/marker.png',
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(25, 35),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(0, 32)
  };
  // Shapes define the clickable region of the icon. The type defines an HTML
  // <area> element 'poly' which traces out a polygon as a series of X,Y points.
  // The final coordinate closes the poly by connecting to the first coordinate.
  var shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: 'poly'
  };
  for (var i = 0; i < beaches.length; i++) {
    var beach = beaches[i];
    var marker = new google.maps.Marker({
      position: {lat: beach[1], lng: beach[2]},
      map: map,
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3]
    });
  }
}
google.maps.event.addDomListener(window, 'load', initialize);