Google Maps

Agregar un marcador en Google Maps

Google Maps - Superposiciones

Las superposiciones son objetos vinculados a coordenadas de latitud/longitud en el mapa, que se mueven al arrastrar o hacer zoom en el mapa.

La API de Google Maps tiene los siguientes tipos de superposiciones:

  • Los puntos en el mapa se muestran con marcadores, que normalmente muestran iconos personalizados. Los marcadores son objetos del tipo GMarker y pueden utilizar objetos del tipo GIcon para personalizar los iconos.
  • Las líneas en el mapa se muestran mediante polilíneas (que representan un conjunto de puntos). Las líneas son objetos del tipo GPolyline.
  • Las áreas en el mapa se muestran como polígonos (si son áreas de forma arbitraria) o como superposiciones de suelo (si son áreas rectangulares). Los polígonos son similares a las polilíneas cerradas, por lo que pueden tener cualquier forma. Las superposiciones de suelo se utilizan normalmente para áreas que tienen una relación directa o indirecta con las teselas del mapa.
  • El mapa en sí se muestra mediante superposiciones de teselas. Si dispone de su propia serie de teselas, puede utilizar la clase GTileLayerOverlay para modificar las teselas existentes en el mapa, e incluso puede utilizar GMapType para crear su propio tipo de mapa.
  • La ventana de información también es una superposición especial. Sin embargo, tenga en cuenta que la ventana de información se agrega automáticamente al mapa, y el mapa solo puede agregar un objeto del tipo GInfoWindow.

Google Maps - Agregar marcadores

Los marcadores identifican puntos en el mapa. De forma predeterminada, utilizan G_DEFAULT_ICON (también puede especificar un icono personalizado). El constructor GMarker recibe como parámetros un objeto GLatLng y un objeto GMarkerOptions (opcional).

Los marcadores están diseñados para ser interactivos. Por ejemplo, de forma predeterminada reciben el evento "click", que se utiliza a menudo para abrir una ventana de información en un detector de eventos.

Agregue un marcador al mapa mediante el método setMap():

Ejemplo

var marker=new google.maps.Marker({ position:myCenter, }); marker.setMap(map);

Pruébalo »

Google Maps - Marcadores arrastrables

El siguiente ejemplo muestra cómo utilizar la propiedad animation para arrastrar marcadores:

Ejemplo

marker=new google.maps.Marker({ position:myCenter, animation:google.maps.Animation.BOUNCE }); marker.setMap(map);

Pruébalo »

Google Maps - Iconos

Los marcadores se pueden mostrar con nuevos iconos personalizados en lugar del icono predeterminado:

Ejemplo

var marker=new google.maps.Marker({ position:myCenter, icon:'pinkball.png' }); marker.setMap(map);

Pruébalo »

Google Maps - Polilíneas

El objeto GPolyline puede crear superposiciones lineales en el mapa. GPolyline incluye una serie de puntos y crea una serie de segmentos de línea que los conectan ordenadamente.

Las polilíneas admiten las siguientes propiedades:

  • path: especifica las coordenadas de latitud/longitud de varias líneas
  • strokeColor: especifica el valor de color hexadecimal de la línea (formato: "#FFFFFF")
  • strokeOpacity: especifica la opacidad de la línea (el valor es de 0.0 a 1.0)
  • strokeWeight: define el ancho de la línea, en píxeles.
  • editable: define si el usuario puede editar la línea (true/false)

Ejemplo

var myTrip = [stavanger,amsterdam,london]; var flightPath = new google.maps.Polyline({ path:myTrip, strokeColor:"#0000FF", strokeOpacity:0.8, strokeWeight:2 });

Pruébalo »

Google Maps - Polígonos

El objeto GPolygon es similar al objeto GPolyline, ya que ambos incluyen una serie de puntos ordenados. Sin embargo, a diferencia de las polilíneas, los polígonos no tienen dos extremos, sino que están diseñados para definir áreas que forman un bucle cerrado.

Al igual que con las polilíneas, puede personalizar el color, el grosor y la opacidad de los bordes (líneas) del polígono, así como el color y la opacidad del área de relleno cerrada. Los colores deben ser números hexadecimales en estilo HTML.

Los polígonos admiten las siguientes propiedades:

  • path: especifica las coordenadas de latitud de varias líneas (la primera y la última coordenada son iguales)
  • strokeColor: especifica el valor de color hexadecimal de la línea (formato: "#FFFFFF")
  • strokeOpacity: especifica la opacidad de la línea (el valor es de 0.0 a 1.0)
  • strokeWeight: define el ancho de la línea, en píxeles.
  • fillColor: especifica el valor de color hexadecimal del área cerrada (formato: "#FFFFFF")
  • fillOpacity: especifica la opacidad del color de relleno (el valor es de 0.0 a 1.0)
  • editable: define si el usuario puede editar la línea (true/false)

Ejemplo

var myTrip = [stavanger,amsterdam,london,stavanger]; var flightPath = new google.maps.Polygon({ path:myTrip, strokeColor:"#0000FF", strokeOpacity:0.8, strokeWeight:2, fillColor:"#0000FF", fillOpacity:0.4 });

Pruébalo »

Google Maps - Círculos

Los círculos admiten las siguientes propiedades:

  • center: especifica el parámetro del punto central del círculo google.maps.LatLng
  • radius: especifica el radio del círculo, en metros
  • strokeColor: especifica el valor de color hexadecimal del arco (formato: "#FFFFFF")
  • strokeOpacity: especifica la opacidad del arco (el valor es de 0.0 a 1.0)
  • strokeWeight: define el ancho de la línea, en píxeles.
  • fillColor: especifica el valor de relleno de color hexadecimal del círculo (formato: "#FFFFFF")
  • fillOpacity: especifica la opacidad del color de relleno (el valor es de 0.0 a 1.0)
  • Define si el usuario puede editar la línea (true/false)

Ejemplo

var myCity = new google.maps.Circle({ center:amsterdam, radius:20000, strokeColor:"#0000FF", strokeOpacity:0.8, strokeWeight:2, fillColor:"#0000FF", fillOpacity:0.4 });

Pruébalo »

Google Maps - Ventanas de información

Mostrar una ventana de información de texto en un marcador:

Ejemplo

var infowindow = new google.maps.InfoWindow({ content:"Hello World!" }); infowindow.open(map,marker);

Pruébalo »

Google Maps - Manual de referencia de superposiciones

Manual de referencia de la API de Google Maps.

Otras extensiones