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.
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.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...