Google Maps el servicio para visualizar mapas es uno de los mas populares y que nos permite insertar estos mapas en nuestra Web, veremos dos formas de incluir el mapa que deseamos en nuestro sitio web.
Formas Básica
La forma mas sencilla es primero acceder a Google Maps, explorar los mapas hasta ubicar el que deseamos incluir, luego de ello en la parte superior derecha hay un enlace llamado Enlazar con esta página (link to this page en ingles), aparecerán dos formas de enlazar de las cuales seleccionamos la segunda.
Este código es un ifframe que nos permite incluir un mapa en donde se nota que los dos primeros parámetros son el ancho y el alto del mapa el cual podemos modificar de acuerdo a nuestras necesidades.
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8& ll=-12.097738,-76.991501&spn=0.074693,0.11673&z=13& om=1&output=embed&s=AARTsJqzARj-Z8VnW5pkPMLMmZbqrJcYpw"> </iframe>
Nótese que en este código estan las coordenadas del mapa a incluir en la variable ll (en nuestro caso -12.097738,-76.991501), esto es importante y lo utilizaremos mas adelante, además hay que notar que hemos puesto el código en varias líneas para facilitar la lectura, pero esto debe estar escrito en una sola línea. Esto código lo insertamos en nuestro html y ya tenemos el mapa deseado.
Forma Avanzada
Si deseamos personalizar al detalle el mapa que deseamos insertar podemos utilizar Google Maps API el cual nos permite interactuar y personalizar los mapas. Lo primero que hacemos para ello es registrarnos para obtener un código de acceso gratuito a esta API. Para ello debemos ingresar el URL del web en donde deseamos incluir el mapa.
Una vez que tenemos el código, procedemos a incluir los mapas, para ello lo primero es crear un DIV en nuestro html con las dimensiones que deseamos y le asignamos un nombre, por ejemplo creamos un DIV de 500×300 pixels y lo llamamos map.
<div id="map" style="width:500px; height:300px"></div>
El siguiente paso es incluir el archivo Javascript externo que contiene las funciones necesarias para el funcionamiento de estos mapas.
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=code"> </script>
Donde se tiene que code es el código generado anteriormente para acceder al API. El siguiente paso es la inclusión del código que inserta el mapa propiamente. aquí utilizamos el método setCenter en donde pasamos como parámetro las coordenadas del mapa (el cual identificamos en el primer ejemplo) y además el nivel del Zoom que deseamos (en nuestro caso 15).
Luego ejecutamos esta función creada en el evento onLoad, unimos las partes de nuestro código y obtenemos nuestro mapa.
<html>
<head>
<title>Google Maps API</title>
<script type="text/javascript"
src="http://maps.google.com/maps?file=api&v=2&key=code">
</script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(-12.119516,-77.030168), 15);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<h5>Google Maps by unijimpe</h5>
<div id="map" style="width:500px; height:300px"></div>
</body>
</html>
Pueden ver el resultado de este ejemplo en gmaps.html, como se puede ver es un mapa sencillo sin controles ni opciones, si deseamos por ejemplo colocar los controles para el zoom, agregamos el método GSmallMapControl() de la siguiente forma:
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(-12.119516,-77.030168), 15);
}
}
Haciendo los cambios obtenemos el siguiente resultado gmaps-zoom.html el cual incluye los controles de acercamiento al mapa.
Así como este cambio podemos personalizar estos mapas de múltiples formas, para ello hay una documentación muy detallada del uso de las propiedades y métodos disponible de esta API.
Comentarios Total 15 comentarios
Publicado: 10/01/2008 3:52 am
Muchas gracias es una exposición muy clara y sencilla.Salud.
Publicado: 10/01/2008 3:54 am
[…] UNIJIMPE después de mencionar que Google Maps es uno de los servicio mas populares para visualizar […]
Publicado: 20/01/2008 2:00 pm
la ubicacion de mis negocios
quiero la ubicacion de Canelones un uruguay
Publicado: 31/01/2008 2:52 pm
Veo que en lugares como Estados unidos marco desde aqui hasta aqui y me establece una ruta perfecta en color morado y la distancia entre ambos puntos lo trato de hacer en mi pais (Costa Rica) y solo me pone unos numeros de latitudes. ejemplo No hemos podido calcular la distancia para dirigirte de 10.044585, -84.306335 a 10.100022,-83.982239 en coche. porque pasa esto? que es lo que hay que poner para que se marquen las rutas
Publicado: 16/04/2008 3:59 pm
Hola, sabes de algun hack para poder visualizar los google maps correctamente en ie.
Gracias.
http://www.lasmovies.com/blog
Publicado: 16/04/2008 10:54 pm
Si quieres hacerlo totalmente compatible lo puedes hacer incluyendo los mapas embebidos en Flash, para ellos puedes leer: http://blog.unijimpe.net/google-maps-en-flash/
Publicado: 10/02/2009 7:15 am
Excelentes código para implementar google maps en sitios web:
http://www.rincondelcodigo.com/favicons.php?q=google
Publicado: 11/07/2009 12:49 pm
Tengo una duda. como puedo hacerle para enviarle como parametro una CADENA, osea que le envie la direccion del lugar a localizar.
??
gracias! muy buen aporte!
Publicado: 12/09/2009 1:19 pm
Sabéis si existe algún plugin para WordPress.
Publicado: 25/11/2009 3:10 am
Muy bueno el documento.
Rápido y sencillo, no esperaba poner el mapa tan rapidamente, gracias.
Publicado: 22/01/2010 3:52 pm
Fenomeno, es justo lo que estaba buscando, muchas gracias
Publicado: 24/03/2010 2:28 pm
[…] ejemplo si mostramos los resultados de la búsqueda en un mapa, para ello basados en el ejemplo Google Maps en tu Web creamos una instancia de nuestro mapa centrado en la latitud y longitud recién obtenidas, ademas […]
Publicado: 15/05/2010 3:56 pm
Muchas gracias, fue la explicación más clara y sencilla que encontré.
Ahora si pude insertar un mapa en mi web!
Saludos
Publicado: 09/08/2010 3:55 pm
Muy buenos articulo ando tratando de insertar un mapa en una web, voy a seguir algunos de tus consejos
Publicado: 19/02/2011 1:32 pm
Hola, estoy realizando una página web para una empresa que tiene varias sedes a lo largo del país (cinco, en concreto) y me gustaría saber si puedo crear un googlemap en el que aparezcan sólo esas ciudades para que luego el usuario elije la que más le conviene.
gracias