googleMap = true;

var map;
var baseIcon;
var gmarkers = [];
var htmls = [];
function ShowMap(){
	var bounds = new GLatLngBounds();

	map = new GMap2(document.getElementById("map"));
	map.setCenter(new GLatLng(41.3969,2.156582), 13);
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());

	baseIcon = new GIcon();
	baseIcon.image = "../Images/Markers/marker.png";
	baseIcon.shadow = "../Images/Markers/shadow50.png";
	baseIcon.iconSize = new GSize(20, 34);
	baseIcon.shadowSize = new GSize(37, 34);
	baseIcon.iconAnchor = new GPoint(9, 34);
	baseIcon.infoWindowAnchor = new GPoint(9, 2);
	baseIcon.infoShadowAnchor = new GPoint(18, 25);

	var icon = new GIcon(baseIcon);
	var point = new GLatLng(41.403564,2.174376);
	bounds.extend(point);
	var marker = createMarker(point, "Sagrada Familia", "<p style='font-size: smaller; padding: 0; margin: 0;'><b>Sagrada Familia</b><br/>Giant Temple designed by the<br/>master architect Antonio Gaudi.</p>", 1);
	gmarkers[0] = marker;
	htmls[0] = "<p style='font-size: smaller; padding: 0; margin: 0;'><b>Sagrada Familia</b><br />Giant Temple designed by the<br />master architect Antonio Gaudi.</p>";
	map.addOverlay(marker);

	var icon = new GIcon(baseIcon);
	var point = new GLatLng(41.37647,2.184176);
	bounds.extend(point);
	var marker = createMarker(point, "L' Aquarium de Barcelona", "<p style='font-size: smaller; padding: 0; margin: 0;'><b>L' Aquarium de Barcelona </b><br>The largest aquarium in Europe,<br/>Port Vell, Barcelona Port Area.</p>", 2);
	gmarkers[1] = marker;
	htmls[1] = "<p style='font-size: smaller; padding: 0; margin: 0;'><b>L' Aquarium de Barcelona </b><br>The largest aquarium in Europe,<br/>Port Vell, Barcelona Port Area.</p>";
	map.addOverlay(marker);

	var icon = new GIcon(baseIcon);
	var point = new GLatLng(41.380737,2.173748);
	bounds.extend(point);
	var marker = createMarker(point, "La Rambla", "<p style='font-size: smaller; padding: 0; margin: 0;'><b>La Rambla, </b><br>Central Boulevard which cuts through<br/>the heart of the city, a vibrant and lively<br/>promenade with attractions and various<br/>sights of interest.", 3);
	gmarkers[2] = marker;
	htmls[2] = "<p style='font-size: smaller; padding: 0; margin: 0;'><b>La Rambla, </b><br>Central Boulevard which cuts through<br/>the heart of the city, a vibrant and lively<br/>promenade with attractions and various<br/>sights of interest.";
	map.addOverlay(marker);

	var icon = new GIcon(baseIcon);
	var point = new GLatLng(41.385149,2.180829);
	bounds.extend(point);
	var marker = createMarker(point, "Museu Picasso", "<p style='font-size: smaller; padding: 0; margin: 0;'><b>Museu Picasso</b><br>Popular art gallery housing Picasso's<br/>paintings in chronological order.", 4);
	gmarkers[3] = marker;
	htmls[3] = "<p style='font-size: smaller; padding: 0; margin: 0;'><b>Museu Picasso</b><br>Popular art gallery housing Picasso's<br/>paintings in chronological order.";
	map.addOverlay(marker);

	var icon = new GIcon(baseIcon);
	var point = new GLatLng(41.380383,2.121563);
	bounds.extend(point);
	var marker = createMarker(point, "Estadio Nou Camp", "<p style='font-size: smaller; padding: 0; margin: 0;'><b>Estadio Nou Camp</b><br>Barcelona FC's famous stadium &<br/>home of the Barcelona FC Museum.", 5);
	gmarkers[4] = marker;
	htmls[4] = "<p style='font-size: smaller; padding: 0; margin: 0;'><b>Estadio Nou Camp</b><br>Barcelona FC's famous stadium &<br/>home of the Barcelona FC Museum.";
	map.addOverlay(marker);

	var icon = new GIcon(baseIcon);
	var point = new GLatLng(41.388101,2.187513);
	bounds.extend(point);
	var marker = createMarker(point, "Barcelona Zoo", "<p style='font-size: smaller; padding: 0; margin: 0;'><b>Barcelona Zoo</b><br>Located in the city park (Parc de la Ciutadella)<br/>this is one of the top zoo's in Spain.", 6);
	gmarkers[5] = marker;
	htmls[5] = "<p style='font-size: smaller; padding: 0; margin: 0;'><b>Barcelona Zoo</b><br>Located in the city park (Parc de la Ciutadella)<br/>this is one of the top zoo's in Spain.";
	map.addOverlay(marker);

	var icon = new GIcon(baseIcon);
	var point = new GLatLng(41.367598,2.154114);
	bounds.extend(point);
	var marker = createMarker(point, "Museu Nacional d'Art de Catalunya MNAC", "<p style='font-size: smaller; padding: 0; margin: 0;'><b>Museu Nacional d'Art de Catalunya MNAC</b><br>Museum of Modern Art home to a wide range of<br/>artwork and artefacts and a large collection of<br/>Catalan artwork from the 19th to early 20th century.", 7);
	gmarkers[6] = marker;
	htmls[6] = "<p style='font-size: smaller; padding: 0; margin: 0;'><b>Museu Nacional d'Art de Catalunya MNAC</b><br>Museum of Modern Art home to a wide range of<br/>artwork and artefacts and a large collection of<br/>Catalan artwork from the 19th to early 20th century.";
	map.addOverlay(marker);

	var icon = new GIcon(baseIcon);
	var point = new GLatLng(41.369542,2.148144);
	bounds.extend(point);
	var marker = createMarker(point, "Poble Espanyol de Montjuic", "<p style='font-size: smaller; padding: 0; margin: 0;'><b>Poble Espanyol de Montjuic</b><br>Small Spanish village that replicates the<br/>style of houses and architecture from<br/>different parts of Spain.", 8);
	gmarkers[7] = marker;
	htmls[7] = "<p style='font-size: smaller; padding: 0; margin: 0;'><b>Poble Espanyol de Montjuic</b><br>Small Spanish village that replicates the<br/>style of houses and architecture from<br/>different parts of Spain.";
	map.addOverlay(marker);

	var icon = new GIcon(baseIcon);
	var point = new GLatLng(41.422166,2.118301);
	bounds.extend(point);
	var marker = createMarker(point, "Tibidabo", "<p style='font-size: smaller; padding: 0; margin: 0;'><b>Tibidabo</b><br>Highest hill in the wooded range that forms the<br/>backdrop to Barcelona. Great views & features<br/>an amusement park: (Parc d'Atraccions).", 9);
	gmarkers[8] = marker;
	htmls[8] = "<p style='font-size: smaller; padding: 0; margin: 0;'><b>Tibidabo</b><br>Highest hill in the wooded range that forms the<br/>backdrop to Barcelona. Great views & features<br/>an amusement park (Parc d'Atraccions).";
	map.addOverlay(marker);

	var icon = new GIcon(baseIcon);
	var point = new GLatLng(41.371108,2.151732);
	bounds.extend(point);
	var marker = createMarker(point, "La Font Magica", "<p style='font-size: smaller; padding: 0; margin: 0;'><b>La Font Magica</b><br>The Font Magica was part of a project built for the 1929 Universal Exhibition.<br>The exhibition took place on Montjuic, a hill on the eastern end of Barcelona.<br>During the summer evenings, when the fountain is activated, it attracts hundreds<br>of visitors who watch the approx. 15 minute spectacular display of light, water<br>and music.</p>", 10);
	gmarkers[9] = marker;
	htmls[9] = "<p style='font-size: smaller; padding: 0; margin: 0;'><b>La Font Magica</b><br>The Font Magica was part of a project built for the 1929 Universal Exhibition.<br>The exhibition took place on Montjuic, a hill on the eastern end of Barcelona.<br>During the summer evenings, when the fountain is activated, it attracts hundreds<br>of visitors who watch the approx. 15 minute spectacular display of light, water<br>and music.</p>";
	map.addOverlay(marker);

	//map.setZoom(map.getBoundsZoomLevel(bounds));
	map.savePosition();
}

function createMarker(point, title, text, index){
	var icon = new GIcon(baseIcon);
	icon.image = "../images/icons/" + index + ".png";
	var marker = new GMarker(point, icon);
	marker.title = "" + title + "";
	GEvent.addListener(marker, "click", function() {
	  marker.openInfoWindowHtml("" + text + "");
	});
	return marker;
}

function myclick(i) {
	gmarkers[i].openInfoWindowHtml(htmls[i]);
}