Alex Franco

Blog de Alex Franco, aquí podrás encontrar temas de tecnología, desarrollo web y móvil, Python, Django, Mongo, DBs y… otros temas más
Home  /  Codigo  /  Primeros pasos con la API v3 de Google Maps (Mapa y Marcador)

Primeros pasos con la API v3 de Google Maps (Mapa y Marcador)

Alex Franco API, GMaps, HTML5, JavaScript, jQuery 61 Comments

Ya tengo un rato manejando la API JavaScript de Google Maps pero ahora con su cambio a la v3 hay cosas que cambiaron y hay que adaptarse, entonces se me ocurrió compartirles lo que vaya aprendiendo desde cero, de cualquier manera pueden leer si así lo desean, toda la documentación oficial de la API de Google Maps.

Lo que voy a intentar hacer es ir al grano del tema del post, para no dar tantas vueltas y quitar toda la paja que viene en la documentación… “Directo y a la cabeza” dicen por ahí.

Para iniciar será necesario y preferente que tengan un poco de conocimiento principalmente de JavaScript y jQuery, asímismo de HTML y un poco de CSS, igual unas pequeñas nociones de HTML5 nos servirán en publicaciones posteriores.

Para empezar hay que declarar nuestra aplicación como HTML5, sencillamente escribiendo el DOCTYPE así:

<!DOCTYPE html>

También para estos ejemplos es necesario incluir los scripts de jQuery, para este dirígete a su sitio oficial, descárgalo y agrega el script, y claro el más importante de estos ejemplos, el script de Google Maps, que para la v3 no es necesario generar una key como en la versión 2 se hacía, ahora solamente agregas el siguiente script:

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

Si puedes observar, al final del script dice sensor=set_to_true_or_false es para indicar si queremos que el sensor identifique la posición del usuario, debes indicar true o false según lo requiera tu aplicación.

NOTA: hay una pequeña discusión sobre la localización de los scripts, puedes ponerlos ya sea dentro del head o del body, pero muchos recomiendan que vayan antes de cerrar la etiqueta body, ya que evita que el contenido principal tarde en mostrarse, entonces… es tu decisión donde colocarlos, al final de cuentas para fines didácticos, funcionan igual en cualquier lado.

Dentro del body vamos a declarar un DIV que incluya su id y estilos para un ancho y alto donde queramos que se dibuje el mapa, debe ser algo como esto:

<div id="map_canvas" style="width: 640px; height: 400px;"></div>

Ahora vamos con las opciones del mapa, primero declaremos la latitud y longitud donde queremos que aparezca nuestro mapa de esta manera:

var myLatlng = new google.maps.LatLng(myLatitude, myLongitude)

Lo que hace esa línea de código, es que creamos una instancia de un objeto de la API de GMaps que guardará la latitud y longitud del mapa, marcador o sea lo que sea que queramos dibujar, así que recuérdenla bien para futuros usos.

Los valores pueden variar de la siguiente manera:

  • myLatitude es el valor del ángulo que parte del ecuador, puede variar de 90 a -90 de norte a sur respectivamente, siendo 0 el ecuador.
  • myLongitude es el valor que parte del meridiano de Greenwich, o sea a partir de Londres, Inglaterra, tomando valores que varian de -180 a 180 de este a oeste respectivamente siendo 0 en Londres.

TIP: Si quieres obtener la latitud y longitud específicos dirígete a Maps.Google.com y en los Labs, activa el marcador de latitud y longitud.

Ahora, vamos con las opciones del mapa, las vamos a declarar de la siguiente forma:

var myOptions = {
  zoom: 8,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

Fácil de entender, ¿no?, lo que se realiza con esto es que a myOptions se le adjuntan las opciones propias de despliegue del mapa, zoom, es el nivel de visión del mapa, el más bajo 1, el más alto puede variar, ya que en algunos lugares puede ser hasta de un nivel 25 (hasta donde he descubierto), ya dependerá de lo que quieras mostrar en tu aplicación; center, si claro, centra el mapa con la latitud y longitud que un paso antes hemos declarado con la variable myLatlng; mapTypeId es una variable que interpreta el tipo de mapa que se va a desplegar, los cuales pueden ser estos:

  • ROADMAP muestra el mapa normal, el que es en 2D, si no se declara nada, este es el tipo por default.
  • SATELLITE muestra las cuadros fotografiados de la superficie.
  • HYBRID muestra una combinación de cuadro fotográficos, y el mapa 2D con nombres de calles y demás sobrepuesto, es como sobrevolar la superficie con todo y direcciones.
  • TERRAIN muestra cuadros del relieve físico de la tierra, elevaciones, ríos, montañas, entre otros.

Lo que prosigue es crear una instancia que guarde, interprete y dibuje todas las opciones que hemos visto de un mapa, recuerden tener jQuery cargado para que les funcione este script:

var map = new google.maps.Map($("#map_canvas").get(0), myOptions);

Así creamos la instancia al mapa y le decimos que lo coloque en el DIV con el ID de map_canvas, así como las opciones que requiere el mapa para ser desplegado correctamente. La variable map nos servirá más delante para tener control sobre el mismo mapa, como dibujar marcadores, formas, líneas, etc., haciéndole referencia.

Por último vamos a colocar/dibujar un marcador, un pin, o como lo quieran llamar, es muy simple hacerlo:

var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title:"Hola Mundo"
  });

Estas son las opciones básicas y quizá mínimas para dibujar un marcador, para position usaremos la misma variable que usamos para centrar el mapa y colocar el marcador en el centro del mismo, map es la instancia del objeto del mapa sobre el que vamos a colocar el marcador, title es el tooltip del marcador (el que dice un texto cuando dejamos encima el puntero).

Entonces al final, el código lo colocamos en una función que llamaremos initialize, para poder llamarlo posteriormente en cualquier parte de nuestro sitio, que para el ejercicio lo haremos en cuanto se cargue el body, agregando en la etiqueta de apertura:

<body onload="initialize()">

Aunque puedes llamar la función desde cualquier otro lado, ahora si nuestro documento con todo y el script debe verse algo semejante a esto:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false"></script>
<script type="text/javascript">
  function initialize() {
    var myLatlng = new google.maps.LatLng(20.68009, -101.35403);
    var myOptions = {
      zoom: 8,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map($("#map_canvas").get(0), myOptions);
    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title:"Hola Mundo"
  });
  }

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width: 640px; height: 400px;"></div>
</body>
</html>

Ver Demo

Es todo por esta ocasión, ya tengo otros ejercicios listos, solamente falta desglozarlos, cualquier duda, ya saben cómo contactarme :D.

Enjoy this Life!!

Relacionado

About Author

Alex Franco

 IT

Previous Article Obtener un JSON Cross-Domain con jQuery (rápido Proxy con PHP)
Next Article Info Window en GMaps API v3

Related Posts

  • Enviar correo personalizado automáticamente cuando respondan un Formulario de Google

    Enviar correo personalizado automáticamente cuando respondan un Formulario de Google

  • Django + AllAuth + Google OAuth 2.0

    Django + AllAuth + Google OAuth 2.0

  • Agregar número consecutivo y enviar correo al contestar Formulario de Google Drive

61 Comments

  1. axel Reply
    2010-10-28 at 10:38 pm

    hola,
    antes de nada gracias por el aporte 🙂

    pero, he copiado y pegado el mismo código poniendo a true el lugar donde lo pide y a false tambien.

    he puesto el doctype comleto:

    i me sale toda la pantalla en blanco como resultado uso firefox como navegador.

    alguna ayudita?m 🙂 pongo el codigo completo aquí para que te sea mas facil:

    function initialize() {
    var myLatlng = new google.maps.LatLng(41.899372,1.876966);
    var myOptions = {
    zoom: 8,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map($(“#map_canvas”).get(0), myOptions);
    var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title:”Hola Mundo”
    });
    }

    • Alex Franco Reply
      2010-10-29 at 1:18 am

      @Axel estás integrando jQuery y pones un div en el body donde el ID sea map_canvas?? SI puedes también colocame el HTML que estás poniendo por favor =D

      • eliana
        2013-09-25 at 3:56 pm

        hola franco yo tengo el mismo problema que el tengo una pagina donde me carga el mapa todo perfecto pero cuando utilizo ajax porque tengo un formulario principal y llamo el formulario donde se carga el mapa y lo cargo sobre un div establecido el mapa no me carga

  2. juanalvarez9 Reply
    2011-02-22 at 8:52 am

    Hola, gracias por el tuto pero llegue a este problema:
    mi pagina carga sus secciones por medio de ajax en un
    . pero cuando trato de cargar un mapa el script de la api no se carga. si coloco el mapa directamente en una pagina si sirve, pero cuando trato de cargarlo por medio de ajax no, puedes ayudarme con esto?

    • Alex Franco Reply
      2011-02-22 at 9:03 am

      @juanalvarez9 puedes colocar la parte del código que carga el mapa, o enviármela en la parte de contacto y así poder ayudarte, saludos!

      • juanalvarez9
        2011-02-22 at 10:07 am

        http://pastebin.com/sUHAFr0Q

        ahi esta mas o menos lo que busco hacer, gracias

      • Alex Franco
        2011-02-22 at 10:21 am

        @juanalvarez9 Bien sencillo, te falta en el div colocar el width y height (ancho – alto) para que sepa cómo colocar el mapa, recuerda, explícito es mejor que implícito =P

  3. samuel Reply
    2011-08-11 at 6:20 pm

    hola, hice el ejemplo tal cual pero me sale en blanco.¿me podrias ayudar? cabe mencionar que no se nada de JQuery y se muy poco de JS, pero como esto me urge muchas veces no da tiempo de estudiarlo y comprenderlo al 100. Lo que hice fue descargar el JQuery me devolvio 2 carpetas dist y test las cuales coloque en donde estoy haciendo las pruebas, aqui el codigo, igual que el tuyo

    function initialize() { var myLatlng = new google.maps.LatLng(20.68009, -101.35403); var myOptions = { zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map($(“#map_canvas”).get(0), myOptions); var marker = new google.maps.Marker({ position: myLatlng, map: map, title:”Hola Mundo” }); }

    • Alex Franco Reply
      2011-08-11 at 7:27 pm

      @samuel tu script está correcto, pero con respecto a lo de jQuery… agregaste la referencia al script?? lo más seguro es que ese sea el problema, que no encuentra dónde colocar el mapa porque no encuentra las librerías de jQuery, puedes en lugar de usar:
      $(“#map_canvas”).get(0)
      uses:
      document.getElementById(“map_canvas”)

      Intenta y ya nos comentas como te fue…

  4. samuel Reply
    2011-08-12 at 11:29 am

    Muchisimas gracias!! Efectivamente no tenia bien direccionado el script(que estupido, lo corregi y aun aparecia en blanco, sustitui el $(“#map_canvas”).get(0)
    por el document.getElementById(“map_canvas”) y aun asi no podia verlo, decidi volverlo a hacer de nuevo y funciono perfecto ignoro lo que paso, seguro que algo me faltaba. Te agradezco mucho tu ayuda y tus aportes, seguire viendo el resto de tus tutoriales.

  5. Ivan Reply
    2012-01-31 at 9:46 am

    Gracias por el ejemplo y la explicación! Son bastante claros. Bueno, me gustaría aportar un poquito sobre la carga de jQuery y los otros scripts. Esto es lo que yo uso para cargarlos. Nótese que en la carga del jQuery, dentro de mi proyecto tengo una carpeta llamada Scripts, y ahí están los archivos de jQuery.

    Espero que sea de ayuda. Saludos!

    • Alex Franco Reply
      2012-01-31 at 11:13 am

      @Ivan creo que faltó el código que nos ibas a mostrar =P

      • Ivan
        2012-01-31 at 11:20 am

        No me lo puso de nuevo :S Que raro…. :S Lo copie y pegue desde VWD, no se que paso…

      • Alex Franco
        2012-01-31 at 11:26 am

        @Ivan ponlo entre estos tags [ js ] [/ js ] … (sin espacios dentro de los corchetes)

      • Ivan
        2012-01-31 at 11:30 am
        <%--Agregarmos la referencia para la API jQuery--%>
            <script src="Scripts/jquery-1.4.1.js" type="text/javascript">
            </script>
        
            <%--Agregarmos la referencia para la API Google Maps V3. Nota: sensor=false significa
            que no queremos que el sensor identifique nuestra posición actual--%>
            <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
            </script>
        
            <%--Agregarmos la referencia para la documentación para API Google Maps V3
                Nota: El archivo se coloco en la carpeta Scripts de este proyecto--%>
            <script src="Scripts/google-maps-3-vs-1-0.js" type="text/javascript">
            </script>
  6. Rafa Villegas Reply
    2012-02-27 at 12:13 pm

    Hola, estoy empezando a utilizar la v3 de la API de Google Maps y no consigo que me cargue con AJAX, el mapa no se muestra en la carga de la página sólo si pinchas en un enlace se muestra una ventana emergente en la que quiero mostrar el mapa pero no lo consigo, te pego el código:

    function initialize() {
     var tierras=new google.maps.LatLng(-34.397,150.644);
     var myOptions={
      zoom:8,
      center:tierras,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }
    function loadScript() {
     var script=document.createElement("script");
     script.type="text/javascript";
     script.src="http://maps.google.com/maps/api/js?sensor=false&amp;callback=initialize";
     document.body.appendChild(script);
    }
     window.onload(loadScript);
    

    * Esto pretendo que al cargar este archivo lanze el js pero no consigo que lo haga, podrías ayudarme.

    Gracias.

    • Alex Franco Reply
      2012-03-16 at 10:18 am

      @RafaVillegas El problema es que estás usando un JS que no es compatible con todos los navegadores, por ejemplo window.onload(loadScript) no funnciona en varios navegadores de última generación, hay que crear un event listener para poder echarlo a andar, te recomendaría ampliamente que usaras jQuery para varias de las cosas que pones en tu código

      • RafaVillegas
        2012-03-19 at 2:13 am

        Hola Alex,
        gracias por la respuesta, podrías echarme un mano con el jQuery? no lo he tocado nunca, no se como crear un listener, si tuvieras algún ejemplo me vendría muy bien, gracias.

      • Alex Franco
        2012-03-20 at 7:27 pm

        @RafaVillegas pues justo es como está el ejercicio, no tiene ninguna ciencia, necesitaría saber más a detalle lo que intentas hacer para poder ayudarte, saludos…

  7. carlos Reply
    2012-03-08 at 1:03 am

    Hola amigo, tengo una duda, quiero que aparezcan 2 punteros, ya que tengo que apuntar 2 negocios como le hago????
    Me podrias resolver esa duda, te lo agradeceria mucho

    • Alex Franco Reply
      2012-03-16 at 10:14 am

      @carlos bien sencillo creo que este tutorial te va a servir http://jafrancov.com/2010/09/info-window-gmaps-api-v3/ solamente es colocar 2 marcadores y listo 😉

  8. Alejandro Jimenez Martinez Reply
    2012-03-27 at 4:17 am

    HOLA TOCALLO, PRIMERO QUE NADA MUCHISIMAS GRACIAS POR EL APORTE ALGO MUY MUY INTERESANTE, DESPUES DE UNOS MINUTOS DE PROBLEMILLAS LO SOLUCIONE Y LO TENGO FUNCIONANDO, TENGO UNA INQUIETUD, TENGO MANERA DE SABER EL PAIS DEL QUE ME VISITAN DE ESTA MANERA?

    P.D. SERA MUCHA MOLESTIA QUE ME RESPONDAS AL CORREO PORFA, Y SI NO ES AUN MUCHA MOLESTIA TODAVIA, ESTA GENEAL TU TAG CLOUD ESFERICO EN 3D, SERA QUE PUEDAS POSTEARLO?

    • Alex Franco Reply
      2012-03-27 at 11:12 am

      @Alejandro No, para saber la manera en que te visitan es por medio de las IP o a menos que tengas activada la geolocalización, usa Google Analytics, ahí te da un resumen de lo que me preguntas. Del Tag Cloud es un plugin para wordpress, se llama WP-Cumulus, para Blogger ya lo tengo posteado acá. Saludos…

  9. Salvador Ortiz Reply
    2012-06-17 at 5:32 am

    Buen día. Disculpe, He creado el mapa con el marcador sin problema alguno, pero yo tomo latitud y longitud desde un archivo de texto que se esta actualizando constantemente. La duda es como podría actualizar la posición del marcador sin recargar todo el mapa. Es esto posible? Gracias de ante mano.

    • Alex Franco Reply
      2012-08-06 at 1:06 pm

      @SalvadorOrtiz Si, es posible, la variable del marcador necesitas colocarla de manera global para poder accesar a ella y mediante algún evento (como un click, un enlace, tiempo) se actualice, y redibujar el marcador, algo más o menos así:

      //declaras marker como global y la inicializas en el primer proceso o de manera global por igual 
      //puede ser un objeto LatLng o lat y lng por separado
      function actualizar_marcador(lat,lng){
      	// Leer coordenadas desde archivo 
      	var newLatlng = new google.maps.LatLng(lat, lng);
      	marker.setPosition(newLatlng);
      	marker.setMap(map);
      	map.setCenter(location);
      }
      
    • Leandro Reply
      2013-04-11 at 5:37 pm

      hola alex muy bien explicado todo, te comento mi problema, quise implementar la actualizacion del marcador y no pude, me darias una mano? aca esta el codigo:

      **código editado**
      if (status == google.maps.GeocoderStatus.OK)
      {

      map.setCenter(results[0].geometry.location);

      marker.setPosition(results[0].geometry.location);

      actualizar_marcador(google.maps.latLng.lat(),google.maps.latLng.lng());
      **código editado**

      function actualizar_marcador(lat,lng){
      // Leer coordenadas desde archivo
      var newLatlng = new google.maps.LatLng(lat, lng);
      marker.setPosition(newLatlng);
      marker.setMap(map);
      map.setCenter(google.maps.getCenter());
      }

      • Alex Franco
        2013-04-16 at 3:46 pm

        La función de actualizar_marcador está de más, ya que en las línea anteriores actualizas la posición del marcador (suponiendo que tienes acceso a la variable marker, es decir que sea global o pertenezca a la clase desde donde lo llamas), prácticamente quedaría así lo que resumí de tu código:

        if (status == google.maps.GeocoderStatus.OK)
        {
           //actualiza la posición del marcador
           marker.setPosition(results[0].geometry.location);
           // Cambia y mueve el centro del mapa a las coord. del objeto Latlng indicado
           map.panTo(results[0].geometry.location);
           // algo adicional...
        }
        
  10. aniitha Reply
    2012-08-05 at 11:05 pm

    ola yo tengo una duda respecto a los marcadores, se puede agregar un enlace a otra pagina, directamente al dar clic en el marcador sin ser necesario abrir una venntana de informacion y agregar el enlace en esta?..gracias x su ayuda!!..n.n..

    • Alex Franco Reply
      2012-08-07 at 12:01 am

      @aniitha si, si se puede, se crea un listener de click para el marcador, quedaría algo así:

      google.maps.event.addListener(marker, 'click', function(event) {
         location.href = "http://alexfranco.mx";
      });
      
  11. Leandro Reply
    2012-09-10 at 9:24 am

    Hola. Muy bueno el articulo. Quisiera saber como se hace para que en lugar de un punto en el icono salga un texto.
    Hice un sitio usando la interfaz de wix.com y agregue un mapa donde coloco el nombre del lugar en el icono, como estoy portando todo a html quisiera saber como se hace.
    Hice uno y me sale el nro. 1.
    Muchas Gracias.

    • Alex Franco Reply
      2012-10-29 at 2:06 pm

      No se puede colocar más de una letra o números, lo que puedes hacer es crear un marcador propio, por cada lugar, y que quede algo como en esta liga, pero más que eso no se podría, puedes colocar la info en el infowindow, así se ve más limpia la presentación

  12. Francisco Javier Solis Palma Reply
    2012-10-03 at 8:36 pm

    Como puedo hacer para que el resultado de los datos del mapa los coloque dentro de un componente image de gwt, estoy intentando hacer una página web, conde tiene una pestaña de contacto, donde hay un pequeño formulario para mandar un mail (que no se todavía como hacer que funcione), y un mapa con la ubicación, pero todo funciona con gwt, no utilizo el html y el xml, más que para indicar a donde dirigirse para abrir la la aplicación, es mi primer aplicación, me puedes auxiliar?

    • Alex Franco Reply
      2012-10-29 at 2:16 pm

      @Francisco íjole, eso es usando la parte de la API de mapas estáticos… no la he usado porque no se me ha presentado la oportunidad, pero, si me das un poco de tiempo, puedo investigar, o si puedes mándame un mail a jafrancov en gmail y te puedo guiar dónde puedes encontrar la info.

  13. Walter Reply
    2012-10-15 at 11:45 am

    te quería desde ya la pagina esta muy bien lograda, y veo que ayudas mucho a la gente con sus dudas, yo estoy tratando de iniciarme en esto pero estoy de 0… quisiera saber si tendría que combinar con mysql si quiero hacer una pagina de busqueda de cosas… en ejemplo seria preguntar que es lo que estas buscando y dependiendo de tu geolocalizacion indicarte a cuan cerca lo tenes, con varios filtros. se entiende? como ejemplo en comida seria, que tenes ganas de comer? y un catalogo de comidas para darle con checkbox, y con tu geolocalizacion o bien poniendo tu dirección que te filtre y te aparezca solo lo seleccionado en el mapa con los restaurantes que lo hacen/venden, filtros por precios, etc.

    • Alex Franco Reply
      2012-10-29 at 2:42 pm

      @walter en si lo que quieres más o menos hacer es algo como Foursquare (¿lo has usado?), quizá un poco más específico pero para eso tendrías que tener un acceso a cada cosa que vende el lugar para que se mantenga actualizado. ¿Estoy en lo correcto?

  14. Ricardo Palacios Reply
    2012-10-17 at 5:11 pm

    Amigo quiero hacer un evento donde:
    google.maps.event.addListener(map, “mouseover”, function(){
    se oculte los controles
    });

    google.maps.event.addListener(map, “mouseout”, function(){
    muetre los controles
    });

    le hize ne la v2 pero en la v3 no lo he logrado… por favor si puedes ayudame…

    • Alex Franco Reply
      2012-10-29 at 3:03 pm

      @Ricardo sencillo, tienes todos estos controles:

      mapTypeControl
      panControl
      zoomControl
      scaleControl
      rotateControl
      overviewMapControl

      Solamente es habilitarlos o inhabilitarlos, dentro de un setOptions al mapa (la variable del mapa debe ser global o alcanzada por la función), por ejemplo:

      google.maps.event.addListener(map, “mouseover”, function(){
         map.setOptions({
            mapTypeControl: true,
            panControl: true
         });
      });
      
  15. Josue Reply
    2012-10-26 at 1:31 pm

    Buenas amigo Alex, muy buen tutorial, quisiera que me ayudaras llevo dias buscando un codigo que me permita mostrar la ubicacion del usuario y tamb los marcadores que esten cerca del mismo.

    Solo he conseguido marcadores y geolocalizacion por separado mas no un codigo que lo realice juntos.

    Gracias

    • Alex Franco Reply
      2012-10-29 at 3:11 pm

      @Josue aún sigo escribiéndolo, no lo he terminado por tiempo, entre hoy y mañana lo termino y te aviso.

  16. Eliana Reply
    2012-11-01 at 9:28 am

    hola yo establezco los marcadores por filtros pero al selecionar un marcador se desaparecen los otros porque se vuelve a pintar nuevamente el mapa como establezco ese mapa global o que hago para que el mapa siga igual sin perder los otros marcadores mienstra los check esten activos

    • Alex Franco Reply
      2012-11-02 at 8:33 pm

      @Eliana la variable del mapa debe ser declarada global y dibujarse solamente una vez al cargar el sitio, quizá necesite ver un poco tu código, pero en si eso es lo principal para que funcione como debe.

  17. Karen Reply
    2012-11-07 at 7:48 pm

    Hola
    Gracias por el aporte, estoy comenzando a utilizar la API de Google Maps, y me sirvio de mucho. Quisiera saber si me puedes ayudar, ya que quiero insertar en el mapa las coordenadas que estan guardadas en una base de datos o con un formulario en html.
    En LatLng en lugar de poner las coordenadas como 19.2345 se puede poner una variable??, ya que realizo mi conexion a la bd con php y extraigo los datos pero como variables, pero de ahi no se como pasarlas al API
    Gracias

    • Alex Franco Reply
      2012-11-26 at 2:21 pm

      @karen todo es posible, pero recuerda que PHP trabaja del lado del servidor y la API es javascript y este trabaja del lado del cliente, para obtener los datos e interactuar, necesitas usar ajax y exportar a XML o JSON tus datos, para que con javascript los manejes e interactuen con la API, la forma más rápida es usando el json_encode de PHP + ajax

  18. Jose Luis Reply
    2012-11-25 at 3:43 pm

    Hola,
    ¿este código vale también para webs diseñadas para móviles.?

    • Alex Franco Reply
      2012-11-26 at 2:16 pm

      @JoseLuis Si, solamente necesitas acomodar tu CSS para que se acomode a tus necesidades

  19. Daniel Reply
    2013-01-11 at 3:49 pm

    Hola: Estoy haciendo una aplicación que ubica en el mapa una dirección que esta en una base de datos de esta forma (Urquiza 1254, Rosario, Argentina). Funciona pero el problema que tengo es que cuando la dirección es incorrecta igual me ubica algo erroneo (ejemplo Urqdsd 111, Rosario, Argentina), si toda la direccion es incorrecta (ejemplo Urqwe 11,Rossasd, Rgg) entonces sí me dice no encontrado. ¿ Alquien sabe como hacer que busque la dirección exacta ?
    Gracias

    • Alex Franco Reply
      2013-04-16 at 2:11 pm

      La API da resultados de acuerdo a lo que le envías, si envías una dirección errónea, no la encontrará, lo que puedes hacer es agregar un campo para latitud y otro para la longitud del lugar, recopilar los datos y actualizar, recuerda que Google depende de los usuarios para reportar y corregir muchos problemas como ubicaciones incorrectas, por lo que no creo tan conveniente que busques por Geocoding, ya que te acabarás muy rápido las llamadas a la API para ese servicio si tu aplicación crece.

  20. manuel hernandez Reply
    2013-03-06 at 8:12 am

    hola, ya tengo un mapa a partir de tu buena explicacion, incluso el mapa cuenta con varios marcadores, pero como puedo hacer para filtrarlos con un select de un formulario, que al cambiar la opcion del select actualice en el mapa con los marcadores relacionados. Agradezco mucho tu ayuda.

    • Alex Franco Reply
      2013-04-16 at 3:32 pm

      Ouch, un poco largo para mostrar con código, te digo el proceso que yo haría, necesitas un listener de jQuery para que al cambiar la opción, con un método .live esté verificando si cambió o no la opción, en cuanto cambie, llamas la función de javascript que consultaría los marcadores (ya previamente guardados en una variable u obtenerlos en ese momento con AJAX), lo más sencillo para limpiar el mapa es volverlo a dibujar, aunque es una llamada más a la API, preferentemente guardar los marcadores dibujados en un array y quitarlos con un ciclo, y dibujar ahora si los que corresponden a la opción seleccionada.

  21. Tony Reply
    2013-04-17 at 8:23 am

    Hola Alex, tu código me ha sorprendido ya que es sencillo, y además funciona. Puede que te sorprenda este´último comentariuo pero me descargo mucho código que no hay forma de ponerlo en marcha.

    Una cosa que no entiendo es como es que funciona sin la clave API ???

    Por otro lado, tu ejemploe s fantastico, pero necesito poner varios marcadores y no uno solo, me podrías echar una mano ??

    • Alex Franco Reply
      2013-04-18 at 4:29 pm

      @Tony Gracias, sin la clave API funciona pero es para usos muy limitados, como pruebas o ejemplos jeje, de los marcadores, depende de cómo obtengas la información o son estáticos?

  22. Rene Reply
    2014-10-22 at 9:54 pm

    Hola Alex, quiziera ver si tu me puedes ayudar, necestito colocar un marcador con un icono personalizado, pero también debo poner como 50 mas ya con el icono que da por default google, eso sería posible?

    • Alex Franco Reply
      2014-11-24 at 12:46 pm

      Claro, necesitas crearlo y tenerlo disponible públicamente, al crear el marcador, pon como propiedad “icon: /ruta/al/icono.png” y listo.

  23. Freeman SAO Reply
    2016-04-28 at 12:59 pm

    Podrias ayudarme en esto http://es.stackoverflow.com/questions/8637/c%C3%B3mo-a%C3%B1adir-un-cuadro-de-b%C3%BAsqueda-en-googlemap-a-mi-mapa-personalizado

    • Alex Franco Reply
      2016-05-11 at 1:28 pm

      Si bien entiendo y corrígeme si no es así, lo que intentas hacer es que te vaya prediciendo los lugares que tienes almacenados en tu base de datos, ¿es correcto?

  24. Angel Piñango Reply
    2016-05-09 at 2:48 pm

    Buenos dias hermano , excelente post, como pudiera tener control de ambos marker luego de que me marca la ruta y me dice el kilometraje, quisiera tener el control de poder manipular la variable de kilometraje, es posible¿?

    • Alex Franco Reply
      2016-05-11 at 1:30 pm

      Los resultados que arroja Google no pueden ser manipulados o cambiados a menos que cambies el origen/destino, lo que puedes hacer es capturar ese dato y manipularlo según lo que busques hacer, ¿me explico?

  25. Yellows Ochenta Reply
    2016-07-20 at 4:08 pm

    muy buena explicación, ¿puedes decirme que se necesita para que muestre el mapa con el trafico?

    • Alex Franco Reply
      2016-08-24 at 12:33 pm

      Necesitas solamente activar la capa después de cargar el mapa

      var trafficLayer = new google.maps.TrafficLayer();
      trafficLayer.setMap(map);
      
  26. Alejs Subía Reply
    2016-08-22 at 12:57 pm

    hola como estas, me puedes ayudar por favor para incluir dos mapas, con diferentes posiciones del marcador en una misma pagina con la api v3, por la atencion muchas gracias…

    • Alex Franco Reply
      2016-08-24 at 1:08 pm

      Identifica los div con diferentes ID e inicializalos por separado, es decir:

      <div id="map_canvas1"></div>
      <div id="map_canvas2"></div>
      
      var map = new google.maps.Map($("#map_canvas1").get(0), myOptions);
      var map = new google.maps.Map($("#map_canvas2").get(0), myOptions);
      

Comenta Cancelar respuesta

Posts populares

  • Geocode Simple: Buscar direcciones (coordenadas a partir de direcciones) con GMaps API v3
  • Buscar y trazar rutas con GMaps API v3
  • Recuperar o ver las claves de las redes inalámbricas en tu Mac (o cualquier App)
  • Enviar correo después de contestar Formulario de Google Drive automáticamente

Suscríbete

Suscríbirme!

Quizá te interese

  • Obtener un JSON Cross-Domain con jQuery (rápido Proxy con PHP)
  • Crea tu propio MOOC con Google Course Builder: desde la Descarga hasta su Publicación
  • Cabalgata de Los Reyes Magos en Irapuato
  • Marcador arrastrable y cómo obtener su Lat/Lng GMaps API v3
Alex Franco 2009 - 2023