Insertar una marca en un mapa de Google

  • Por
Cómo insertar una marca en un mapa de Google maps, para señalar un lugar del mapa.
Veamos rápidamente cómo insertar una marca en un mapa de Google, que nos sirve para señalar un punto preciso en un mapa. Es un paso muy sencillo pero importante en el manejo del API de Google Maps.

Este artículo está englobado dentro del manual de manejo del API de los mapas de Google, por lo que muchas explicaciones nos las vamos a saltar porque ya las hemos presentado en artículos anteriores.

Para insertar marcas tenemos un método, también de la clase GMap2, que sirve para insertar un elemento sobre el mapa. El método en concreto se llama addOverlay() y recibe como parámetro la marca que se quiere insetar.

map.addOverlay(marker);

En el código anterior el objeto map sería una instancia de la clase GMap2. La variable marker contendrá la marca que se quiere insertar en el mapa.

Ahora veamos como crear la marca. Lo explicaremos en dos pasos.

1) Creamos un punto
La marca debe situarse en un punto concreto del mapa, que se define por una longitud y una latitud (coordenadas x, y en el plano terrestre). Para crear un punto se tiene que utilizar la clase GPoint, que recibe en el constructor la longitud y latitud de ese punto.

var point = new GPoint (-3.7034815549850464, 40.41689826118782);

2) Creamos la marca
Para crear la marca simplemente utilizamos la clase GMarker, que en su constructor debe recibir varios valores. Por ahora colocaremos sólo el único valor que es obligado indicar, que es el punto sobre el que colocar la marca, creado en el paso anterior.

var marker = new GMarker(point);

Ejemplo completo

Eso es todo lo que necesitamos saber por ahora. Aunque luego veremos otros detalles de interés que se pueden personalizar en las marcas.

Veamos el código completo de un mapa de Google con una marca en la plaza "Puerta del Sol" de Madrid.

<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
<title>Ejemplo de Google Maps API</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=AQUI-TU-CLAVE-GOOGLE-MAPS" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
   if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("map"));   
      map.setCenter(new GLatLng(40.41689826118782,-3.7034815549850464), 17);   
      map.addControl(new GLargeMapControl());
      map.setMapType(G_SATELLITE_MAP);
   
      var point = new GPoint (-3.7034815549850464, 40.41689826118782);
      var marker = new GMarker(point);
      map.addOverlay(marker);
   }
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 615px; height: 400px"></div>
</body>
</html>


Cambiar el icono a una marca

La marca se crea con un icono por defecto, como una especie de chincheta roja, pero podemos cambiarlo para personalizar el estilo de nuestros mapas.

Vamos a ver aquí como asociar un icono a una marca, cuando la instanciamos a partir de su constructor.

El constructor de la marca recibe dos parámetros, el primero obligado es el punto geográfico y el otro es el icono, que es opcional. En caso que no se especifique un icono se utiliza el G_DEFAULT_ICON, que es una constante del API que contiene el icono por defecto.

var marker = new GMarker(point, miIcono);

la variable miIcono en este caso es un objeto de la clase GIcon, que puede crear así:

var miIcono = new GIcon(G_DEFAULT_ICON);
miIcono.image = "http://www.midominio.org/mapas-google/arrow_down.png";


En este caso, con la primera sentencia se crea un nuevo icono, a partir de G_DEFAULT_ICON. Es decir, un icono nuevo pero con todas las carácterísticas cargadas del G_DEFAULT_ICON.

En la siguiente línea se modifica la imagen del icono, asignando un nuevo valor a su atributo image.

Habría que hablar más sobre la creación y modificación de iconos, porque es un tema que requiere mayor detenimiento para dominarlo, pero lo dejaremos para más adelante.

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Ainhoa

25/3/2009
De lujo el manual, enhorabuena. He visto marcas que tienen lo de Cómo llegar: Hasta aquí - Desde aquí,Buscar cerca de ¿hay que pagar para poder ponerlas? Un cordial saludo,

Edgar Baiz

16/7/2010
No puedo insertar una marca
Hola muy bien tu articulo al copiar tu ejemplo todo bien pero al crear el mio no sale la marca mepodrias ayudar? la direccion del punto exacto es Av Reforma 2114 puebla puebla c.p 7200 en Mexico gracias.

Raul

17/8/2010
google maps
he realizado todos los pasos indicados en el tutorial, incluyendo la clave para el sitio de dominio de la pagina donde esta colocado, pero no he podido resolver el problema de mostrar en la latitud y longitud deseada una marca, podrian indicarme donde podria estar mi falla?..gracias.

Este es el codigo utilizado

//<![CDATA[

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));

map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
map.setCenter(new GLatLng(-23.435514, -58.603516), 6);
map.setMapType(G_HYBRID_TYPE);
function addtag(point, address) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(address); } );
return marker;
}
var point = new GLatLng(-25.000514,-57.5);
var address = '<b>86218</b><br/><i>Asunción</i><br/><a href="http://www.centrodemadagascar.com">218</a>';
var marker = addtag(point, address);
map.addOverlay(marker);
}
}
//]]>

Eduardo

10/12/2011
Insertar una marca en un mapa de Google
Me pareció interesante el artículo, pero me hubiese gustado que haya una imagen como ejemplo para visualizar el procedimiento.

Saludos Cordiales