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

  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

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