Incluir una marca en Google Maps

Cuando trabajemos con los mapas de Google Maps, una vez que hayamos ubicado un sitio una de las primeras cosas que querremos hacer es añadir una marca dentro del mapa. Vamos a ver qué pasos hay que seguir.

Cargar Google Maps

Lo primero como en todo ejemplo de Google Maps será el cargar el mapa. Recuerda la forma en la que cargamos la librería de Google Maps para la versión 3.

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

Y acto seguido inicializar el mapa sobre una capa:

var myLatlng = new google.maps.LatLng(40.65599461,-4.69373720);
var mapOptions = {
  zoom: 12,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

Vemos que el primer parámetro del objeto Map es el ID de la capa en la que cargaremos el mapa y el segundo son las opciones de configuración del mapa.

Crear la marca con Marker

Ahora vamos a incluir nuestra marca. Lo primero que tenemos que saber es que la marca se representa mediante el objeto Marker. Y que en el objeto de inicialización especificaremos, al menos:

• Las coordenadas de la marca que estarán representadas por un objeto LatLng. Como ya habíamos definido uno para el centro del mapa, vamos a reutilizarlo.
• El mapa sobre el cual queremos añadir la marca.
• La etiqueta que queremos que aparezca al pasar sobre la marca.

var marker = new google.maps.Marker({
  position: myLatlng,
  map: map,
  title:"Avila de los Caballeros"
});

Hay otras opciones que podemos indicar al crear el objeto Marker, como pueden ser: si queremos que se pueda hacer drag&drop de la marca, si queremos que la marca haga sombra,…

Así, simplemente creando la marca tenemos incluida nuestra marca dentro de un mapa de Google Maps.