Además de marcadores, polígonos, polilíneas y otras formas geométricas, también podemos añadir imágenes vectoriales predefinidos (símbolos) en un mapa. En este capítulo se explica cómo utilizar los símbolos proporcionados por Google Maps.
Adición de un símbolo
Google ofrece varias imágenes basadas en vectores (símbolos) que se pueden utilizar en un marcador o una polilínea. Al igual que otras superposiciones, para dibujar estos símbolos predefinidos en el mapa, tenemos que crear una instancia de sus respectivas clases. A continuación hay una lista de símbolos predefinidos proporcionadas por Google y sus nombres de clase -
- Círculo - google.maps.SymbolPath.CIRCLE
- Backward Señalando flecha (cerrado) - google.maps.SymbolPath.BACKWARD_CLOSED_ARROW
- Adelante flecha apuntando (cerrado) - google.maps.SymbolPath.FORWARD_CLOSED_ARROW
- Adelante Señalando flecha (abierto) - google.maps.SymbolPath.CIRCLE
- Backward Señalando flecha (abierto) - google.maps.SymbolPath.CIRCLE
Estos símbolos tienen las siguientes propiedades - camino, fillColor, fillOpacity, escala, stokeColor, strokeOpacity y strokeWeight.
Ejemplo
El siguiente ejemplo muestra cómo dibujar símbolos predefinidos en Google Map.
<!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.433053, 78.412172),
zoom:5
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: {
path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
scale: 5,
strokeWeight:2,
strokeColor:"#B40404"
},
draggable:true,
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 Símbolo
Al igual que los marcadores, puede agregar animaciones tales como rebote y soltar a los símbolos también.
Ejemplo
El siguiente ejemplo muestra cómo utilizar un símbolo como un marcador en un mapa y añadir animación a la misma -
<!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.433053, 78.412172),
zoom:5
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: {
path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
scale: 5,
strokeWeight:2,
strokeColor:"#B40404"
},
animation:google.maps.Animation.DROP,
draggable:true,
map: map
});
}
</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