Blog de diseño web y diseño grafico » Google Maps http://www.mydesign.com.es/blog herramientas, recursos y codigo para la web Mon, 15 Feb 2010 14:54:26 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 Insertar y personalizar Google Maps en tu sitio web http://www.mydesign.com.es/blog/insertar-y-personalizar-google-maps-en-tu-sitio-web/ http://www.mydesign.com.es/blog/insertar-y-personalizar-google-maps-en-tu-sitio-web/#comments Fri, 30 Oct 2009 13:29:39 +0000 admin http://www.mydesign.com.es/blog/?p=144 En 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?

Encontramos via el blog elwebmaster este genial post traducido al español en el que se ven los detalles mas importantes referidos al tema.

Antes de empezar, veamos lo que vamos a crear:

API 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:

  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 de estado, 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>:

  1. <meta name=“viewport” content=“initial-scale=1.0, user-scalable=no” />
  2. <script type=“text/javascript” src=“http://maps.google.com/maps/api/js?sensor=false”></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:

  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:

  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

  1. }
  2. </script>

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

  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:

  1. var map = new google.maps.Map(document.getElementById(“map_canvas”), settings);

Inserten el siguiente código:

  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, dónde 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 pixeles, 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:

  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 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 actualizan tu sitio verás que el marcador ha cambiado por su propio logo. Para añadir más marcadores, sigan simplemente el mismo método, cambiando los nombres de las variables.

Si tienen dos marcadores muy cerca el uno del otro, quizá deban 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.

  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 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:

  1. var contentString = ‘<div id=”content”>’+
  2. ‘<div id=”siteNotice”>’+
  3. ‘</div>’+
  4. ‘<h1 id=”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. var infowindow = new google.maps.InfoWindow({
  10. content: contentString
  11. });

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():

  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:

  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 su sitio web o blog.

Descarga

Para descargar los archivos de muestra hagan clic aquí.

Fuente: Stiern

]]> http://www.mydesign.com.es/blog/insertar-y-personalizar-google-maps-en-tu-sitio-web/feed/ 0