Micaela 30 de Octubre de 2009 a las 09.02
   Imprimir artículo
elWebmaster.com

Insertar y personalizar Google Maps en tu sitio web

Internet, recursos, Google Maps, API, javascript, mapa, sitios web, embedded, insertar, personalizar

google-mapsEn los sitios web de una compañía a menudo se utilizan mapas para mostrarle a los clientes dónde los pueden encontrar. Para esto, Google Maps es excelente.

Pero ¿No sería genial añadir el logo de nuestra compañía, los estacionamientos cercanos, las estaciones de trenes, y otros datos alternativos en el mapa para ayudar más a los clientes?

Antes de empezar, veamos lo que vamos a crear:

Google Maps API

La API Google Maps te permite embeber mapas directamente en tu sitio web. Sólo se necesita un poco de JavaScript, y algo de CSS para embellecer. Recientemente ha sido lanzada la Version 3 de la API Google Maps que es la que vamos a utilizar.

Obteniendo las coordenadas

Como seguramente no conocen las coordenadas precisas de su locación, les explicaremos una forma rápida que Google ha puesto a nuestra disposición para conocerlas. Cuando conoces la dirección exacta, puedes ingresar una URL de esta forma:

PLAIN TEXT
  1. http://maps.google.com/maps/geo?q=1+Infinite Liip,+Cupertino,+CA+95014,+USA&output=csv&oe=utf8&sensor=false&key=your_google_maps_api_key

Cuando ingreses esto en tu barra de direcciones, verás lo siguiente:

apple_coordinates

Las coordenadas del cuartel general de Apple en Cupertino

El primer número es el código del estado en el que está el punto del mapa según Google, y 200 quiere decir que todo está bien. El segundo número muestra cuán precisa es la dirección, en este caso el número es 8, que es bastante bueno. Los últimos dos números son latitudes y longitudes, que son los números que necesitamos.

Añadiendo el mapa a tu web

Abre tu editor HTML favorito y crea un archivo HTML estándar con codificación UTF-8.

Primero que nada es necesario crear el puerto de visualización y decirle a nuestro archivo HTML que obtenga el archivo Javascript del código Google.

Añade estas líneas entre <head> y </head>:

PLAIN TEXT
  1. <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

Luego de la URL, notarás sensor=false. Dado que no utilizamos ningún sensor, como un GPS, para localizar el lugar, esto se programa en false. Justo debajo de lo que hemos insertado, escriban lo siguiente:

PLAIN TEXT
  1. <script type="text/javascript"><!--
  2.     function initialize() {
  3.         var latlng = new google.maps.LatLng(57.0442, 9.9116);
  4.         var settings = {
  5.             zoom: 15,
  6.             center: latlng,
  7.             mapTypeControl: true,
  8.             mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
  9.             navigationControl: true,
  10.             navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
  11.             mapTypeId: google.maps.MapTypeId.ROADMAP
  12.     };

En la línea 2 creamos la función initialize(). Dentro de esta function vamos a definir las configuraciones básicas del mapa. En la línea 3 creamos una nueva variable, latlng. latlng que representa las latitudes y longitudes. La variable contiene las coordenadas que utilizaremos como centro de nuestro mapa.

Luego de esto creamos la variable settings. Aquí tenemos muchas opciones.

  • zoom específica cuánto zoom tundra el mapa.
  • center específica nuestro centro. Al escribir latlng, nos referemos a la variable que hemos creado antes y se utilizará la coordenada dentro de ésta.

El último código cambia el diseño del mapa para que sea un poco más minimalista. Los controles en la esquina superior derecha (Map, Satellite, Terrain) se cambian por un menu desplegable y los controles de navegación/escalamiento en el lado izquierdo se cambiar por controles pequeños.

mapTypeId: google.maps.MapTypeId.ROADMAP define que nuestro mapa debe ser del tipo ROADMAP - lo puedes cambiar por SATELLITE, HYBRID o TERRAIN.

Debajo del código anterior, escriban esto:

PLAIN TEXT
  1. var map = new google.maps.Map(document.getElementById("map_canvas"), settings);

Este código crea la variable map, y define que el mapa debe utilizar las configuraciones que hemos creado.

Escriban:

PLAIN TEXT
  1. }
  2. </script>

Para terminar la función, y en body, escriban esto:

PLAIN TEXT
  1. <body onload="initialize()">
  2.   <div id="map_canvas" style="width:800px; height:500px"></div>
  3. </body>

Al hacer esto le decimos a nuestro sitio que ejecute la función the initialize() al cargar, y que inserte un div con el tamaño que deseamos que tenga nuestro mapa.

Añadiendo marcadores

Ahora debemos añadir algunos marcadores. Comencemos por crear los estándar y luego los personalizaremos.

Justo debajo de:

PLAIN TEXT
  1. var map = new google.maps.Map(document.getElementById("map_canvas"), settings);

Inserten el siguiente código:

PLAIN TEXT
  1. var companyPos = new google.maps.LatLng(57.0442, 9.9116);
  2.   var companyMarker = new google.maps.Marker({
  3.       position: companyPos,
  4.       map: map,
  5.       title:"Some title"
  6.   });

Primero, hemos creado la variable companyPos, donde especificamos la posición del marcador. Luego hemos creado al marcador en sí utilizando la variable companyMarker.

Personalizando los marcadores

Podemos hacer mucho más bonitos nuestros marcadores. Simplemente creemos una imagen en Photoshop con un tamaño de 100×50 píxeles, y creemos algo similar a esto:

logo

Luego, creemos una sombra para la imagen:

logo_shadow

Para añadir estas imágenes como marcadores, tenemos que cambiar el código del marcador por esto:

PLAIN TEXT
  1. var companyLogo = new google.maps.MarkerImage('images/logo.png',
  2.     new google.maps.Size(100,50),
  3.     new google.maps.Point(0,0),
  4.     new google.maps.Point(50,50)
  5. );
  6. var companyShadow = new google.maps.MarkerImage('images/logo_shadow.png',
  7.     new google.maps.Size(130,50),
  8.     new google.maps.Point(0,0),
  9.     new google.maps.Point(65, 50)
  10. );
  11. var companyPos = new google.maps.LatLng(57.0442, 9.9116);
  12. var companyMarker = new google.maps.Marker({
  13.     position: companyPos,
  14.     map: map,
  15.     icon: companyLogo,
  16.     shadow: companyShadow,
  17.     title:"Company Title"
  18. });

La variable companyImage apunta al nombre de la imagen del logo. Luego define el tamaño, origen y el tip de la imagen (dónde estará la imagen añadida a la coordenada). Luego, hacemos exactamente lo mismo para la sombra en la variable companyShadow. En la variable companyMarker añadimos icon y shadow, y listo.

Ahora, si actualizas tu sitio verás que el marcador ha cambiado por tu propio logo. Para añadir más marcadores, sigue simplemente el mismo método, cambiando los nombres de las variables.

Si tienes dos marcadores muy cerca el uno del otro, quizá debas agregar algo de z-index. El marcador con el z-index más alto, es el que más arriba está:

zindex

Añadir zIndex nos permite seleccionar qué marcador debe ir arriba.

PLAIN TEXT
  1. var companyMarker = new google.maps.Marker({
  2. position: companyPos,
  3. map: map,
  4. icon: companyImage,
  5. shadow: companyShadow,
  6. title:"Høgenhaug",
  7. zIndex: 4
  8. });

Añadiendo cajas de información

Para añadir una descripción de tu compañía que aparezca cuando un visitante hace clic en el logo podemos agregar un infobox. Con la API Google Maps esto es fácilisimo.

infobox

Peguemos este código luego de definir la variable map:

PLAIN TEXT
  1. var contentString = '<div id="content">'+
  2.     '<div id="siteNotice">'+
  3.     '</div>'+
  4.     '<h1 id="firstHeading" class="firstHeading">Høgenhaug</h1>'+
  5.     '<div id="bodyContent">'+
  6.     '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>'+
  7.     '</div>'+
  8.     '</div>';
  9.  
  10. var infowindow = new google.maps.InfoWindow({
  11.     content: contentString
  12. });

Para hacer que las cajas de información aparezcan al hacer clic en nuestro logo, simplemente debemos añadir este código justo antes del último } en la función initialize():

PLAIN TEXT
  1. google.maps.event.addListener(companyMarker, 'click', function() {
  2. infowindow.open(map,companyMarker);
  3. });

Para hacer un poco más bonita la caja de información, añadamos algo de estilo en nuestra hoja de estilos:

PLAIN TEXT
  1. body {
  2. font-family: Helvetica, Arial, sans-serif;
  3. font-size:10pt;
  4. }

Y ahí lo tienen. Un Google Map bonito y fácilmente añadido en tu sitio web o blog.

Descarga

Para descargar los archivos de muestra hagan clic aquí.

Fuente: Stiern

Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Artículos relacionados

Comentarios (17)

  1. Google Maps API - Personaliza tu mapa - Añade tu negocio a GOOGLE MAPS | Smultron POTENCIA !! dice:
    Martes, 3 de Noviembre de 2009 a las 21.49

    [...] Como seguramente no conocen las coordenadas precisas de su locación, les explicaremos una forma rápida que Google ha puesto a nuestra disposición para conocerlas. Cuando conoces la dirección exacta, puedes ingresar una URL de esta forma: PLAIN TEXT [...]

  2. Marcos Paez dice:
    Jueves, 5 de Noviembre de 2009 a las 12.22

    Buenísimo! Me sirve una montón. Gracias

  3. W@lter dice:
    Domingo, 8 de Noviembre de 2009 a las 12.31

    Muchas gracias por el aporte, ya lo estaré usando en algun que otro proyecto. Ahora me gustaría saber como hacer para que los usuarios puedan colocar un marcador y guardarlos para luego mostrarlos en el mapa. Saludos y quedo a la espera de alguna respuesta.

  4. Juanu dice:
    Sábado, 14 de Noviembre de 2009 a las 12.19

    Buenisimo! lo estoy aplicando a un sitio web, todo bárbaro hasta el momento. Una sola pregunta, a dónde puedo cambiar en vez de que sea mapa que sea satélite? Espero su respuesta, gracias!

  5. Alejandra dice:
    Lunes, 16 de Noviembre de 2009 a las 11.40

    Fíjate en el subtítulo "Añadiendo el mapa a tu web". Allí, en el segundo ejemplo de código, en la línea 11 dice:
    mapTypeId: google.maps.MapTypeId.ROADMAP

    ROADMAP es lo que indica que la vista va a ser de mapa. Puedes cambiarlo por SATELLITE, HYBRID o TERRAIN, según quieras. ¡Saludos!

  6. Juanu dice:
    Lunes, 16 de Noviembre de 2009 a las 19.18

    Gracias Alejandra! ahora pruebo :D

  7. Leon dice:
    Martes, 17 de Noviembre de 2009 a las 22.08

    Tengo mucha info en uno de las paginas, el div donde va el map está casi al pie de la pagina, como hago para colocarlo en el div? aplica lo mismo para la etiqueta ??? es que asi lo coloco y no aparece nada

    Agradezco respuesta
    saludos

  8. Alejandra dice:
    Jueves, 19 de Noviembre de 2009 a las 12.01

    Sinceramente no entiendo la consulta. Dices que el div donde va el map está casi al pie de página, y luego preguntas cómo haces para colocarlo en el div... ¿Para colocar qué y en qué div?
    Espero tu respuesta asi puedo ayudarte.

  9. José Nobile dice:
    Martes, 24 de Noviembre de 2009 a las 13.30

    Tengo un gran problema, la api de google no funciona para sitios xhtml 1.1 con mime application/xhtml+xml, pues usa docoument.write, y el metodo write no existe en el objeto document para xhtml 1.1, el bug ya esta reportado en la api, la unica solución en cargarla usando google.load, pero esta las carga por ajax, y requiere de una key, que no puedo pagar, pues lo necesito para una intranet.

    Alguien tenga un sitio con mime application/xhtml+xml y halla encontrado un fix/patch a esta api?

    Aqui esta reportado el issue:
    http://code.google.com/p/gmaps-api-issues/issues/detail?id=530

  10. Mr. Raymon dice:
    Martes, 15 de Diciembre de 2009 a las 08.55

    Quizas sea una pregunta tonta pero imagino que para implementar Google Maps API V3 sera necesario una cuenta de Google ¿o se puede hacer sin necesidad de una cuenta?

    Saludos y Gracias.

  11. Alejandra dice:
    Martes, 15 de Diciembre de 2009 a las 12.59

    No es necesario tener una cuenta en Google ;)

  12. Mr. Raymon dice:
    Martes, 15 de Diciembre de 2009 a las 20.43

    Entonces si se puede hacer ¿como se hace para añadir la direccion que quieres? En el tutorial no lo explica.

    Saludos y Gracias.

  13. Leon dice:
    Martes, 16 de Marzo de 2010 a las 23.58

    Gracias Alejandra, de hecho ya ni yo entendi lo que queria, creo que he aprendido mucho desde entonces. Saludos

  14. Ricardo dice:
    Martes, 20 de Abril de 2010 a las 19.14

    Muy my bueno, gracias

  15. Oliver dice:
    Jueves, 6 de Mayo de 2010 a las 19.39

    Hola alejandra, He visto que has contestado y dado algunas solcuiones. Estoy trabajando un mapad de spreadsheets. Me gustaria saber si es posible y como, se pueden poner URL diferentes en cada uno de los titulos de los globos.
    Muchas gracias!

  16. Rubix dice:
    Viernes, 16 de Julio de 2010 a las 06.14

    Genial! Super bien explicado y muy muy util!

  17. diego dice:
    Viernes, 13 de Agosto de 2010 a las 19.03

    puedes seguir haciendo tutoriales ??
    por ejemplo :
    Arrastrar un MARCADOR...y saber la cordenada
    o
    escribir en una ventana y mostrarla en el MAPA

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Iniciar sesión