var beaches = [

  ['Herlev', 55.713768, 12.4297, 4],

  ['Århus', 56.152658, 10.19502, 5],

  ['Middelfart', 55.50341, 9.698956, 3],

  ['Ballerup', 55.732605, 12.390445, 2],

  ['Høve', 55.840621, 11.490212, 1]

];

	var latlng = new google.maps.LatLng(55.713768, 12.4297);

var markerArray = new Array();



function initialize() {

	var myOptions = {

	  zoom: 6,

	  center: latlng,

	  navigationControl: true,

	  scaleControl: false,

	  mapTypeControl: false,

		size:(475,414,"px","px"),

	  	backgroundColor: "ffffff",

	  mapTypeId: google.maps.MapTypeId.ROADMAP

	};

	//var map = new GMap2(document.getElementById("map_canvas")); 

	var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

	

	//var map = new google.maps.Map(document.getElementById("map_canvas"),{size:(475,414,"px","px")}); 

	

	setMarkers(map, beaches);

}



function setMarkers(map, locations) {



  var image = new google.maps.MarkerImage('../../images/beachflag.png',

      // This marker is 20 pixels wide by 32 pixels tall.

      new google.maps.Size(32, 40),

      // 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(16, 40));

  var shadow = new google.maps.MarkerImage('../../images/beachflag_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(51, 36),

      new google.maps.Point(0,0),

      new google.maps.Point(10, 42));

      // 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 beach = locations[i];

    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);

    var marker = new google.maps.Marker({

        position: myLatLng,

        map: map,

        shadow: shadow,

        icon: image,

        title: beach[0],

        zIndex: beach[3]

    });

	markerArray.push(marker);

	

    marker.pnum=i;	

	//alert(marker.pnum);

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

	 //alert(this)

		map.setZoom(15);

		var newCenter = new google.maps.LatLng(beaches[this.pnum][1], beaches[this.pnum][2]);

		map.setCenter(newCenter);

	 });  	

  }

	$(document).ready(function() {

		$("a.shoplink").click(function() {

			var index = $("a.shoplink").index(this);

			map.setZoom(15);

			var newCenter = new google.maps.LatLng(beaches[index][1], beaches[index][2]);

			map.setCenter(newCenter);

			

		});

	});     

}