<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs 	title			= "Mi primer Mapplet"
			description		= "Este es mi primer Mapplet desarrollado utilizando el API de Google Maps"
			author		= "Jorge Ivan Meza Martinez"
			author_email	= "jimezam@gmail.com"
			height       		= "200">
	<Require feature="sharedmap" />
</ModulePrefs>
<Content type="html"><![CDATA[

<style type="text/css">

body
{
	background-color: #FCF6A5;
	padding: 15px;
}

/* Títulos del documento */

h1
{
	color: #FF8040;
}

h3
{
	color: #B8D00F;
}

/* Selectores de opciones */

SELECT
{
	background-color: #F2F4FF;
}

#SELECT OPTION
{
	background-color: #F2F4FF;
}

</style>

<script>
	////////////////////////////////////////////////////////

	// Referencia al mapa gráfico //

	var mapa = new GMap2();

	// Selección del tipo de mapa = cartografía normal //

	mapa.setMapType(G_NORMAL_MAP);

	// Hashtable con la información de las ciudades //

	var ciudades = new Array();
	
	ciudades[0] = {
				nombre: 'Armenia',
				departamento: 'Quindio',
				latitud: 4.5338889,
				longitud: -75.6811111,
				url: 'http://www.alcaldiadearmenia.gov.co/',
				descripcion: 'Fundada el 14 de octubre de 1889 su población es de 309361 habitantes.'
			   };
	ciudades[1] = {
				nombre: 'Pereira',
				departamento: 'Risaralda',
				latitud: 4.8133333,
				longitud: -75.6961111,
				url: 'http://www.pereira.gov.co/',
				descripcion: 'Fundada el 30 de agosto de 1863, su población es de 488839 habitantes.'
			   };
	ciudades[2] = {
				nombre: 'Manizales',
				departamento: 'Caldas',
				latitud: 5.07,
				longitud: -75.5205556,
				url: 'http://www.alcaldiamanizales.gov.co/',
				descripcion: 'Fundada el 12 de octubre de 1849, su población es de 368124 habitantes.'
			   };
			   	
	// Ejecutar la función 'iniciar' tan pronto como se haya cargado el Mapplet //			
				
	window.onload = iniciar;
	
	////////////////////////////////////////////////////////

	/* Ejecuta las acciones necesarias para preparar el Mapplet antes de iniciar su ejecución */

	function iniciar()
	{
		////////////////////////////////////////////////////////
		
		// Agrega el elemento 'sin selección' como elemento por defecto inicial //
		
		_gel('SelCiudad').innerHTML = "<option value=''>--- Seleccione una ciudad ---</option>\n";
	
		// Por cada una de las ciudades agrega su respectiva opción //
	
		for(var indice in ciudades)
		{
			var ciudad = ciudades[indice];
			
			_gel('SelCiudad').innerHTML += "<option value='" + ciudad.nombre + "'>" + 
								   ciudad.nombre + " (" + 
								   ciudad.departamento +
								   ")" + "</option>\n";
								   
			// Crea el marcador (GMarker) que representa a cada ciudad //
								   
			ciudades[indice].marca = crearMarca(ciudades[indice]);
			
			// Agrega el marcador de la ciudad al mapa //
			
			mapa.addOverlay(ciudades[indice].marca);			
		}

		////////////////////////////////////////////////////////

		// Obtener la ubicación de la ciudad del medio y establecerla como centro del mapa //

		ciudades[1].marca.getPointAsync(function(ubicacion)
		{
			mapa.setCenter(ubicacion);
			
			// Establecer la altitud de la perspectiva del mapa //
			
			mapa.setZoom(9);
		});
	
		////////////////////////////////////////////////////////
	}

	////////////////////////////////////////////////////////

	/* Crea un marcador basado en la información de la 'ciudad' suministrada y
	asocia su evento onClick con el despliegue de su ventana de información */

	function crearMarca(ciudad)
	{
		// Crea un objeto GLatLng a partir de la posición de la ciudad //
	
		var posicion = new GLatLng(ciudad.latitud, ciudad.longitud);
		
		// Establece un título para el marcador //
		
		var titulo = ciudad.nombre + " / " + ciudad.departamento;
		
		// Crea un objeto GMarker basado en la información anterior //
		
		var marca = new GMarker(posicion, { title: titulo });

		// Define un comportamiento para el marcador ante el evento de click //

		GEvent.addListener(marca, "click", function() 
		{
			// Establece el contenido HTML a ser mostrado
		
			var html =  "<div style='background-color: #FDFDC4; padding: 10px;'>" + 
					"	<div style='font-weight: bolder; font-size: 15px; text-align: center; color: #FF8040;'>" + titulo + "</div>" + 
					"	<div style='font-size: 11px; text-align: right; color: #A5ABFC;'>Latitud: " + ciudad.latitud + "; Longitud: " + ciudad.longitud + "</div>" + 
					"	<div style='font-size: 13px; padding-top: 5px; padding-bottom: 10px;'>" + ciudad.descripcion + "</div>" + 
					"	<div style='font-size: 12px; color: #D0260E;'>Enlace: <a href='" + ciudad.url + "' target='_blank'>" + ciudad.url + "</a></div>" + 
					"</div>";
					
			// Despliega la ventana de información de la marca con el código anterior //
			
			marca.openInfoWindowHtml(html);
		});
		
		return marca;
	}
	
	////////////////////////////////////////////////////////

	/* Activa la ventana de información de una ciudad según el índice solicitado */

	function seleccionarCiudad(indice)
	{
		// Si el indice es 'sin selección' es ignorado //
	
		if (indice == -1)
			return;
				
		// Simular el evento de click sobre la marca específica //
			
		GEvent.trigger(ciudades[indice].marca, "click");
	}
	
	////////////////////////////////////////////////////////

</script>

<div style='text-align: center;'>
	<h1>Ciudades del eje cafetero</h1>
	<h3>Seleccione una de las opciones</h3>
</div>
<div style="text-align: center;">

	<!-- Selector de ciudades -->

	<select id='SelCiudad' onchange='seleccionarCiudad(this.selectedIndex - 1)'>
	</select>
</div>

<br />

]]></Content>
</Module>
