var beaches = [

 

  ['Udstilling Herlev', 55.716006, 12.429050, 4],



  ['Århus', 56.151922, 10.198667, 3],



  ['Middelfart', 55.50341, 9.698956, 4],



  ['Ballerup', 55.732605, 12.390445, 3],



  ['Høve', 55.840621, 11.490212, 2],
  
   ['Vareudlevering Herlev', 55.713140, 12.426341, 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);



			



		});



	});     



}