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

Insertar y personalizar Google Maps en tu sitio web


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:

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

  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:

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

  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.

  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:

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

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

Comentarios (64)

  1. Google Maps API - Personaliza tu mapa - Añade tu negocio a GOOGLE MAPS | Smultron POTENCIA !! dice:

    [...] 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:

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

  3. W@lter dice:

    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:

    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:

    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:

    Gracias Alejandra! ahora pruebo :D

  7. Leon dice:

    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:

    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:

    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:

    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:

    No es necesario tener una cuenta en Google ;)

  12. Mr. Raymon dice:

    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:

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

  14. Ricardo dice:

    Muy my bueno, gracias

  15. Oliver dice:

    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:

    Genial! Super bien explicado y muy muy util!

  17. diego dice:

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

  18. Milthon dice:

    me parece genial la forma en la que se modifican los iconos.
    pero tengo una duda, como hago si por ejemplo tengo que poner mas puntos con informacion?

  19. Ezequiel dice:

    hola, yo tengo una base de datos mysql, donde tengo almacendo las coordendas, eh programdao en php, como hago para pasar esas coordendas a estos codigos de goolge maps? gracias

  20. jorge dice:

    hola! muy bueno el tutorial, pero lo que no entiendo es como se ve las coordenadas
    cuando encontras tu mapa, osea donde figura las coordenadas? para luego aplicarla en html?
    desde ya muchas gracias

  21. julio dice:

    buenisimo….muchas gracias !!!!!!

  22. Óscar dice:

    Muchas gracias por el post, la verdad es que ha sido de gran ayuda!

  23. Skaler dice:

    Hola,

    alguien me puede ayudar con algun ejemplo de como poder personalizar las burbujas (infowindow), es decir que en vez que sean redondas las esquinas, pues que sean cuadradas o cualquier otra cosa.

    Gracias.

  24. Armando dice:

    Hola, ta chido tu aporte y muy bueno.
    Tengo duda como puedo colocar varios cajas de información, con diferente infomacion.
    Todas las que coloco tienen la misma.

    Saludos…

  25. Drako dice:

    Hi! Great tutorial , I’ve added on a site and works perfectly, but I got a question, what should I do (to the code) if I want to maps on the same document? I’d appreciate your help, thank you ;)

  26. Juan dice:

    Por favor expliqunme paso a paso como puedo personalizar los marcadores, trabajando con WYSIWYG, poco entiendo de programación HTML, Gracias

  27. Ivan dice:

    Muchas gracias por el tutorial, me gustaria hacer una consulta como puedo agrandar el tamaño del mapa???.

  28. Ivan dice:

    Problema resulto revise el código y encontré la forma de hacerlo, Gracias.

  29. Manuel dice:

    ola buen dia, quisiera hacer una consulta, como puedo hacer que cuando hago el street view los iconos ejemplo el (companyShadow) no se mueva junto conmigo por el street? y se quede en su misma posicion. y que tampoco se vea desde lejos hasta llegar a sus coordenadas gracias

  30. Daniel dice:

    Hola, esto está buenísimo. Ahora, si yo quisiera mostrarle ciertos puntos que tenga cerca de su posición actual. ¿Cómo hago para obtener las coordenadas de su celular con gps?

  31. Felipe Pérez Granda dice:

    Hola.

    La información me fu util, pero me quedan algunas dudas al respecto.

    1. Teniendo en cuenta que quiero agregar n puntos en un mapa, según lo que entiendo, debería crear n imágenes diferentes para agregar las marcas en el mapa ¿Hay alguna manera de cambiar los estilos de una ventana de información en el mapa sin tener que crear las imágenes con el contenido listo?
    2. ¿Hay posibilidades de agregar botones o escuchadores de acciones en estas ventanas de marcadores personalizados sin necesidad de photoshop? esto para el caso que fueran por ejemplo 20 marcadores para trazar alguna ruta o algo así

    y 3. Hay alguna manera de mejorar la implementación de text sin necesidad de cargar imágenes.

    Saludos y muchas gracias

  32. Pako dice:

    Justo lo que buscaba y esta super completo, muchas gracias.

  33. juan dice:

    como puedo agregarle la ventanita para cuando quiera ver ls fotos o wikipedia agrdesco su colaboracion

  34. Pako | Paginas web Colima dice:

    Hola primero que nada gracias por el aporte es muy buen tutorial solo que tengo un problema ya que lo metí dentro de un tab Idtabs para ser preciso pero al momento de mostrar no aparece correctamente aparece solo una parte del mapa en la esquina superior ¿alguna idea que pueda ser?.

  35. Felipe dice:

    Gracias por el tutorial, sitios como este deberían premiarlos…
    gracias por compartir tus conocimientos….

  36. Jesús dice:

    He implementado el mapa con éxito sin embargo no consigo que salga ningún marcador en él. ¿Qué puedo haber hecho mal si he seguido al pie de la letra vuestras instrucciones?

  37. Jesús dice:

    Me podeis revisar el código es que no me sale el marcador de posición.

    function initialize() {
    var latlng = new google.maps.LatLng(57.0442, 9.9116);
    var settings = {
    zoom: 15,
    center: latlng,
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById(“map_canvas”), settings);
    };
    var companyLogo = new google.maps.MarkerImage(‘images/logo.png’,
    new google.maps.Size(100,50),
    new google.maps.Point(0,0),
    new google.maps.Point(50,50)
    );
    var companyShadow = new google.maps.MarkerImage(‘images/logo_shadow.png’,
    new google.maps.Size(130,50),
    new google.maps.Point(0,0),
    new google.maps.Point(65, 50)
    );
    var companyPos = new google.maps.LatLng(57.0442, 9.9116);
    var companyMarker = new google.maps.Marker({
    position: companyPos,
    map: map,
    icon: companyLogo,
    shadow: companyShadow,
    title:”Company Title”
    }
    );

  38. Gustavo dice:

    Muchas Gracias me ha sido de gran ayuda!

  39. Pablo dice:

    Simplemente excelente!
    saludos!

  40. Ariel dice:

    Muchas gracias!!!! Muy bueno!
    Una consulta…se puede implementar para que lea los puntos desde una tabla de una BD? Esto seria a traves de php imagino…
    Gracias!!!!

  41. Jorge dice:

    Hola, tengo el siguiente problema. Tengo una aplicacion web de rastreo satelital utilizando la version 2 del Api de Google Maps. Ahora quiero actualizarlo a la version 3 pero cuando me carga el mapa no puedo visualizar los vehiculos.
    ¿Tienes idea como puedo solucionarlo?
    Gracias

  42. joseph dice:

    hola mira tengo este problema y lo que sucede es que no me sale la imagen, y las coordenadas no se si esta muy bien pero chekea esto si esta bien

    Pais: Peru
    Lugar: Rodrigo Franco – Lima

    Codigo:

    function initialize() {
    var latlng = new google.maps.LatLng(-76.9853677, -12.1601504);
    var settings = {
    zoom: 15,
    center: latlng,
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
    mapTypeId: google.maps.MapTypeId.ROADMAP

    };
    var map = new google.maps.Map(document.getElementById(“map_canvas”), settings);//en getElementById entre parentesis viene el nombre del div

    google.maps.event.addListener(companyMarker, ‘click’, function() {
    infowindow.open(map,companyMarker);
    });

    var companyPos = new google.maps.LatLng(-76.9853677, -12.1601504);
    var companyMarker = new google.maps.Marker({
    position: companyPos,
    map: map,
    title:”Some title”
    });

    var companyLogo = new google.maps.MarkerImage(‘imagenes/logo.png’,
    new google.maps.Size(100,50),
    new google.maps.Point(0,0),
    new google.maps.Point(50,50)
    );
    var companyShadow = new google.maps.MarkerImage(‘imagenes/logo_shadow.png’,
    new google.maps.Size(130,50),
    new google.maps.Point(0,0),
    new google.maps.Point(65, 50)
    );
    var companyPos = new google.maps.LatLng(-76.9853677, -12.1601504);
    var companyMarker = new google.maps.Marker({
    position: companyPos,
    map: map,
    icon: companyLogo,
    shadow: companyShadow,
    title:”titulo empresa”
    });

    var companyMarker = new google.maps.Marker({
    position: companyPos,
    map: map,
    icon: companyImage,
    shadow: companyShadow,
    title:”Name”,
    zIndex: 4
    });

    var contentString = ”+
    ”+
    ”+
    ‘DataSystem’+
    ”+ ‘…………………………………………………………………………………………………’+
    ”+
    ”;

    var infowindow = new google.maps.InfoWindow({
    content: contentString
    });

    }

    Ojo el del body y estilo de letra no es importante…. le agradeceria la ayuda

  43. Rafael dice:

    Un saludo y felicitaciones por este tutorial, pero tengo un inconveniente. El tema de reemplazar el puntero fue bastante fácil, incluso me di mañas de agregar otro puntero y su respectiva ventana de información. Pero alguien sabe cómo puedo hacer para que las ventanas no se mantengan abiertas al mismo tiempo, es decir que al abrir una se cierre automáticamente la otra ventana que abrí. Agradecería inmensamente la ayuda de la comunidad!!!!! Saludossss… acá les dejo la URL: http://www.rutaexperienciasexitosas.com/ree2012/mapa3.html

  44. fa dice:

    como hago para diseñar la ventana de informacion? por que me queda muy ancha y chata, no me quedan ordenadas como a vos als cosas

  45. vago dice:

    oye una pregunta se puede agregar una funcion dentro de ese cuadro de texto¿?, por ejemplo tengo una funcion que me manda informacion al darle clic al marcador, en la parte de abajo de mi pagina pero quiero que dentro de ese globo de informacion tambien se pueda dar clic a algun vinculo que me muestre la informacion. . .

  46. Diego dice:

    Yo tengo una duda que a pesar de haber googleado no logro sacármela. ¿Cómo hago para lograr poner múltiples marcadores, y que cada uno en su “infowindow” tenga su propio contenido?

    Se pudieras resolverme esta duda en base a lo ya publicado en este tutorial sería bárbaro. Muy bueno por cierto me ha ayudado mucho!!! GRACIAS!!!

  47. yoel duran dice:

    Saludos hermano tengo un pequeño problemitahe usado tu codigo para probar en mi sitio y no me salen las marcas e incluso e usado ortros y tampoco me sale las marcas solo el mapa
    que podria ser necesito ayuda es urgente

  48. Germán V. dice:

    GRACIAS!!! me sirvió mucho y ya lo estoy implementando en mi propio sitio….SALUDOS CORDIALES!!!!!

  49. Antonio dice:

    Gracias tio! Eres un crack.

  50. Álvaro dice:

    Hola! Genial Tutorial!
    Sólo una pregunta. Dado que a google no le gusta que metamos mucho js en las páginas sino en archivos aparte, he intentado quitar el js y ponerlo en un archivo aparte pero no consigo que funcione. El archivo lo encuentra porque el mapa sale centrado donde yo indico pero las imágenes no aparecen. Help! GRACIAS

  51. RitzCOP dice:

    Genial! Muchas gracias por tu super código, un plus más para los desarrolladores web, la Api de GMaps…

  52. FMRMX dice:

    Si alguien me puede ayudar, en google maps cuando haces clic en cualquier parte del mapa fuera del globo, este se cierra automáticamente, pero con este script. Tienes que dar clic en la “x” del globo. Como puedo hacer que se cierre dando clic en cualquier parte, ya que esto evitará que esten mas de 1 marcador abierto al mismo tiempo.

    Gracias

  53. Paul dice:

    Echadle un ojo a este plugin: Google Maps generator for WordPress, funciona muy bien y es muy útil.
    http://codecanyon.net/item/google-maps-generator-for-wordpress/5612451?ref=MaGeekLab

  54. Edward dice:

    Increíble y funcional aporte, se ve de maravilla!!

    Sólo quisiera como otros más por lo que veo que nos ayudes para que cada icono tenga su respectiva etiqueta e información, en verdad seria la cereza del pastel.

    Saludos t de nuevo muchas gracias por compartirlo ;)

  55. Miguel Berezosky dice:

    Hola, yo quiero que me muestre una direccion en el mapa desde un array de una consulta mysql y no desde latitud longitud, como podria hacerlo?

    Muchas Gracias

  56. Shadin dice:

    Muy vacano….me sirve un montón…muchas gracias.
    Pero no he sido capaz de colocarle la sombra al marcador ni de redondear los bordes de la caja de la info….podrían decirme como.

    gracias

  57. Paulo dice:

    Mejor explicado no puede estar, super bueno y practico, para hacer algo sencillo y rápido. Muchas Gracias!!!

  58. Eduardo dice:

    Excelente explicacion, conciso, claro y sumamente util, a prueba de fallos. Te quiero hacer un pastel jajaja, Saludos!!

  59. ubaldo dice:

    gracias¡¡ viejo me ha de servir demasiado estaba buscando información de esto, ahora a aplicarlo haber que tal

  60. Alex dice:

    Disculpa como podría meter todo el script en un archivo de java script y mandarlo a llamar en el xml. soy nuevo, gracias.

  61. Daniel dice:

    Vale perro me sirvio caleta!

  62. Manuel dice:

    Hola Alejandra, primero que nada gracias por el tutorial, creo que está muy bien explicado. El problema es que hay personas como yo que nos cuesta asumir ciertas cosas por desconocimiento y eso nos generan dudas.
    Quisiera comentarte mi caso, cree mi propio icono, y trabajando con el Dreamweaver, todo funciona bien, pero cuando lo subo a la web, el mapa se ve pero el icono no me aparece.
    Te agradecería me pudieras ayudar, un saludo.

  63. Rafael dice:

    Hola, muchas gracias por el tutorial porque ha sido muy util. El problema que me surge es que al visualizar mi pagina web desde mi dispositivo movil, toda el sitio web esta adaptado al movil pero el mapa no disminuye cuando el tamaño de la pagina disminuye. ¿Alguien que sepa responder a esta consulta?
    Muchas gracias.

    Un saludo

  64. Carlos Sapien dice:

    Hola, me sirvió de mucho este tutorial, sin embargo tengo un problema, cuando añado varios pines y les pongo la caja de información, porque me sale la misma caja en todos los pines? o como puedo hacer para que cada pin tenga su propia caja con información diferente? Muchas gracias ;)

Deja tu opinión

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