Añadir un marcador para el mapa de Google:
Google Maps - Superposiciones
Las superposiciones son objetos en el mapa que se unen a la latitud coordenadas / longitud.
Google Maps tiene varios tipos de superposiciones:
- Marcador - ubicaciones individuales en un mapa. Los marcadores también pueden mostrar imágenes de iconos personalizados
- Polilínea - Una serie de líneas rectas en un mapa
- Polígono - Una serie de líneas rectas en un mapa, y la forma es "cerrada"
- Círculo y rectángulo
- Las ventanas de información - Muestra el contenido dentro de un globo emergente en la parte superior de un mapa
- superposiciones personalizadas
Google Maps - Añade un marcador
El constructor de marcador crea un marcador. (Tenga en cuenta que la propiedad de posición se debe establecer para el marcador para mostrar).
Añadir el marcador para el mapa utilizando el setMap() Método:
Ejemplo
var marker=new google.maps.Marker({
position:myCenter,
});
marker.setMap(map); Inténtalo tú mismo " Google Maps - animar el marcador
El siguiente ejemplo muestra cómo animar el marcador con la propiedad de animación:
Ejemplo
var
marker=new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map); Inténtalo tú mismo " Google Mapas - icono en lugar de Marker
El ejemplo siguiente especifica una imagen (icon) para usar en lugar del marcador por defecto:
Ejemplo
var marker=new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});
marker.setMap(map); Inténtalo tú mismo " Google Maps - Polilínea
Una polilínea es una línea que se dibuja a través de una serie de coordenadas en una secuencia ordenada.
Una polilínea es compatible con las siguientes propiedades:
- ruta - especifica varios latitud / longitud coordenadas de la línea
- strokeColor - especifica un color hexadecimal para la línea (format: "#FFFFFF")
- strokeOpacity - especifica la opacidad de la línea (un valor entre 0,0 y 1,0)
- strokeWeight - especifica el grosor del trazo de la línea en píxeles
- editable - Define si la línea es editable por los usuarios (true/false)
Ejemplo
var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
}); Inténtalo tú mismo " Google Maps - Polygon
Un polígono es similar a una polilínea porque consiste de una serie de coordenadas en una secuencia ordenada. Sin embargo, los polígonos están diseñados para definir las regiones dentro de un bucle cerrado.
Los polígonos se hacen de líneas rectas, y la forma es "closed" (todas las líneas conectan hacia arriba).
Un polígono es compatible con las siguientes propiedades:
- ruta - especifica varios LatLng coordenadas de la línea (nombre y apellido de coordenadas son iguales)
- strokeColor - especifica un color hexadecimal para la línea (format: "#FFFFFF")
- strokeOpacity - especifica la opacidad de la línea (un valor entre 0,0 y 1,0)
- strokeWeight - especifica el grosor del trazo de la línea en píxeles
- fillColor - especifica un color hexadecimal para el área de la región delimitada (format: "#FFFFFF")
- fillOpacity - especifica la opacidad del color de relleno (un valor entre 0,0 y 1,0)
- editable - Define si la línea es editable por los usuarios (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
}); Inténtalo tú mismo " Google Maps - círculo
Un círculo es compatible con las siguientes propiedades:
- centro - especifica el google.maps.LatLng del centro del círculo
- radio - especifica el radio del círculo, en metros
- strokeColor - especifica un color hexadecimal para la línea alrededor del círculo (format: "#FFFFFF")
- strokeOpacity - especifica la opacidad del color del trazo (un valor entre 0,0 y 1,0)
- strokeWeight - especifica el grosor del trazo de la línea en píxeles
- fillColor - especifica un color hexadecimal para el área dentro del círculo (format: "#FFFFFF")
- fillOpacity - especifica la opacidad del color de relleno (un valor entre 0,0 y 1,0)
- editable - Define si el círculo es editable por los usuarios (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
}); Inténtalo tú mismo " Google Maps - InfoWindow
Mostrará una ventana de información con un cierto contenido de texto de un marcador:
Ejemplo
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker); Inténtalo tú mismo " Google Maps - Referencia de superposiciones
Google Maps API de referencia .