Upload
gaby-eli-cardenas
View
25
Download
0
Tags:
Embed Size (px)
Citation preview
Descripcin general de las superposiciones
Las superposiciones son objetos del mapa que estn vinculados a coordenadas de latitud y longitud,
por lo que se mueven al arrastrar el mapa o aplicar el zoom sobre l. Las superposiciones son los
objetos que "aades" al mapa para designar puntos, lneas, reas o grupos de objetos.
Google Maps API incorpora varios tipos de superposiciones:
Los puntos en el mapa se muestran mediante marcadores. En algunas ocasiones, los
marcadores pueden mostrar imgenes de iconos personalizados, que se denominan
normalmente "iconos". Los marcadores e iconos son objetos de tipo Marker (para obtener ms informacin, consulta las secciones Marcadores e Iconos que se incluyen ms adelante).
Las lneas sobre el mapa se muestran mediante polilneas, que representan una serie
ordenada de ubicaciones. Las lneas son objetos de tipo Polyline (para obtener ms informacin, consulta la seccin Polilneas).
Las reas del mapa con forma irregular se muestran mediante polgonos, que son similares a
las polilneas. Al igual que las polilneas, los polgonos representan una serie ordenada de
ubicaciones; la diferencia estriba en que los polgonos definen la regin que engloban (para
obtener ms informacin, consulta la seccin Polgonos incluida ms adelante).
Las capas de mapa se pueden visualizar mediante los tipos de mapas de superposicin.
Puedes crear un conjunto de mosaicos personalizado creando tipos de mapas personalizados
que reemplacen los conjuntos de mosaicos de mapas base o se muestren sobre conjuntos de
mosaicos de mapas base existentes en forma de superposiciones (para obtener ms
informacin, consulta Tipos de mapas personalizados).
La ventana de informacin es tambin un tipo de superposicin especial para la
visualizacin de contenido (normalmente texto o imgenes) en un globo emergente que se
muestra sobre el mapa en una ubicacin determinada (para obtener ms informacin,
consulta Ventanas de informacin).
Si quieres, tambin puedes implementar superposiciones personalizadas. Estas
superposiciones personalizadas implementan la interfaz OverlayView (para obtener ms informacin, consulta Superposiciones personalizadas).
Cmo aadir superposiciones
Las superposiciones se suelen aadir al mapa en el momento de su creacin; todas las
superposiciones definen un objeto Options que se utiliza durante la creacin y que permite designar
el mapa en el que deben aparecer. Tambin puedes aadir una superposicin mediante el mtodo
setMap() de la superposicin, transmitindolo al mapa al que quieres aadir la superposicin.
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
title:"Hello World!"
});
// To add the marker to the map, call setMap();
marker.setMap(map);
Cmo eliminar superposiciones
Para eliminar una superposicin de un mapa, ejecuta el mtodo setMap() de la superposicin, que
transmite el valor null. Ten en cuenta que, al utilizar este mtodo, la superposicin no se elimina, sino que simplemente se suprime del mapa. Si lo que quieres es suprimir completamente la
superposicin, debers eliminarla del mapa y, a continuacin, establecerla en null.
Si quieres administrar varias superposiciones, debers crear un conjunto que las incluya todas. Una
vez creado este conjunto, podrs ejecutar setMap() en cada superposicin del conjunto cuando necesites eliminarlas. Ten en cuenta que, al contrario de lo que ocurra en la versin 2, no existe
ningn mtodo clearOverlays(); es el usuario el que debe realizar un seguimiento de las superposiciones y eliminarlas del mapa cuando ya no sean necesarias. Para suprimir
superposiciones, puedes eliminarlas del mapa y establecer el valor length del conjunto en 0, que elimina cualquier referencia hecha a las superposiciones.
En el ejemplo siguiente, se colocan marcadores en un mapa al hacer clic en l y los incluye en un
conjunto. Despus las superposiciones se pueden borrar, mostrar o suprimir:
var map;
var markersArray = [];
function initialize() {
var haightAshbury = new google.maps.LatLng(37.7699298, -122.4469157);
var mapOptions = {
zoom: 12,
center: haightAshbury,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng);
});
}
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
markersArray.push(marker);
}
// Removes the overlays from the map, but keeps them in the array
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}
// Shows any overlays currently in the array
function showOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(map);
}
}
}
// Deletes all markers in the array by removing references to them
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
Ver ejemplo (overlay-remove.html)
Smbolos
Un elemento Symbol es una imagen basada en vectores que se puede mostrar tanto en un objeto
Marker como Polyline. Los smbolos vienen definidos por una ruta (mediante la notacin de ruta SVG) y las opciones que controlan cmo se mostrar el smbolo. Existen varios smbolos
predefinidos que estn disponibles a travs de la clase SymbolPath. Aunque path es la nica
propiedad requerida, la clase Symbol admite gran variedad de propiedades que te permiten personalizar aspectos visuales, como el grosor y el color de fondo del trazo.
Para obtener ms informacin sobre cmo mostrar o animar smbolos en una lnea, consulta la
documentacin sobre smbolos en polilneas. Para obtener ms informacin sobre cmo utilizar una
imagen de marcador, consulta la documentacin sobre imgenes vectoriales que aparece a
continuacin.
El objeto Symbol admite las propiedades que se indican a continuacin. Ten en cuenta que el
comportamiento predeterminado de Symbol vara ligeramente en funcin de si aparece en un marcador o en una polilnea.
path (obligatoria) especifica la ruta que define la forma del smbolo. Puedes utilizar una de las rutas predefinidas en google.maps.SymbolPath o definir una ruta personalizada mediante
la notacin de ruta SVG. Nota: las rutas vectoriales en una polilnea deben estar incluidas en
un cuadrado de 22x22 pxeles. Si tu ruta incluye puntos fuera de este cuadrado, tendrs que
ajustar la propiedad de escala a un valor fraccional (por ejemplo, 0,2) para que el resultado
de los puntos de la escala estn dentro del cuadrado.
anchor especifica la posicin del smbolo en relacin con el marcador o la polilnea. Las coordenadas X e Y del anclaje convierten las coordenadas de la ruta del smbolo en
izquierda y arriba respectivamente. De forma predeterminada, los smbolos se anclan a
elementos (0, 0). La posicin se expresa en el mismo sistema de coordenadas que la ruta del smbolo.
fillColor especifica el color de relleno. Se admiten todos los colores CSS3 con excepcin de los colores expresados mediante nombres. Para los marcadores de smbolos, el color
predeterminado es el negro. Para los smbolos en polilneas, el color predeterminado es el
color de trazo de la polilnea correspondiente.
fillOpacity indica la opacidad del relleno del smbolo con un valor entre 0 y 1. El valor
predeterminado es 0.
rotation especifica el ngulo de rotacin del smbolo expresado en sentido de las agujas del reloj y en grados. De forma predeterminada, los marcadores de smbolos tienen una
rotacin de 0 y los smbolos en polilneas definen su rotacin segn el ngulo del borde en
el que se sitan. Al establecer la rotacin de un smbolo en una polilnea, se fijar la rotacin
del smbolo de forma que ya no pueda seguir la curva de la lnea.
scale especifica la escala de tamao que se aplica al smbolo. Para los marcadores de smbolos, el valor predeterminado es 1; una vez aplicada la escala, el smbolo puede tener
cualquier tamao. Para los smbolos en polilneas, el valor predeterminado es el grosor del
trazo de la polilnea; una vez aplicada la escala, el smbolo debe quedar comprendido en un
cuadrado de 22x22 pxeles, centrado en el anclaje del smbolo.
strokeColor especifica el color de trazo del smbolo. Se admiten todos los colores CSS3 con excepcin de los colores expresados mediante nombres. Para los marcadores de
smbolos, el color predeterminado es el negro. Para los smbolos en polilneas, el color
predeterminado es el color de trazo de la polilnea.
strokeOpacity especifica la opacidad del trazo del smbolo con un valor entre 0 y 1. Para los marcadores de smbolos, el valor predeterminado es 1. Para los smbolos en polilneas, el
valor predeterminado de opacidad de trazo es el correspondiente a la opacidad de trazo de la
polilnea.
strokeWeight especifica el grosor del trazo del smbolo. El valor predeterminado es el
correspondiente al elemento scale del smbolo.
En el ejemplo que se muestra a continuacin, se crea un smbolo con forma de estrella con un
relleno amarillo claro y un borde grueso de color amarillo.
var goldStar = {
path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90
z',
fillColor: "yellow",
fillOpacity: 0.8,
scale: 1,
strokeColor: "gold",
strokeWeight: 14
};
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-25.363, 131.044),
icon: goldStar,
map: map
});
Rutas predefinidas
El API de JavaScript de Google Maps ofrece algunos smbolos integrados que se pueden mostrar en
marcadores o en polilneas. Los smbolos predeterminados incluyen un crculo y dos tipos de
flechas. Debido a que la orientacin de un smbolo en una polilnea est fijada, estn disponibles
tanto las flechas que sealan hacia delante como hacia atrs. Se considera que la que la flecha que
seala hacia delante sigue la direccin del final de la polilnea. Los smbolos que se incluyen son los
siguientes:
Nombre Descripcin Ejemplo
google.maps.SymbolPath.CIRCLE Un crculo
google.maps.SymbolPath.BACKWARD_CLOSED_ARROW Una flecha que seala hacia atrs
y que est cerrada en todos sus
lados
google.maps.SymbolPath.FORWARD_CLOSED_ARROW Una flecha que seala hacia
delante y que est cerrada en
todos sus lados
google.maps.SymbolPath.BACKWARD_OPEN_ARROW Una flecha que seala hacia atrs
y que est abierta por un lado
google.maps.SymbolPath.FORWARD_OPEN_ARROW Una flecha que seala hacia
delante y que est abierta por un
lado
Puedes modificar el trazo o el relleno de los smbolos predefinidos utilizando cualquiera de las
opciones predeterminadas del smbolo.
Marcadores
Los marcadores identifican ubicaciones en el mapa. De manera predeterminada, utilizan un icono
estndar, aunque puedes establecer un icono personalizado dentro del constructor del marcador o
mediante la ejecucin de setIcon() en el marcador. El constructor google.maps.Marker toma un
nico objeto literal Marker options que especifica las propiedades iniciales del marcador. A continuacin se indican algunos campos especialmente importantes que se suelen definir al crear un
marcador.
position (obligatorio) especifica un valor de LatLng que identifica la ubicacin inicial del marcador.
map (opcional) especifica el objeto Map en el que se sita el marcador.
Ten en cuenta que debes especificar el mapa en el que vas a aadir el marcador dentro del
constructor Marker. Si no especificas este argumento, el marcador se crear, pero no se aadir al
mapa (o no mostrar). Puedes aadir el marcador ms tarde mediante la ejecucin del mtodo
setMap() del marcador. Para eliminar un marcador, ejecuta el mtodo setMap() y transmite null como el argumento.
Los marcadores estn diseados para ser interactivos. De forma predeterminada, reciben eventos
'click', por ejemplo, y se suelen utilizar dentro de detectores de eventos para abrir ventanas de
informacin. Puedes establecer la propiedad draggable de un marcador en true para que los usuarios puedan editar el marcador en el mapa.
En el siguiente ejemplo, se aade un marcador simple a un mapa de Uluru, en el centro de
Australia:
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
Este ttulo de Marker se mostrar como informacin sobre la herramienta.
Si no quieres incluir ninguna opcin del marcador (Marker options) en el constructor del
marcador, incluye un objeto {} vaco en el ltimo argumento del constructor.
Ver ejemplo (marker-simple.html)
Animaciones
Tambin puedes animar los marcadores de forma que muestren un movimiento dinmico en
numerosas circunstancias diferentes. La propiedad animation, del tipo google.maps.Animation, especifica la forma en que est animado un marcador. Actualmente, se admiten los siguientes
valores Animation:
DROP indica que el marcador debe caer desde la parte superior del mapa hasta su ubicacin definitiva en la que se colocase primero en el mapa. La animacin finalizar una vez el
marcador empiece a quedarse quieto y animation se restablezca a null. Este tipo de
animacin se suele especificar durante la creacin del marcador (Marker).
BOUNCE indica que el marcador debe "rebotar" en el mismo sitio. Un marcador que rebota
seguir hacindolo hasta que la propiedad animation se defina explcitamente en null.
Puedes iniciar una animacin en un marcador existente ejecutando setAnimation() en el objeto
Marker.
El siguiente ejemplo crea un marcador en Estocolmo (Suecia) con una animacin DROP. Al hacer
clic en el marcador, se alterna entre una animacin BOUNCE o ninguna animacin:
var stockholm = new google.maps.LatLng(59.32522, 18.07002);
var parliament = new google.maps.LatLng(59.327383, 18.06747);
var marker;
var map;
function initialize() {
var mapOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: stockholm
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
marker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: parliament
});
google.maps.event.addListener(marker, 'click', toggleBounce);
}
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
Ver ejemplo (marker-animations.html)
Nota: si tienes varios marcadores, puede que no quieras utilizarlos todos a la vez en el mapa. Puedes
utilizar setTimeout() para espaciar las animaciones de los marcadores mediante un patrn como el que se indica a continuacin:
function drop() {
for (var i =0; i < markerArray.length; i++) {
setTimeout(function() {
addMarkerMethod();
}, i * 200);
}
}
Ver ejemplo (marker-animations-iteration.html)
Cmo personalizar la imagen de marcador
Los marcadores permiten definir un icono para que se muestre en lugar del icono predeterminado.
Para definir un icono, hay que establecer diferentes propiedades que definen el comportamiento
visual del marcador.
Iconos sencillos
En el caso ms bsico, un icono puede simplemente indicar una imagen que se debe utilizar en lugar
del icono predeterminado con forma de chincheta de Google Maps. Para ello se debe incluir la URL
de una imagen en la propiedad icon del marcador. En este caso, el API de Google Maps definir automticamente el tamao del icono.
El fragmento de cdigo del siguiente ejemplo permite crear un icono para indicar la posicin de
Bondi Beach en Sdney, Australia:
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var image = 'beachflag.png';
var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
}
Ver ejemplo (icon-simple.html)
Iconos complejos
Los iconos ms complejos sirven para especificar formas complejas (que indican regiones en las
que se puede hacer clic), para aadir imgenes de sombra y para especificar el "orden de
apilamiento" en el que deben aparecer en relacin a las dems superposiciones. Los iconos que se
especifiquen de este modo deben establecer sus propiedades icon y shadow en un objeto del tipo
MarkerImage.
Las imgenes de sombra deben crearse generalmente con un ngulo de 45 grados (hacia arriba y a
la derecha) desde la imagen principal, y la esquina inferior izquierda de la imagen de sombra debe
alinearse con la esquina inferior izquierda de la imagen del icono. Las imgenes de sombra deben
ser imgenes PNG de 24 bits con transparencia alfa, de modo que los lmites de la imagen se
muestren correctamente en el mapa.
Los objetos MarkerImage no solo definen una imagen, sino que adems definen el tamao (size) y
el origen (origin) del icono (por ejemplo, si la imagen en cuestin forma parte de una imagen ms
grande en un sprite), y el anclaje (anchor) donde debera encontrarse el punto de acceso del icono (que se basa en el origen).
El fragmento de cdigo del ejemplo que aparece a continuacin permite crear marcadores
complejos que sealan playas cercanas a Sdney, Australia. Ten en cuenta que el anclaje anchor se
ha establecido en (0,32) para que corresponda con la base del mstil de la bandera.
function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(-33.9, 151.2),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
setMarkers(map, beaches);
}
/**
* Data for the markers consisting of a name, a LatLng and a zIndex for
* the order in which these markers should display on top of each
* other.
*/
var beaches = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
function setMarkers(map, locations) {
// Add markers to the map
// Marker sizes are expressed as a Size of X,Y
// where the origin of the image (0,0) is located
// in the top left of the image.
// Origins, anchor positions and coordinates of the marker
// increase in the X direction to the right and in
// the Y direction down.
var image = new google.maps.MarkerImage('images/beachflag.png',
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(20, 32),
// 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(0, 32));
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(37, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
// Shapes define the clickable region of the icon.
// The type defines an HTML 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,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
}
}
Ver ejemplo (icon-complex.html)
Iconos vectoriales
Los marcadores admiten la visualizacin tanto de imgenes de trama como de rutas vectoriales,
denominadas Symbols. Para mostrar una ruta vectorial, transmite un objeto literal Symbol con la
ruta deseada a la propiedad icon del marcador. Puedes utilizar una de las rutas predefinidas en google.maps.SymbolPath o definir una ruta personalizada mediante la notacin de ruta SVG.
Para obtener ms informacin sobre imgenes vectoriales en el API de JavaScript de Google Maps,
consulta la documentacin sobre smbolos.
El fragmento de cdigo que se muestra en el siguiente ejemplo permite crear un icono mediante una
de las rutas vectoriales predefinidas. Para obtener ejemplos ms detallados, consulta la
documentacin sobre smbolos.
marker = new google.maps.Marker({
position: new google.maps.LatLng(-25.363882, 131.044922),
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 10
},
draggable: true,
map: map
});
Polilneas
La clase Polyline define una superposicin de segmentos lineales conectados sobre el mapa. Un
objeto Polyline incluye un conjunto de ubicaciones LatLng y crea una serie de segmentos lineales que conectan dichas ubicaciones en una secuencia ordenada.
Opciones de polilneas
El constructor Polyline toma un grupo de Polyline options que especifican las coordenadas
LatLng de la lnea y un conjunto de estilos que definen la forma en que se visualizar la polilnea.
Los objetos Polyline se representan en el mapa como una serie de lneas rectas. Puedes especificar colores, grosores y niveles de opacidad personalizados que se aplicarn al trazo de la lnea en un
objeto Polyline options al crear la lnea, o bien cambiar estas propiedades despus de su creacin. A continuacin se indican los estilos de trazo que admiten las polilneas.
strokeColor especifica un color HTML hexadecimal del formato "#FFFFFF". La clase
Polyline no admite colores con nombre.
strokeOpacity especifica un valor fraccional numrico entre 0.0 y 1.0 (predeterminado) correspondiente a la opacidad del color de la lnea.
strokeWeight especifica el grosor del trazo de la lnea en pxeles.
Por otra parte, la propiedad editable de una polilnea indica si esa forma pueden editarla los usuarios en el mapa.
El fragmento de cdigo del siguiente ejemplo permite crear una polilnea de color rojo con un
grosor de dos pxeles que conecta la ruta del primer vuelo sobre el Pacfico realizado por William
Kingsford Smith entre Oakland (California, EE.UU.) y Brisbane (Australia):
function initialize() {
var myLatLng = new google.maps.LatLng(0, -180);
var mapOptions = {
zoom: 3,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
Ver ejemplo (polyline-simple.html)
Conjuntos de polilneas
Una polilnea define una serie de coordenadas como un conjunto de objetos LatLng. Para recuperar
estas coordenadas, ejecuta el objeto getPath() de Polyline, que devuelve un conjunto de tipo
MVCArray. A continuacin se indican una serie de operaciones que permiten manipular e inspeccionar estos conjuntos.
getAt() devuelve el objeto LatLng como un valor de ndice basado en cero determinado.
insertAt() inserta un objeto LatLng transmitido en un valor de ndice basado en cero determinado. Ten en cuenta que cualquier coordenada que exista en ese valor de ndice se
desplazar hacia delante.
removeAt() elimina un objeto LatLng de un valor de ndice basado en cero determinado.
Nota: el elemento i de un conjunto no se puede eliminar simplemente mediante la sintaxis
mvcArray[i], sino que debes utilizar mvcArray.getAt(i).
El fragmento de cdigo que aparece a continuacin permite crear un mapa interactivo que genera
una polilnea basada en los clics del usuario. Ten en cuenta que la polilnea solo se muestra cuando
la propiedad path contiene dos coordenadas LatLng.
var poly;
var map;
function initialize() {
var chicago = new google.maps.LatLng(41.879535, -87.624333);
var mapOptions = {
zoom: 7,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
}
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
// Add a listener for the click event
google.maps.event.addListener(map, 'click', addLatLng);
}
/**
* Handles click events on a map, and adds a new point to the Polyline.
* @param {MouseEvent} mouseEvent
*/
function addLatLng(event) {
var path = poly.getPath();
// Because path is an MVCArray, we can simply append a new coordinate
// and it will automatically appear
path.push(event.latLng);
// Add a new marker at the new plotted point on the polyline.
var marker = new google.maps.Marker({
position: event.latLng,
title: '#' + path.getLength(),
map: map
});
}
Ver ejemplo (polyline-complex.html)
Smbolos en polilneas
Puedes aadir imgenes basadas en vectores a una polilnea en forma de smbolo. Para mostrar
smbolos en una polilnea, establece la propiedad icons[] del objeto PolylineOptions. El
conjunto icons[] toma uno o ms objetos literales IconSequence que se definen como se indica a
continuacin:
icon (obligatorio) indica el icono que se debe representar en la lnea. Para obtener ms informacin sobre cmo personalizar un smbolo, consulta la documentacin sobre
smbolos.
offset indica la distancia desde el inicio de la lnea en la que se debe representar el icono. Esta distancia se puede expresar como un porcentaje de longitud de lnea (por ejemplo,
"50%") o en pxeles (por ejemplo, "50px"). El valor predeterminado es "100%".
repeat indica la distancia entre iconos consecutivos situados en la lnea. Esta distancia se puede expresar como un porcentaje de longitud de lnea (por ejemplo, "50%") o en pxeles
(por ejemplo, "50px"). Para inhabilitar la repeticin del icono, especifica "0". El valor
predeterminado es 0.
Si tu polilnea es geodsica, las distancias especificadas para la compensacin y la repeticin se
calculan en metros de forma predeterminada. Si estableces un valor en pxeles para la
compensacin o la repeticin, las distancias se calcularn en pxeles en la pantalla.
Con una combinacin de smbolos y la clase PolylineOptions, puedes controlar en gran medida el
aspecto de las polilneas en tu mapa. A continuacin se proporcionan algunos ejemplos de personalizaciones que puedes aplicar.
Flechas
Utiliza la propiedad IconSequence.offset para aadir flechas al principio o al final de tu
polilnea. En este ejemplo, al establecer la compensacin en 100%, la flecha se coloca al final de la
lnea.
var lineCoordinates = [
new google.maps.LatLng(22.291, 153.027),
new google.maps.LatLng(18.291, 153.027)
];
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};
var line = new google.maps.Polyline({
path: lineCoordinates,
icons: [{
icon: lineSymbol,
offset: '100%'
}],
map: map
});
Lneas discontinuas
Puedes conseguir un efecto de lnea discontinua estableciendo la opacidad de tu polilnea en el 0% y
dibujando un smbolo opaco a intervalos regulares.
var lineCoordinates = [
new google.maps.LatLng(22.291, 153.027),
new google.maps.LatLng(18.291, 153.027)
];
var lineSymbol = {
path: 'M 0,-1 0,1',
strokeOpacity: 1,
scale: 4
};
var line = new google.maps.Polyline({
path: lineCoordinates,
strokeOpacity: 0,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '20px'
}],
map: map
});
Rutas personalizadas
Los smbolos personalizados te permiten aadir muchas formas diferentes a una polilnea.
var lineCoordinates = [
new google.maps.LatLng(22.291, 153.027),
new google.maps.LatLng(18.291, 153.027)
];
var symbolOne = {
path: 'M -2,0 0,-2 2,0 0,2 z',
strokeColor: '#F00',
fillColor: '#F00',
fillOpacity: 1
};
var symbolTwo = {
path: 'M -2,-2 2,2 M 2,-2 -2,2',
strokeColor: '#292',
strokeWeight: 4
};
var symbolThree = {
path: 'M -1,0 A 1,1 0 0 0 -3,0 1,1 0 0 0 -1,0M 1,0 A 1,1 0 0 0 3,0 1,1 0 0 0
1,0M -3,3 Q 0,5 3,3',
strokeColor: '#00F',
rotation: 0
};
var line = new google.maps.Polyline({
path: lineCoordinates,
icons: [{
icon: symbolOne,
offset: '0%'
},{
icon: symbolTwo,
offset: '50%'
},{
icon: symbolThree,
offset: '100%'
}
],
map: map
});
Smbolos animados
Los smbolos se pueden animar a lo largo de una ruta mediante una funcin setTimeout() para cambiar la compensacin de un smbolo a intervalos fijos.
var line;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(20.291, 153.027),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var lineCoordinates = [
new google.maps.LatLng(22.291, 153.027),
new google.maps.LatLng(18.291, 153.027)
];
var lineSymbol = {
path: google.maps.SymbolPath.CIRCLE,
scale: 8,
strokeColor: '#393'
};
line = new google.maps.Polyline({
path: lineCoordinates,
icons: [{
icon: lineSymbol,
offset: '100%'
}],
map: map
});
}
function animateCircle() {
var count = 0;
offsetId = window.setInterval(function() {
count = (count + 1) % 200;
var icons = line.get('icons');
icons[0].offset = (count / 2) + '%';
line.set('icons', icons);
}, 20);
}
Polgonos
Los objetos Polygon son similares a los objetos Polyline en el sentido de que constan de una serie de coordenadas en una secuencia ordenada. No obstante, en lugar de tener los extremos abiertos, los
polgonos estn diseados para definir las regiones con un bucle cerrado. De forma similar a lo que
ocurre con las polilneas, es posible definir el trazo, lo cual afecta al contorno del polgono; sin
embargo, al contrario de lo que ocurre con las polilneas, estos ltimos permiten definir una regin
de relleno en su interior.
Por otro lado, los objetos Polygon ofrecen la posibilidad de mostrar formas complejas, que incluyen discontinuidades (varios polgonos definidos como uno solo), "donuts" (en los aparecen reas
poligonales dentro del polgono como si fueran "islas") e intersecciones entre uno o ms polgonos.
Por esta razn, un solo polgono puede definir varias rutas.
Opciones de polgonos
Al igual que ocurre con las polilneas, puedes definir colores, grosores y niveles de opacidad
personalizados para el borde del polgono (el "trazo"), as como colores y opacidades
personalizados para el rea que engloba (el "relleno"). Los colores se deben indicar en estilo HTML
numrico hexadecimal.
Dado que un rea poligonal puede incluir varios trazados diferentes, la propiedad paths del objeto
Polygon especifica un "conjunto de conjuntos" (cada uno de ellos de tipo MVCArray), donde cada
conjunto define una secuencia diferente de coordenadas LatLng ordenadas.
Sin embargo, en el caso de los polgonos simples que constan de una sola ruta, puedes construir un
objeto Polygon con un nico conjunto de coordenadas LatLng para una mayor comodidad. El API de Google Maps convierte este conjunto simple en un "conjunto de conjuntos" despus de su
creacin al almacenarlo en la propiedad paths de Polygon. De la misma forma, el API proporciona
mtodos getPath() sencillos para polgonos simples que solo consten de una ruta.
Nota: aunque crees un polgono de esta forma, sigue siendo necesario que recuperes valores del
polgono mediante la manipulacin de la ruta como un objeto MVCArray.
Por otra parte, la propiedad editable de un polgono indica si esa forma pueden editarla los usuarios en el mapa.
El siguiente fragmento de cdigo permite crear un polgono que representa el Tringulo de las
Bermudas:
function initialize() {
var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);
var mapOptions = {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var bermudaTriangle;
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var triangleCoords = [
new google.maps.LatLng(25.774252, -80.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.75737),
new google.maps.LatLng(25.774252, -80.190262)
];
// Construct the polygon
// Note that we don't specify an array or arrays, but instead just
// a simple array of LatLngs in the paths property
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
}
Ver ejemplo (polygon-simple.html)
Cierre automtico de polgonos
El objeto Polygon del objeto anterior consta de cuatro coordenadas, pero fjate en que la primera y la ltima coordenada corresponden a la misma ubicacin, lo cual permite definir la regin que
engloba. Sin embargo, en la prctica, dado que lo polgonos definen reas cerradas, no es necesario
que definas esta ltima coordenada. El API de Google Maps "cierra" automticamente cualquier
polgono dibujando un trazo que une la ltima coordenada con la primera coordenada de una
determinada ruta.
El ejemplo siguiente es idntico al primero, con la excepcin de la ltima coordenada, que se ha
omitido.
Ver ejemplo (polygon-autoclose.html)
Conjuntos de polgonos
Un polgono especifica su serie de coordenadas como un conjunto de conjuntos, donde cada
conjunto es de tipo MVCArray. Cada conjunto de "pgina" es un conjunto de coordenadas LatLng
que especifican una nica ruta. Para recuperar estas coordenadas, ejecuta el mtodo getPaths() de
Polygon. Dado que el conjunto es un objeto MVCArray, debes manipularlo e inspeccionarlo mediante las operaciones siguientes:
getAt() devuelve el objeto LatLng como un valor de ndice basado en cero determinado.
insertAt() inserta un objeto LatLng transmitido en un valor de ndice basado en cero determinado. Ten en cuenta que cualquier coordenada que exista en ese valor de ndice se
desplazar hacia delante.
removeAt() elimina un objeto LatLng de un valor de ndice basado en cero determinado.
Nota: el elemento i de un conjunto no se puede eliminar simplemente mediante la sintaxis
mvcArray[i], sino que debes utilizar mvcArray.getAt(i).
El siguiente fragmento de cdigo permite procesar los eventos de clic en el polgono mostrando
informacin sobre las coordenadas del polgono:
var map;
var infoWindow;
function initialize() {
var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);
var mapOptions = {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var bermudaTriangle;
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var triangleCoords = [
new google.maps.LatLng(25.774252, -80.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.75737)
];
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: "#FF0000",
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
// Add a listener for the click event
google.maps.event.addListener(bermudaTriangle, 'click', showArrays);
infowindow = new google.maps.InfoWindow();
}
function showArrays(event) {
// Since this Polygon only has one path, we can call getPath()
// to return the MVCArray of LatLngs
var vertices = this.getPath();
var contentString = "Bermuda Triangle Polygon";
contentString += "Clicked Location: " + event.latLng.lat() + "," +
event.latLng.lng() + "";
// Iterate over the vertices.
for (var i =0; i < vertices.length; i++) {
var xy = vertices.getAt(i);
contentString += "" + "Coordinate: " + i + "" + xy.lat() +"," +
xy.lng();
}
// Replace our Info Window's content and position
infowindow.setContent(contentString);
infowindow.setPosition(event.latLng);
infowindow.open(map);
}
Ver ejemplo (polygon-arrays.html)
Crculos y rectngulos
Adems de una clase Polygon genrica, el API de JavaScript de Google Maps incluye clases
especficas para Circle y Rectangle a fin de simplificar su construccin.
Crculos
Un crculo (Circle) es similar a un polgono (Polygon) en que puedes definir colores, grosores y niveles de opacidad personalizados para el borde del crculo (el "trazo"), as como colores y
opacidades personalizados para el rea que engloba (el "relleno"). Los colores se deben indicar en
estilo HTML numrico hexadecimal.
A diferencia de un polgono (Polygon), no se definen rutas (paths) para un crculo (Circle); en su lugar, un crculo tiene dos propiedades adicionales que definen su forma:
center especifica los valores de latitud y longitud en Google Maps (google.maps.LatLng) del centro del crculo.
radius especifica el radio del crculo, en metros.
Por otra parte, la propiedad editable de un crculo indica si esa forma pueden editarla los usuarios en el mapa.
El siguiente fragmento de cdigo permite crear un crculo que representa poblaciones de Estados
Unidos:
// Create an object containing LatLng, population.
var citymap = {};
citymap['chicago'] = {
center: new google.maps.LatLng(41.878113, -87.629798),
population: 2842518
};
citymap['newyork'] = {
center: new google.maps.LatLng(40.714352, -74.005973),
population: 8143197
};
citymap['losangeles'] = {
center: new google.maps.LatLng(34.052234, -118.243684),
population: 3844829
}
var cityCircle;
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(37.09024, -95.712891),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
for (var city in citymap) {
// Construct the circle for each value in citymap. We scale population by
20.
var populationOptions = {
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: citymap[city].population / 20
};
cityCircle = new google.maps.Circle(populationOptions);
}
}
Ver ejemplo (circle-simple.html)
Rectngulos
Un crculo (Rectangle) es similar a un polgono (Polygon) en que puedes definir colores, grosores y niveles de opacidad personalizados para el borde del rectngulo (el "trazo"), as como colores y
opacidades personalizados para el rea que engloba (el "relleno"). Los colores se deben indicar en
estilo HTML numrico hexadecimal.
A diferencia de un polgono (Polygon), no se definen rutas (paths) para un rectngulo
(Rectangle); en su lugar, un rectngulo tiene una propiedad bounds adicional que define su forma:
bounds especifica google.maps.LatLngBounds del rectngulo.
Por otra parte, la propiedad editable de un rectngulo indica si esa forma pueden editarla los usuarios en el mapa.
El siguiente ejemplo crea un rectngulo a partir de la ventana grfica previa de cualquier evento
'zoom_changed':
function initialize() {
var coachella = new google.maps.LatLng(33.6803003, -116.173894);
var rectangle;
var mapOptions = {
zoom: 11,
center: coachella,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
rectangle = new google.maps.Rectangle();
google.maps.event.addListener(map, 'zoom_changed', function() {
// Get the current bounds, which reflect the bounds before the zoom.
var rectOptions = {
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map: map,
bounds: map.getBounds()
};
rectangle.setOptions(rectOptions);
});
}
Ver ejemplo (rectangle-simple.html)
Formas que pueden editar los usuarios
Todos los tipos de superposiciones de formas (polilneas, polgonos, crculos y rectngulos) se
pueden configurar como formas que pueden editar los usuarios estableciendo editable en true en las opciones de la forma correspondiente.
Para que los marcadores se puedan arrastrar, se debe establecer draggable en true en las opciones del marcador correspondiente.
var circleOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
radius: 25000,
map: map,
editable: true
};
var circle = new google.maps.Circle(circleOptions);
Cuando una superposicin de forma se configura para que puedan editarla los usuarios, se aaden a
esa forma una serie de "controles" que permiten que los usuarios cambien la ubicacin, la forma y
el tamao de la figura en cuestin directamente en el mapa.
Ver ejemplo (user-editable-shapes.html)
Los cambios realizados por los usuarios en los objetos no se conservan de una sesin a otra. Para
guardar los cambios realizados en los polgonos, la informacin se debe obtener y almacenar
manualmente.
Cmo editar eventos
Cuando se edita una forma, se activa un evento una vez finalizada la edicin. A continuacin se
muestra una tabla de formas y eventos.
Forma Eventos
Crculo radius_changed center_changed
Polgono
insert_at remove_at set_at
El detector se debe establecer en la ruta del polgono. Si el polgono tiene varias rutas,
se debe establecer un detector en cada una.
Polilnea
insert_at remove_at set_at
El detector se debe establecer en la ruta de la polilnea.
Rectngulo bounds_changed
google.maps.event.addListener(circle, 'radius_changed', function() {
radius = circle.getRadius();
});
google.maps.event.addListener(outerPath, 'set_at', function() {
print('Vertex moved on outer path.');
});
google.maps.event.addListener(innerPath, 'insert_at', function() {
print('Vertex removed from inner path.');
});
Biblioteca de dibujo
Los conceptos que se incluyen en este documento hacen referencia a recursos que solo estn
disponibles dentro de la biblioteca google.maps.drawing. Al cargar el API de JavaScript de Google Maps, esta biblioteca no cargar de forma predeterminada, pero se debe especificar
explcitamente mediante la utilizacin de un parmetro de inicializacin libraries. http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing
Para obtener ms informacin, consulta la documentacin sobre las bibliotecas de la versin 3 del
API de Google Maps.
La clase DrawingManagerproporciona una interfaz grfica que permite que los usuarios dibujen polgonos, rectngulos, polilneas, crculos y marcadores en el mapa. A continuacin se indica
cmo se puede crear un objeto DrawingManager:
var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(map);
Opciones de DrawingManager
El constructor de DrawingManagerutiliza un conjunto de opciones que definen el conjunto de controles que se deben mostrar, su posicin y el estado de dibujo inicial.
La propiedad drawingMode de DrawingManager define el estado de dibujo inicial de DrawingManager. Esta propiedad acepta una constante
google.maps.drawing.OverlayType. El valor predeterminado es null, que hace que el cursor se encuentre en modo de no dibujo cuando se inicializa DrawingManager.
La propiedad drawingControl de DrawingManager define la visibilidad de la interfaz de
seleccin de herramientas de dibujo en el mapa. Esta propiedad admite un valor booleano. Tambin puedes definir la posicin del control y los tipos de superposiciones que se deben
representar en l mediante la propiedad drawingControlOptions de DrawingManager.
o position define la posicin del control de dibujo en el mapa y acepta una constante
google.maps.ControlPosition.
o drawingModesrepresenta un conjunto de constantes
google.maps.drawing.OverlayType y define los tipos de superposiciones que se deben incluir en el selector de forma del control de dibujo. Siempre aparecer el
icono con forma de mano, que permite que el usuario interacte con el mapa sin
dibujar.
A cada tipo de superposicin se le puede asignar un conjunto de propiedades
predeterminadas que permite definir la apariencia de la superposicin cuando se crea por
primera vez. Estas propiedades se definen en la propiedad {overlay}Options de cada
superposicin (donde {overlay} representa el tipo de superposicin). Por ejemplo, la posibilidad de hacer clic, la propiedad zIndex, las propiedades de trazo y las propiedades de
relleno de un crculo se pueden definir con la propiedad circleOptions. Si se incluyen valores de mapa, ubicacin o tamao, se ignorarn. Para obtener informacin detallada
sobre cules son las propiedades que se pueden definir, consulta la documentacin de
referencia del API.
Sugerencia: para hacer que los usuarios puedan editar una forma una vez creada, se debe
establecer la propiedad editable en true.
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [google.maps.drawing.OverlayType.MARKER,
google.maps.drawing.OverlayType.CIRCLE]
},
markerOptions: {
icon: new google.maps.MarkerImage('http://www.example.com/icon.png')
},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
zIndex: 1,
editable: true
}
});
drawingManager.setMap(map);
Ver ejemplo (drawing-tools.html)
Cmo actualizar el control de las herramientas de dibujo
Una vez creado, el objeto DrawingManager, se puede actualizar realizando una llamada al mtodo
setOptions() y especificando nuevos valores.
drawingManager.setOptions({
drawingControlOptions: {
position: google.maps.ControlPosition.BOTTOM_LEFT,
drawingModes: [google.maps.drawing.OverlayType.MARKER]
}
});
El siguiente fragmento de cdigo permite mostrar u ocultar el control de las herramientas de dibujo:
// To hide:
drawingManager.setOptions({
drawingControl: false
});
// To show:
drawingManager.setOptions({
drawingControl: true
});
El siguiente fragmento de cdigo permite eliminar el control de las herramientas de dibujo del
objeto map:
drawingManager.setMap(null);
Al ocultar el control de dibujo, no aparece el control de las herramientas de dibujo, pero siguen
estando disponibles todas las funciones de la clase DrawingManager. De esa forma, si quieres,
puedes implementar tu propio control. Al eliminar DrawingManager del objeto map, se inhabilitan todas las funciones de dibujo. Para restaurar estas funciones, habr que volver a asociarlo al mapa
con drawingManager.setMap(map) o crear un nuevo objeto DrawingManager.
Eventos de dibujo
Cuando se crea una superposicin de forma, se activan dos eventos:
un evento {overlay}complete (donde {overlay} representa el tipo de superposicin,
como circlecomplete, polygoncomplete, etc. y se transmite una referencia a la superposicin como un argumento),
un evento overlaycomplete (un objeto literal, que contiene el elemento OverlayType y una referencia a la superposicin, se transmite como un argumento).
google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle)
{
var radius = circle.getRadius();
});
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event)
{
if (event.type == google.maps.drawing.OverlayType.CIRCLE) {
var radius = event.overlay.getRadius();
}
});
Ventanas de informacin
Las ventanas de informacin (InfoWindow) muestran contenido en una ventana flotante situada encima del mapa. La ventana de informacin tiene un aspecto ligeramente parecido al de los
bocadillos de los cmics. Tiene un rea de contenido y un pico afilado, cuyo extremo se encuentra
en una ubicacin especificada en el mapa. Puedes ver cmo funcionan las ventanas de informacin
si haces clic en los marcadores de negocios de Google Maps.
El constructor InfoWindow utiliza un objeto InfoWindow options , que especifica un conjunto de parmetros iniciales para la visualizacin de la ventana de informacin. La ventana de informacin
no se aade al mapa cuando se crea. Para mostrar la ventana de informacin, necesitas ejecutar el
mtodo open() en el objeto InfoWindow, transmitir el mapa (Map) en el que se va a abrir y,
opcionalmente, el marcador (Marker) en el que se va a anclar. En caso de que no se especifique
ningn marcador, la ventana de informacin se abrir en su propiedad position.
El objeto InfoWindow options es un objeto literal que contiene los siguientes campos:
content contiene una cadena de texto o un nodo DOM que se mostrar cuando se abra la ventana de informacin.
pixelOffset contiene una compensacin de la punta de la ventana de informacin con relacin a la ubicacin en la que dicha ventana est anclada. En la prctica, no debe ser
necesario modificar este campo.
position contiene el objeto LatLng en el que se ancla esta ventana de informacin. Ten en cuenta que este valor se actualiza automticamente con una nueva posicin cuando se abre
la ventana de informacin en un marcador.
maxWidth especifica la anchura mxima en pxeles de la ventana de informacin. De forma predeterminada, las ventanas de informacin se amplan para ajustarse a su contenido y
ajustan el texto automticamente si la ventana de informacin se ampla hasta cubrir el
mapa. Si implementas un elemento maxWidth, la ventana de informacin se ajustar de manera automtica para respetar el ancho en pxeles. Cuando se alcanza el ancho mximo, la
ventana de informacin se puede expandir verticalmente si la pantalla dispone de espacio
real.
El contenido de InfoWindow puede incluir una cadena de texto, un fragmento HTML o un elemento
DOM. Para especificar este contenido, puedes trasmitirlo al constructor InfoWindow options o
ejecutar setContent() explcitamente en el objeto InfoWindow. Si quieres especificar
explcitamente el tamao del contenido, puedes utilizar elementos y, si quieres, habilitar el desplazamiento. Ten en cuenta que si no habilitas el desplazamiento y el contenido excede el
espacio disponible en una ventana de informacin, dicho contenido puede salirse de la ventana de
informacin.
Las ventanas de informacin (InfoWindow) pueden adjuntarse a objetos Marker (en cuyo caso su
posicin se basa en la ubicacin del marcador) o al propio mapa en un objeto LatLng especificado. Si quieres que solo se muestre simultneamente una ventana de informacin (como suele ocurrir en
Google Maps), crea nicamente una ventana de informacin, que podrs reasignar a diferentes
ubicaciones o marcadores en funcin de los eventos del mapa (por ejemplo, los clics del usuario).
Sin embargo, a diferencia de lo que suceda en la versin 2 del API de Google Maps, los mapas
ahora pueden mostrar varios objetos InfoWindow, si as lo indicas.
Para cambiar la ubicacin de la ventana de informacin, puedes ejecutar setPosition() explcitamente en la ventana de informacin o bien adjuntarla a un nuevo marcador mediante el
mtodo InfoWindow.open(). Ten en cuenta que si ejecutas open() sin transmitir un marcador, la
ventana de informacin (InfoWindow) utilizar la posicin especificada en la construccin mediante
el objeto InfoWindow options.
El fragmento de cdigo que aparece a continuacin permite mostrar un marcador en el centro de
Australia. Al hacer clic en el marcador, aparece la ventana de informacin.
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var contentString = ''+
''+
''+
'Uluru'+
''+
'Uluru, also referred to as Ayers Rock, is a large ' +
'sandstone rock formation in the southern part of the '+
'Northern Territory, central Australia. It lies 335 km (208 mi) '+
'south west of the nearest large town, Alice Springs; 450 km '+
'(280 mi) by road. Kata Tjuta and Uluru are the two major '+
'features of the Uluru - Kata Tjuta National Park. Uluru is '+
'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
'Aboriginal people of the area. It has many springs, waterholes, '+
'rock caves and ancient paintings. Uluru is listed as a World '+
'Heritage Site.'+
'Attribution: Uluru, '+
'http://en.wikipedia.org/w/index.php?title=Uluru (last visited June 22,
2009).'+
''+
'';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Uluru (Ayers Rock)"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
Ver ejemplo (infowindow-simple.html)
A continuacin aparece un ejemplo en el que el elemento maxWidth de la ventana de informacin se ha establecido en 200 pxeles:
Ver ejemplo (infowindow-simple-max.html)
Superposiciones de suelo
Los polgonos son superposiciones que resultan tiles para representar zonas de tamao irregular,
pero no permiten mostrar imgenes. Si tienes una imagen que quieres colocar en un mapa, puedes
utilizar un objeto GroundOverlay. El constructor de un objeto GroundOverlay permite especificar
la URL de una imagen y el objeto LatLngBounds de la imagen en forma de parmetros. La imagen se mostrar en el mapa, dentro de los lmites establecidos y de acuerdo con la proyeccin del mapa.
En el ejemplo siguiente, se superpone un mapa antiguo de Newark (Nueva Jersey, EE.UU.) sobre
uno reciente:
var newark = new google.maps.LatLng(40.740, -74.18);
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(40.716216,-74.213393),
new google.maps.LatLng(40.765641,-74.139235));
var mapOptions = {
zoom: 13,
center: newark,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var oldmap = new google.maps.GroundOverlay(
"http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg",
imageBounds);
oldmap.setMap(map);
Ver ejemplo (groundoverlay-simple.html)
Superposiciones personalizadas
La versin 3 del API de Google Maps proporciona una clase OverlayView para crear tus propias
superposiciones personalizadas. OverlayView es una clase base que proporciona diferentes mtodos que debes implementar cuando crees tus superposiciones. Esta clase tambin proporciona
algunos mtodos que hacen posible la conversin entre las coordenadas de pantalla y las
ubicaciones del mapa.
Para crear una superposicin personalizada:
En la propiedad prototype del objeto define una nueva instancia de
google.maps.OverlayView(). Esto establecer eficazmente la clase de superposicin como subclase.
Crea un constructor para tu superposicin personalizada y, dentro de dicho constructor,
establece las propiedades personalizadas en los parmetros de inicializacin.
Implementa un mtodo onAdd() en tu prototipo y adjunta la superposicin al mapa. Se
ejecutar OverlayView.onAdd() cuando el mapa est preparado para que se le adjunte la superposicin.
Implementa un mtodo draw() en tu prototipo y define la visualizacin de tu objeto.
OverlayView.draw() tambin se ejecutar cuando se muestre el objeto por primera vez.
Tambin debes implementar un mtodo onRemove() para eliminar cualquier elemento aadido en la superposicin.
A continuacin seguimos con la explicacin.
Cmo subclasificar una superposicin
Utilizaremos OverlayView para crear una superposicin de imagen sencilla (de forma similar a
GGroundOverlay en la versin 2 del API). Crearemos un objeto USGSOverlay que contenga una imagen del USGS de una zona en cuestin y los lmites de la imagen.
var overlay;
function initialize() {
var myLatLng = new google.maps.LatLng(62.323907, -150.109291);
var mapOptions = {
zoom: 11,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var swBound = new google.maps.LatLng(62.281819, -150.287132);
var neBound = new google.maps.LatLng(62.400471, -150.005608);
var bounds = new google.maps.LatLngBounds(swBound, neBound);
// Photograph courtesy of the U.S. Geological Survey
var srcImage = 'images/talkeetna.png';
overlay = new USGSOverlay(bounds, srcImage, map);
}
A continuacin, crearemos un constructor para esta clase e iniciaremos los parmetros trasmitidos
como propiedades del nuevo objeto. Adems, necesitaremos establecer como subclase explcita el
objeto USGSOverlay de OverlayView. Para llevar a cabo esta accin, se establece la propiedad
prototype de la nueva clase en una instancia de la clase principal (definimos el prototipo como una instancia en vez de definir la propia clase principal, puesto que no queremos modificar la clase
principal).
function USGSOverlay(bounds, image, map) {
// Now initialize all properties.
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
// We define a property to hold the image's
// div. We'll actually create this div
// upon receipt of the add() method so we'll
// leave it null for now.
this.div_ = null;
// Explicitly call setMap() on this overlay
this.setMap(map);
}
USGSOverlay.prototype = new google.maps.OverlayView();
Todava no podemos adjuntar esta superposicin al mapa en el constructor de la superposicin. En
concreto, tenemos que asegurarnos de que todos los paneles del mapa (que especifican el orden en
el que se muestran los objetos en un mapa) estn disponibles. De manera oportuna, el API
proporciona un mtodo ayudante para indicar que esto sucede as. Abordaremos este mtodo en la
prxima seccin.
Cmo inicializar una superposicin
Cuando la superposicin ya se ha creado y est preparada para mostrarse, tenemos que adjuntarla al
mapa mediante el DOM del navegador. El API indica que la superposicin se ha aadido al mapa al
ejecutar el mtodo onAdd() de la superposicin. Para procesar este mtodo, hay que crear un
elemento para alojar nuestra imagen, aadir un elemento , adjuntarlo al elemento
y, por ltimo, adjuntar la superposicin a uno de los paneles del mapa, que son nodos dentro del rbol DOM.
Este conjunto de paneles del tipo MapPanes especifica el orden de apilado de las diferentes capas del mapa. A continuacin se muestran posibles paneles que estn enumerados en el orden en que
estn apilados de abajo arriba:
MapPanes.mapPane MapPanes.overlayLayer MapPanes.overlayShadow MapPanes.overlayImage MapPanes.floatShadow MapPanes.overlayMouseTarget MapPanes.floatPane
Dado que nuestra imagen es una "superposicin de suelo", utilizaremos el panel de mapa
overlayLayer. Una vez tengamos el panel, le asociaremos nuestro objeto como objeto secundario.
USGSOverlay.prototype.onAdd = function() {
// Note: an overlay's receipt of onAdd() indicates that
// the map's panes are now available for attaching
// the overlay to the map via the DOM.
// Create the DIV and set some basic attributes.
var div = document.createElement('div');
div.style.border = "none";
div.style.borderWidth = "0px";
div.style.position = "absolute";
// Create an IMG element and attach it to the DIV.
var img = document.createElement("img");
img.src = this.image_;
img.style.width = "100%";
img.style.height = "100%";
div.appendChild(img);
// Set the overlay's div_ property to this DIV
this.div_ = div;
// We add an overlay to a map via one of the map's panes.
// We'll add this overlay to the overlayImage pane.
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
}
Cmo dibujar una superposicin
Ten en cuenta que en realidad no hemos ejecutado todava ninguna visualizacin especial. El API
ejecuta un mtodo draw() independiente en la superposicin siempre que necesite dibujar la
superposicin en el mapa (incluso cuando se aade por primera vez).
Por tanto, implementaremos este mtodo draw(), recuperaremos el objeto MapCanvasProjection
de la superposicin mediante getProjection() y calcularemos las coordenadas exactas en las que anclar los puntos inferior izquierdo y superior derecho del objeto, desde los que volveremos a
definir el tamao del elemento , que a su vez define el tamao de la imagen para que coincida con los lmites que especificamos en el constructor de la superposicin.
USGSOverlay.prototype.draw = function() {
// Size and position the overlay. We use a southwest and northeast
// position of the overlay to peg it to the correct position and size.
// We need to retrieve the projection from this overlay to do this.
var overlayProjection = this.getProjection();
// Retrieve the southwest and northeast coordinates of this overlay
// in latlngs and convert them to pixels coordinates.
// We'll use these coordinates to resize the DIV.
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// Resize the image's DIV to fit the indicated dimensions.
var div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
}
Cmo eliminar una superposicin
Aadimos tambin un mtodo onRemove() para eliminar perfectamente la superposicin del mapa. Este mtodo se ejecutar automticamente desde el API si alguna vez establecemos la propiedad
map de la superposicin como null.
USGSOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
Ver ejemplo (overlay-simple.html)
Cmo mostrar y ocultar una superposicin
Si quieres ocultar o mostrar una superposicin en lugar de simplemente crearla o eliminarla, puedes
implementar tus propios mtodos hide() y show() para ajustar la visibilidad de la superposicin. Tambin puedes desvincular la superposicin del DOM del mapa, aunque el coste de esta operacin
es algo ms elevado. Ten en cuenta que si vuelves a vincular la superposicin al elemento DOM del
mapa, se volver a ejecutar el mtodo onAdd() de la superposicin.
En el siguiente ejemplo se aaden los mtodos hide() (ocultar) y show() (mostrar) al prototipo de
la superposicin que alterna la visibilidad del elemento del contenedor. Adems, se aade un
mtodo toogleDOM() que vincula la superposicin al mapa o la desvincula de este. Ten en cuenta
que si se establece la visibilidad en "hidden" y, a continuacin, se desvincula el mapa del elemento
DOM a travs de toggleDOM(), la superposicin volver a ser visible si volvemos a vincular el
mapa, ya que se vuelve a crear el contenedor en el mtodo onAdd() de la superposicin.
// Note that the visibility property must be a string enclosed in quotes
USGSOverlay.prototype.hide = function() {
if (this.div_) {
this.div_.style.visibility = "hidden";
}
}
USGSOverlay.prototype.show = function() {
if (this.div_) {
this.div_.style.visibility = "visible";
}
}
USGSOverlay.prototype.toggle = function() {
if (this.div_) {
if (this.div_.style.visibility == "hidden") {
this.show();
} else {
this.hide();
}
}
}
USGSOverlay.prototype.toggleDOM = function() {
if (this.getMap()) {
this.setMap(null);
} else {
this.setMap(this.map_);
}
}
// Now we add an input button to initiate the toggle method
// on the specific overlay
Ver ejemplo (overlay-hideshow.html)
Except as otherwise noted, the content of this page is licensed under the Creative Commons
Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details,
see our Site Policies.
Last updated enero 31, 2013.
Condiciones de servicio
Poltica de privacidad