Crear marcadores en Google Maps con la API

Otra de las cosas muy interesantes que nos permite la API de google maps es poder utilizar los marcadores que queramos y situarlos a nuestro antojo dentro de un mismo mapa. Incluso podemos vincular este marcador con una url de tal modo que al hacer click sobre él nos lleve a otro contenido dentro de Internet.

Obtener la capa y asignarle al objeto “mapa”

En un principio deberás tener colocada dentro de tu página una capa vacía donde querrás ubicar el mapa. Lo normal será rellenar el mapa en el momento que carguemos la página.

...

<div id="map_canvas"></div>

...

Con jquery podemos utlizar el evento onload de la ventana para realizar todas las operaciones del mapa.

window.onload = function ()  

//Creamos las opciones que estarán asignadas al mapa

var options = 
 mapTypeControlOptions: 
 mapTypeIds: ['Styled']
 ,
 center: new google.maps.LatLng(39.644024, -3.185656),
 zoom: 5,
 disableDefaultUI: true,
 mapTypeId: 'Styled'
 ;
 var div = document.getElementById('map_canvas');  //En esta línea obtenemos la capa donde se ubicará nuestro mapa

//Creamos el objeto mapa de google con las opciones y asignamos la capa div html
 var map = new google.maps.Map(div, options); 

 

Cómo crear el marcador

Para crear un marcador es necesario dos objetos de google que son:

• google.maps.Marker, será el propio marcador.


• google.maps.LatLng, objeto que representa las coordenadas dentro del mapa.

Primero creamos un objeto LatLng , en él fijaremos la longitud y latitud del marcador.

var gijon = new google.maps.LatLng(43.532362, -5.661588);

Posteriormente creamos el marcador:

var marker_gijon = new google.maps.Marker(
 position: gijon,
 url: '/sedes/sede-gijon/',
 title: 'Gijón',
 map: map
 );

En este punto podemos ver en la propiedad “position” le asignamos la variable de tipo LatLng establecido previamente.

Title, será la cadena que se mostrará al pasar el ratón por encima.

Y “map” es el objeto mapa creado anteriormente.

La propiedad url no existe como tal en el objeto de google marker pero la creamos nosotros para establecer la dirección a la que se dirigirá posteriormente.

Para tratar esta dirección podemos utilizar el siguiente código:

google.maps.event.addListener(marker_gijon, 'click', function() 
window.location.href = marker_gijon.url;
);

Este ha sido un pequeño tutorial para crear marcadores en Google Maps con la API. Seguro que existen más posibilidades pero esto es solo una manera sencilla de empezar.

Crear marcadores en Google Maps con la API