Google maps básico II (marcadores)

Publicado por Quanticbyte en 20 octubre, 2014

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):

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

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:
mapa con marcador
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:

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