Descripción General de Las Superposiciones

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

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

};


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 mapOptions = {

zoom: 4,

center: myLatlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

}


mapOptions);


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;


var mapOptions = {

zoom: 13,

mapTypeId: google.maps.MapTypeId.ROADMAP,

center: stockholm

};

map = new google.maps.Map(document.getElementById("map_canvas"),

mapOptions);


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:



var mapOptions = {

zoom: 4,

center: myLatlng,


}


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.


var mapOptions = {

zoom: 10,

center: new google.maps.LatLng(-33.9, 151.2),


}


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.

*/

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.


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):

zoom: 7,

center: chicago,


};

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.


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 lineSymbol = {

path: 'M 0,-1 0,1',

strokeOpacity: 1,

scale: 4

};



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 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

};



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;


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:


var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);

var mapOptions = {

zoom: 5,

center: myLatLng,


};

var bermudaTriangle;


mapOptions);

var triangleCoords = [




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,


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;



var mapOptions = {

zoom: 5,

center: myLatLng,


};

var bermudaTriangle;

map = new google.maps.Map(document.getElementById("map_canvas"),

mapOptions);

var triangleCoords = [



new google.maps.LatLng(32.321384, -64.75737)

];

bermudaTriangle = new google.maps.Polygon({

paths: triangleCoords,


strokeOpacity: 0.8,

strokeWeight: 3,


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'] = {


population: 8143197

};

citymap['losangeles'] = {


population: 3844829

}

var cityCircle;


var mapOptions = {

zoom: 4,



};


mapOptions);

for (var city in citymap) {

// Construct the circle for each value in citymap. We scale population by

20.

var populationOptions = {


strokeOpacity: 0.8,

strokeWeight: 2,


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':


var coachella = new google.maps.LatLng(33.6803003, -116.173894);

var rectangle;

var mapOptions = {

zoom: 11,

center: coachella,


};


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 = {


strokeOpacity: 0.8,

strokeWeight: 2,


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:


drawingControl: false

});

// To show:


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 mapOptions = {

zoom: 4,

center: myLatlng,


}


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

});


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,


}


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;



var mapOptions = {

zoom: 11,

center: myLatLng,

mapTypeId: google.maps.MapTypeId.SATELLITE

};


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.

Google

Condiciones de servicio

Poltica de privacidad

Descripción General de Las Superposiciones

Documents

ms informacin

tipos de superposiciones

forma de superposiciones

capas de mapa

ventana de informacin

objetos de tipo marker

tipo de superposicin

new google