Versión 2.0
API Planos.cl
Descripción Ejemplos Documentación Solicitud de Key Ejemplos Implementación  
API Planos.cl
Ejemplos
 
En cada uno de los siguientes ejemplos se muestra solo el código Javascript relevante, no el archivo HTML completo. Si desea, puede insertar el código Javascript dentro del esqueleto del archivo HTML mostrado en la Introducción (sección Descripción), o puede descargar el archivo HTML completo para cada ejemplo cliqueando el link de cada uno de ellos.
1. Mapa básico
El siguiente código crea un plano centrado en la Plaza de Armas de Santiago.
var map = new cl.publiguias.planos.Map("map");
map.draw(new cl.publiguias.planos.GeoPoint(-33.437184, -70.649728), 3);
							
2. Agregando controles al mapa
Para agregar controles al mapa se utiliza el método addControl. El siguiente código agrega el control ZoomControl para manejar el nivel de zoom del mapa.
var map = new cl.publiguias.planos.Map("map");
map.draw(new cl.publiguias.planos.GeoPoint(-33.429, -70.624), 3);

//Agregar control de navegacion
map.addControl(new cl.publiguias.planos.ZoomControl());
							
3. Geocoding HTML
A partir de una dirección normalizada el servicio de Geocoding entrega información de latitud y longitud. En la página Geocoding HTML se muestra este servicio.
4. Agregando búsquedas de direcciones
Las búsquedas pueden realizarse utilizando el método drawAddressSearch
function buscar() {
	var busqueda = document.getElementById("direccion").value;
	
	var procesarResultado = function(result) {
		// Procesar aquí el objeto result
	};
	
	map.drawAddressSearch(busqueda, map.getCenter(), procesarResultado);
}
							
5. Agregando búsquedas por intersección
Las búsquedas de intersecciones de calles pueden realizarse utilizando el método drawIntersectionSearch
function buscar() {
	var calle1 = document.getElementById("calle1").value;
	var calle2 = document.getElementById("calle2").value;
	
	var procesarResultado = function(result) {
		// Procesar aquí el objeto result				
	};
	
	map.drawIntersectionSearch(calle1, calle2, "", map.getCenter(), procesarResultado);
}
							
6. Agregando búsquedas de rutas
Las búsquedas de rutas entre 2 direcciones pueden realizarse utilizando el método drawRouteSearch. El siguiente código dibuja la ruta óptima entre 2 direcciones.
function buscar() {
	var desde = document.getElementById("direccionA").value;
	var hasta = document.getElementById("direccionB").value;
	
	var procesarResultado = function(result) {
		// Procesar aquí el objeto result				
	};
	
	map.drawRouteSearch(desde, hasta, map.getCenter(), procesarResultado);
}

							
7. Agregando InfoWindow
Para agregar un InfoWindow al mapa, se debe crear un objeto InfoWindow y agregarlo al mapa mediante el método addDecoration.
var map = new cl.publiguias.planos.Map("map");
map.draw(new cl.publiguias.planos.GeoPoint(-33.497989, -70.597533), 3);

var infoWindow1 = new cl.publiguias.planos.InfoWindow("Casa de Patricio",
                                                      "Aquí vive mi amigo Patricio",
                                                      "http://apiplanos.amarillas.cl/site/gui/img/casa.png");
map.addDecoration(infoWindow1, new cl.publiguias.planos.GeoPoint(-33.498989, -70.608933));
	
							
Otra alternativa es utilizar el método drawInfoWindow. Éste método dibuja el mapa en el punto especificado y además dibuja un InfoWindow en el centro del mapa.
var map = new cl.publiguias.planos.Map("map");
				
map.drawInfoWindow("Mi casa",
                   "¡Aquí es la fiesta esta noche!",
                   "http://apiplanos.amarillas.cl/site/gui/img/casa.png",
                   new cl.publiguias.planos.GeoPoint(-33.497989, -70.595533),
                   5);	
	
							
8. Agregando Puntos de Interés
La clase cl.publiguias.planos.InterestPoints.InterestPointsView permite visualizar puntos de interés en el mapa. Se pueden cargar categorías y subcategorías de puntos de interés mediante los métodos addCategory y addSubcategory.
Los puntos de interés pueden desplegarse como fijos (FIXED) o seleccionables (SELECTIONABLE) y mostrarse en los niveles de zoom especificados (por ejemplo 0-4).
El siguiente código agrega la subcategoría METRO al plano, de forma fija y entre los niveles de zoom del 0 al 4:
var map = new cl.publiguias.planos.Map("map");
map.draw(new cl.publiguias.planos.GeoPoint(-33.437184, -70.649728), 3);

var view = new cl.publiguias.planos.InterestPoints.InterestPointsView(map);
view.addSubcategory(cl.publiguias.planos.InterestPoints.Subcategory.METRO, cl.publiguias.planos.InterestPoints.ViewMode.FIXED, new cl.publiguias.planos.InterestPoints.ZoomLevels(0, 4));

view.load();