API Planos

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 JS dentro del esqueleto del archivo HTML mostrado en la Introducción, o puede descargar el archivo HTML completo para cada ejemplo clickeando el link de cada uno de ellos.

El siguiente código crea un plano centrado en Av Santa María 0792, Providencia.

var map = new Map("map");
map.draw(new GeoPoint(-33.429, -70.624), 3);

Viendo ejemplo (basico.html)

Para agregar controles al plano se utiliza el método addControl. El siguiente código agrega el control NavigatorControl, para manejar el desplazamiento y zoom del plano incorporado en las líneas siguientes. El control asume por defecto el nivel de zoom definido en la visualización del plano.

var opciones = new MapOptions();
var map = new Map("map", opciones);
//agregar control de navegacion
map.addControl(new NavigatorControl(), new Position(5, 100));
map.draw(new GeoPoint(-33.429, -70.624), 3);

Viendo ejemplo (control.html)

Al igual que para agregar controles, los Skins deben incorporarse utilizando el método addControl. El siguiente código agrega el control MapTypeControl, que permite visualizar el plano con diferentes gráficas o Skins.

var opciones = new MapOptions();		
var map = new Map("map", opciones);		
map.addMapType(MapType.MAPSKIN1);
map.addMapType(MapType.MAPSKIN2);
map.addMapType(MapType.MAPSKIN3);		
map.addMapType(MapType.SATELLITE);		
map.addMapType(MapType.HYBRID);		
//agregar control de tipos de mapas		
map.addControl(new MapTypeControl(), new Position(350, 0));		
map.draw(new GeoPoint(-33.429, -70.624), 3);

Viendo ejemplo (skin.html)

A partir de una dirección normalizada el servicio de Geocoding entrega información de latitud y longitud. En el sitio Geocoding HTML se ejemplifica este servicio.

Las Búsquedas y Rutas se deben incorporar utilizando el método addControl. El siguiente código agrega el control SearchBarControl, que permite las búsquedas de direcciones y la resolución de una Ruta óptima entre 2 puntos (2 direcciones).

map.addControl(new SearchBarControl(), new Position(5, 5));

Viendo ejemplo (busquedas.html)

Las búsquedas por intersección se deben habilitar utilizando el método enableIntersectionSearch, además de agregar un control de búsquedas SearchBarControl. El siguiente código habilita la característica de búsqueda por intersección y agrega el control SearchBarControl, que permite las búsquedas de direcciones y la resolución de una ruta óptima entre 2 puntos (2 direcciones) ya sea buscando por dirección o por intersección.

map.enableIntersectionSearch();		
map.addControl(new SearchBarControl(), new Position(5, 5));

Viendo ejemplo (interseccion.html)

Para crear un InfoWindow, se debe llamar al método drawInfoWindow, pasando la localizacion y los elementos a incorporar. El siguiente código muestra un ejemplo de InfoWindow que incorpora información de Publiguías.

var map = new Map("map");		
var geoPoint = new GeoPoint(-33.429754, -70.6248695);		
map.drawInfoWindow(new InfoWindow('Publiguías', 
	'Avda. Santa María 0792, Providencia.',
	'http://apiplanos.amarillas.cl/planosapi/gui/img/infoWindow/decCharBlue_I.gif',
	null,
	'rgb(116,114,116)'), 		
	geoPoint,		
	3);

El método drawInfoWindow tiene incorporada la visualización del plano (equivalente al método draw), para evitar 2 veces el ingreso de las coordenadas de posicionamiento del Plano y el posicionamiento del InfoWindows.
El InfoWindow se posicionará por defecto al centro del del plano.

Viendo ejemplo (infowindows.html)

El tercer parámetro del InfoWindow en este ejemplo es NULL, pero podemos definir un conjunto de opciones que se visualizarán como una toolbar dentro del InfoWindow sólo con implementar la interfaz IconLink.

A continuación se muestran un ejemplo de la clase URLIconLink que implementa la interfaz IconLink.

var options = [];
options.push(new URLIconLink("Ver Sitio", 
	"http://apiplanos.amarillas.cl/planosapi/1.0/gui/img/infoWindow/decCharBlue_I.gif",
	"http://www.publiguias.cl", '_blank'));
var infowindow = new InfoWindow('Publiguías Yell', 
	'Santa María 0792, 
	Providencia', 
	null, 
	options, 
	null);

La clase URLIconLink permite definir una link a una opción.

El método enableMoreInfo incorpora la visualización de Más Información al plano:

Como Más Información, el método entrega el nombre de la calle, numeración, altura inicial y altura final del eje del punto. Para visualizar estos datos se debe presionar el botón derecho del Mouse y elegir Más Información.

El siguiente código incorpora la funcionalidad de Más Información en el plano:

Viendo ejemplo (masinfo.html)

El método map.addToolbar agrega las funcionalidades de Impresión y de Envío de E-mail:

El siguiente código incorpora las funcionalidadades de la ToolBar en el plano:

Viendo ejemplo (toolBar.html)

El método enableEmailByPoint agrega la funcionalidad de un envío de e-mail contextual:

Para ejecutar el envío, se debe presionar el botón derecho del Mouse y elegir Envío de E-mail

El siguiente código incorpora la funcionalidad de Envío de E-mail en el plano:

Viendo ejemplo (emailContexto.html)

El método addSubcategory agrega los Puntos de Interés al plano. Estos puntos pueden desplegarse como fijos (FIXED) o seleccionables (SELECTIONABLE) y mostrarse en los niveles de zoom especificados (por ejemplo 0-3).

var view = new InterestPointsView(map);		
view.addSubcategory(Subcategory.METRO, InterestPointsViewMode.FIXED, new ZoomLevels(0, 3));
view.addSubcategory(Subcategory.MINISTRY, InterestPointsViewMode.SELECTIONABLE, new ZoomLevels(0, 3));
view.load();
// Agrega un control InterestPointsControl asociado a la vista cargada
map.addControl(new InterestPointsControl(view), new Position(10, 300));