﻿function initializeMap() {
	var myOptions = {
		zoom: 7,
		center: new google.maps.LatLng(48.669026, 19.699024),
		mapTypeControl: true,
		mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
		navigationControl: true,
		navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
		mapTypeId: google.maps.MapTypeId.TERRAIN
	}
	var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

	setMarkers(map, klimex);
}

/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * other.
 */

var klimex = [
	['Klimex Trnava', 48.360406, 17.602500, 4, './kontakty/detail/trnava'],
	['Klimex Trenčín', 48.892396,18.064634, 6, './kontakty/detail/trencin'],
	['Klimex Brno', 49.173093,16.529991, 7, './kontakty/detail/brno']
];

function setMarkers(map, locations) {
  // Add 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 = new google.maps.MarkerImage('img/blue-dot.png',
	  // This marker is 20 pixels wide by 32 pixels tall.
	  new google.maps.Size(32, 32),
	  // The origin for this image is 0,0.
	  new google.maps.Point(0,0),
	  // The anchor for this image is the base of the flagpole at 0,32.
	  new google.maps.Point(11, 32));
  var shadow = new google.maps.MarkerImage('img/blue-dot_shadow.png',
	  // The shadow image is larger in the horizontal dimension
	  // while the position and offset are the same as for the main image.
	  new google.maps.Size(32, 32),
	  new google.maps.Point(0,0),
	  new google.maps.Point(11, 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 = {
	  coord: [1, 1, 1, 20, 18, 20, 18 , 1],
	  type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
	var klimex = locations[i];
	var myLatLng = new google.maps.LatLng(klimex[1], klimex[2]);
	var marker = new google.maps.Marker({
		position: myLatLng,
		url: klimex[4],
		map: map,
		shadow: shadow,
		icon: image,
		shape: shape,
		title: klimex[0],
		zIndex: klimex[3]
	});
	google.maps.event.addListener(marker, 'click', function() {
		window.location.href = this.url;
	});
  }
}
