Capas de Google Maps

Google Maps - Superposiciones

Las superposiciones son objetos en el mapa que se vinculan a coordenadas de latitud/longitud.

Google Maps tiene varios tipos de superposiciones:

• Marcador (Marker) - Una única ubicación en el mapa. El marcador también puede mostrar imágenes de iconos personalizados
• Línea de segmentos (Polyline) - Una serie de líneas en el mapa
• Polígono (Polygon) - Una serie de líneas en el mapa, con forma 'cerrada'
• Círculos y rectángulos (Circle y Rectangle)
• Ventanas de información (Info Windows) - Mostrar contenido en una burbuja emergente en la parte superior del mapa
• Superposiciones personalizadas (Custom overlays)

Google Maps - Agregar marcador

El constructor de Marcador puede crear un marcador. Tenga en cuenta que debe establecer la propiedad position para que el marcador se muestre.

Utilice el método setMap() para agregar el marcador al mapa:

instancia

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

Google Maps - Animación de marcador

El siguiente ejemplo muestra cómo se puede usar la propiedad animation para aplicar animación al marcador:

instancia

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

Google Maps - Reemplazar marcador con icono

El siguiente ejemplo especifica la imagen (icono) a usar en lugar del marcador predeterminado:

instancia

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

Google Maps - Lnea de segmentos

La lnea de segmentos se dibuja mediante una serie de coordenadas ordenadas.

La lnea de segmentos admite las siguientes propiedades:

• path - Determinar varios coordenaes de latitud/longitud de la lnea
• strokeColor - Especifica el color hexadecimal de la línea (formato: "#FFFFFF")
• strokeOpacity - Especifica la opacidad de la línea (valor entre 0.0 y 1.0)
• strokeWeight - Especifica el grosor de la línea del trazo (en píxeles)
• editable - Define si la línea puede ser editada por el usuario (true/false)

instancia

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

Google Maps - Polígono

El polígono es similar al polyline, compuesto por una serie de coordinates ordenadas. Sin embargo, el polígono está diseñado para definir el área interna cerrada.

El polígono está formado por líneas rectas y tiene una forma "cerrada" (todas las líneas se conectan).

El polígono admite las siguientes propiedades：

• path - Especifica varios coordenaes de latitud/longitud de la línea (el primer y último coordinate son iguales)
• strokeColor - Especifica el color hexadecimal de la línea (formato: "#FFFFFF")
• strokeOpacity - Especifica la opacidad de la línea (valor entre 0.0 y 1.0)
• strokeWeight - Especifica el grosor de la línea del trazo (en píxeles)
• fillColor - Especifica el color hexadecimal del área interna del polígono (formato: "#FFFFFF")
• fillOpacity - Especifica la opacidad del color de relleno (valor entre 0.0 y 1.0)
• editable - Define si la línea puede ser editada por el usuario (true/false)

instancia

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
});

Google Maps - Círculo

El círculo admite las siguientes propiedades：

• center - Especifica el google.maps.LatLng del centro
• radius - Especifica el radio del círculo en metros
• strokeColor - Especifica el color hexadecimal de la línea alrededor del círculo (formato: "#FFFFFF")
• strokeOpacity - Especifica la opacidad del color del trazo (valor entre 0.0 y 1.0)
• strokeWeight - Especifica el grosor de la línea del trazo (en píxeles)
• fillColor - Especifica el color hexadecimal del área interna del círculo (formato: "#FFFFFF")
• fillOpacity - Especifica la opacidad del color de relleno (valor entre 0.0 y 1.0)
• editable - Define si el usuario puede editar el círculo (true/false)

instancia

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

Google Maps - Ventana de información

para mostrar una ventana de información con contenido de texto en el marker：

instancia

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