Podemos dibujar objetos en el mapa y se unen a una latitud y longitud deseada.Estos son llamados superposiciones. Google Maps ofrece varias superposiciones, como se muestra a continuación.
- Marcadores
- Polilíneas
- Polígonos
- Círculo y el rectángulo
- Ventana de información
- Símbolos
Para marcar una sola ubicación en el mapa, Google Maps ofrece marcadores.Estos marcadores utilizan un símbolo estándar y estos símbolos se pueden personalizar. En este capítulo se explica cómo añadir marcadores y cómo personalizar, animado, y eliminarlos.
Adición de un marcador simple
Usted puede agregar un marcador sencillo al mapa en un lugar deseado por crear instancias de la clase marcador y especificando la posición a marcar usando latlng, como se muestra a continuación.
var marker = new google.maps.Marker({
position: new google.maps.LatLng(19.373341, 78.662109),
map: map,
});
Ejemplo
El código siguiente establece el marcador en la ciudad de Hyderabad (India).
<!DOCTYPE html>
<html>
<head>
<script src = "http://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(19.373341, 78.662109),
zoom:7
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(17.088291, 78.442383),
map: map,
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>
Se produce la siguiente salida -
Animando el Marcador
Después de añadir un marcador para el mapa, se puede ir más allá y agregar animaciones a ella como rebote y gota. El siguiente fragmento de código muestra cómo agregar rebote y soltar animaciones a un marcador.
//To make the marker bounce`
animation:google.maps.Animation.BOUNCE
//To make the marker drop
animation:google.maps.Animation.Drop
Ejemplo
El código siguiente establece el marcador en la ciudad de Hyderabad, con un efecto de animación añadido -
<!DOCTYPE html>
<html>
<head>
<script src = "http://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.377631, 78.478603),
zoom:5
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(17.377631, 78.478603),
map: map,
animation:google.maps.Animation.Drop
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>
Se produce la siguiente salida -
Personalización del Marcador
Usted puede utilizar sus propios iconos en lugar del icono por defecto proporcionada por Google Maps. Sólo tienes que configurar el icono comoicono: 'CAMINO DEL ICONO'. Y usted puede hacer este icono arrastrable estableciendo arrastrable: true.
Ejemplo
El siguiente ejemplo muestra cómo personalizar el marcador a un icono deseado -
<!DOCTYPE html>
<html>
<head>
<script src = "http://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.377631, 78.478603),
zoom:5
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(17.377631, 78.478603),
map: map,
draggable:true,
icon:'/scripts/img/logo-footer.png'
});
marker.setMap(map);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>
Se produce la siguiente salida -
Extracción del Marcador
Puede eliminar un marcador existente estableciendo el marcador en nulo con elmarker.setMap () método.
Ejemplo
El siguiente ejemplo muestra cómo quitar el marcador de un mapa -
<!DOCTYPE html>
<html>
<head>
<script src = "http://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.377631, 78.478603),
zoom:5
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(17.377631, 78.478603),
map: map,
animation:google.maps.Animation.Drop
});
marker.setMap(null);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>
Se produce la siguiente salida -
No hay comentarios.:
Publicar un comentario