Poniendo marcadores.
Una de las cosas que nos interesa en los mapas son los marcadores para mostrar donde está cierta tienda, lugar, etc.
Hoy vamos a crear un marcador en nuestro mapa.
Teníamos la función que nos generaba el mapa (he quitado los controles):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
window.onload = function(){ var options = { zoom: 13, center: new google.maps.LatLng(41.973174, 2.818134), mapTypeId: google.maps.MapTypeId.SATELLITE, panControl: false, zoomControl: false, mapTypeControl: false, scaleControl: false, streetViewControl: false, overviewMapControl: false }; var map = new google.maps.Map(document.getElementById('map'), options); var marcador = new google.maps.Marker({ position: new google.maps.LatLng(41.973174, 2.818134), map: map, title: "Nuestro primer marcador", animation: google.maps.Animation.DROP }); }; |
Los marcadores se generan con google.maps.Marker al cual le pasamos los parámetros del marcador a crear:
- position: donde nos señalará el marcador.
- map: en qué mapa se señalará dicho marcador (¿os acordáis que guardamos el identificador del mapa en la variable map? ¡Pues a ese!).
- title: (no es obligatorio) un título para cuando tengamos (o pongamos?) el cursor sobre el marcador.
- animation: (no es obligatorio) animación del marcador.
DROP: al crearse el marcador cae desde arriba.
BOUNCE: el marcador da saltitos 🙂 ¡marea!
El resultado:
Tenemos el marcador colocado en nuestro mapa.
Antes de acabar, hablaremos un poco de LatLng, latitud (Lat) y longitud (Lng)
También podríamos definir la posición tanto del mapa como del marcador de esta otra manera:
Position: {lat: 41.973174, lng: 2.818134 }
Lo que hacemos es crear un objeto LatLng, pero esto google nos lo hace directamente con coordenada = new google.maps.LatLng(41.973174, 2.818134),
De esta manera tenemos en coordenada el objeto LatLng y de el podemos extraer la Lat y la Lng.
var Lat_coordenada = coordenada.lat();
var Lng_coordenada = coordenada.lng();
En google maps, con 6 cifras tenemos una precisión de 0,1metros; google maps no es realmente adecuado para un posicionamiento más preciso.
Pues bien, si tenemos una Lat de 2.1234567890 y queremos bajar a 6 los decimales para guardarla en una DB o para operar, se efectúa de la siguiente manera:
1 2 3 4 |
var numero = 2.1234567890; numero = numero.toFixed(6); // numero = 2.123457 redondea el ultimo 6 var numero2 = 3.4; numero2 = numero2.toFixed(6); // numero = 3.400000 |
Sé el primero en comentar