Experiencias
Tecnología e Innovación

¿Sabes cómo incluir Google Maps gratis en tu web?

La aplicación Google Maps a más de uno nos ha salvado la vida. Bueno, mejor dicho, nos ha ayudado y marcado el camino en la búsqueda de direcciones o en nuestros viajes, para llegar a nuestro destino y no morir en el intento.

Por esta razón es tan importante que en nuestra página web aparezca nuestra ubicación en Google Maps, ya que nos muestra el lugar exacto de nuestro negocio para conseguir que nos encuentren rápidamente.

Como algunos ya sabéis, la API de Google Maps que permitía mostrar sus mapas en webs y aplicaciones ahora es de pago. ¡Pero no os alarméis! Hay soluciones para todo.

¿Qué es la clave API de Google Maps?

Es un tipo de identificación (Interfaz de Programación de Aplicaciones) para el uso de aplicaciones con Google Maps. Lo primero que tenemos que hacer es solicitarla y más tarde la insertaremos en nuestro sitio web.

Hay que tener en cuenta, que hay dos versiones: una de ellas es gratuita, con varias limitaciones y otra versión Premium, es decir, de pago para los usuarios más avanzados y que quieren sacarle mayor rendimiento.

La propuesta de Google es simplificar el uso de Google Maps para integrar sus mapas en aplicaciones y servicios de terceros. Pero a cambio, encarecen el uso de las APIs. ¿Quieres saber lo que ha cambiado?

  • Han reducido las 18 APIs de Google Maps a tres categorías: Rutas, Mapas y Lugares.
  • Han unificado el servicio gratuito y premium, siendo ahora de pago.
  • Ofrecen 200 dólares mensuales gratuitos a cada desarrollador que utilice las nuevas API’s de Google Maps. Siempre proporcionándoles los datos de pago, aunque no se exceda el crédito gratuito.
  • Han integrado el acceso a Google Maps dentro de la plataforma Cloud de Google.

Algunos de nuestros clientes se han echado las manos a la cabeza porque en sus webs habían dejado de verse los mapas de Google.

Pero tranquilos, ¡tiene solución! Esto ha sido porque los mapas se podían incrustar de varias formas, y una de ellas era mediante su API key. Existen otras formas de hacerlo, como embebiendo el mapa directamente desde la opción de compartir de Google Maps.

También es cierto que con la API existen más funcionalidades, como dibujar capas, acceso a Street View, vistas 360º o manipular el punto de vista, pero si lo que queremos es un sencillo mapa de localización, donde se pueda ampliar, reducir y moverse, podemos hacerlo así perfectamente. Esto ya depende del servicio que queramos dar al usuario.

Google Maps

Por ejemplo, en una App de compras, sí que recomendaríamos utilizar la API porque podemos dar información útil al usuario como: encontrar sitios concretos a través de números de teléfono, direcciones y señales en tiempo real. Pero para una web corporativa donde simplemente queremos mostrar dónde se encuentra nuestra empresa, con un mapa embebido en el código, sería suficiente.

¿Cómo podemos embeber un Google Maps gratuito en nuestra web?

En realidad, es muy fácil. En las webs desarrolladas por Uup ya lo utilizábamos antes, siempre que nos era posible, ya que muchos de los mapas que necesitan nuestros clientes, simplemente son mapas sencillos de localización.

A veces en WordPress, según la maquetación del theme, te pedía la API de Google Maps, y entonces ahí ha sido cuando hemos necesitado realizar cambios para estos clientes concretos. Nuestro servicio de mantenimiento cubre este tipo de incidencias, para así prestar el mejor servicio posible a todos aquellos  que confían en Uup.

Para poder embeber un mapa de Google, tan sólo hay que ir a Google Maps, buscar el lugar que queremos marcar en el mapa y desde “Compartir” -> Insertar un mapa -> Copiar HTML:

Compartir Google Maps

src="https://st1.uup.es/media/2018/08/embeber-google-maps.png" alt="Compartir Google Maps" width="1440" height="741" class="alignleft size-full wp-image-10020" />

Nos generará un código de este tipo, donde podemos cambiarle algunas variables, como el ancho y el alto o el zoom:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1490.1951984635648!2d-0.8897282384751197!3d41.6689113893635!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd5914a2dbaef783%3A0xcefbedb5510a16d!2sUup!5e0!3m2!1ses!2ses!4v1535631076018" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Para que esto funcione, el negocio o empresa ha de estar registrado previamente en Google Maps, que además es recomendable para que los usuarios nos encuentren.

” Estar dado de alta en Google Maps es esencial para conseguir una buena visibilidad en Internet ya que la mayoría de los usuarios realizan búsquedas online de empresas locales.”

Lo primero y principal que tenemos que tener es una cuenta en Gmail, ya que a partir de ahí podremos darnos de alta y disfrutar de todas las ventajas que nos ofrece Google.

En Uup, podéis ver que quedan así:

Google Maps gratuito

Ya veis que quedan perfectamente y no necesitamos más para mostrar nuestra ubicación. En la mayoría de los casos, es suficiente con esto. Si no se trata de una aplicación que necesite de las funcionalidades avanzadas, normalmente no será necesario pagar por la API de Google. Pero si os hiciera falta utilizar la API de Google Maps, aquí os dejamos cómo hacerlo.

¿Cómo generar una cuenta API de Google Maps?

Como hemos comentado anteriormente, lo principal es tener una cuenta de Google, y una vez hayamos accedido a ella, tenemos que acceder a la zona de desarrolladores de Google y clicar en la zona de mapas.

mapas google desarrolladores

¿Qué tipo de API Key elijo de Google Maps?

Existen varias opciones para interactuar con los mapas, pero en este caso vamos a escoger uno que conecte los servidores de Google Maps y así podamos ver nuestra localización en nuestra página web.

Maps: Podremos ver el mundo y por supuesto nuestro negocio de una forma ágil y personalizada. Encontraremos mapas estáticos y dinámicos e incluso vistas de 360º.

Routes: Conseguiremos encontrar la mejor manera de ir desde un lugar a otro con actualizaciones de tráfico en tiempo real.

Places: Ayuda a descubrir a los usuarios el mundo que les rodea. Planificar un viaje, encontrar un restaurante…

productos google maps platform

El siguiente paso es darle un nombre a la Api para poder gestionarla desde el panel de control. Podemos crear cualquiera, simplemente es para no liarnos y poder identificarla por si más adelante generamos algún proyecto más.

¿Cómo crear una API Key en Google Maps?

Ahora llega el momento más esperado, el de “crear” nuestra Api. Al clicar en “Crear”, nos aparecerá una ventana con la clave de la Api Key de Google Maps.

A partir de ahí, tenemos que restringir esta clave que nos han facilitado para que no pueda ser pirateada por otros. Probablemente nos daría muchos quebraderos de cabeza el saber qué están haciendo con ella o dónde la están utilizando.

Estos son las restricciones que nos podemos encontrar:

  • Ninguna: Si quieres que los piratas informáticos hagan uso de ella, adelante, pero no te lo aconsejamos.
  • URLs de referencia HTTP (sitios webs): Solo podremos hacer uso de ella en las páginas o sitios web que nosotros especifiquemos.
  • Direcciones IP (servidores web, tareas cron, etc.): Solo en las IPs que nosotros les indiquemos.
  • Aplicaciones para Android
  • Aplicaciones para IOS

Como nuestra intención es insertar un mapa en nuestra página web, utilizaremos la opción de “URLS de referencia HTTP”.

Una vez realizados todos los pasos, podemos acceder a la Api cada vez que lo necesitemos, ya sea para añadir o modificar alguna URL o generar una nueva. ¡Eso sí! Si queremos generar una nueva Api Key de Google Maps, tenemos que crear un nuevo proyecto sin eliminar este que tenemos.

Como aplicar la clave API Key de Google Maps en nuestra página web

Ahora toca elegir en que página queremos que aparezca dentro de nuestra  web, que normalmente es en la zona de “Contacto”. Una vez dentro del HTML de nuestra página, buscaremos esta parte del código.

    <script async defer
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>

 

Ahí sustituiremos “YOUR_API_KEY” por la clave que habíamos obtenido anteriormente. De esta manera al fin podremos integrar de una forma adecuada el mapa de nuestra ubicación a nuestra página web.

Ahora, si queremos añadir un marcador al mapa con la ubicación exacta de donde se encuentra nuestro negocio o empresa, tendríamos que añadir el siguiente código, en el que tenemos que meter las coordenadas de Google indicando la latitud (lat) y la longitud (lng) de en donde se ubica nuestra empresa.

function initMap() {
  var myLatLng = {lat: -25.363, lng: 131.044};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatLng
  });

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
  });
}

 

Como ves, es bastante sencillo si tienes las cosas claras y le indicamos la posición geográfica que debe de tener.

Aquí podemos ver varios ejemplos de mapas con las API’s y servicios de Google Maps Platform.

¡Ahora será mucho más fácil que te encuentren! No te despistes.

Esther Cubel
Slow cook. Fast and better design.
07/09/2018

Comparte si te ha gustado:

Laura Del Castillo
Poniendo voz a Uup
07/09/2018

Comparte si te ha gustado:

Suscríbete para recibir novedades.

Recíbelas en tu email antes que nadie:

Consiento el uso de mis datos para recibir información y novedades y acepto la política de privacidad

Información básica sobre Protección de Datos: En cumplimiento de lo dispuesto en el Reglamento General de Protección de Datos 2016/679, E-MEDIA CINCO VILLAS S.L. pone en su conocimiento que su dirección electrónica, así como otros datos de carácter personal que puedan figurar en este formulario forman parte de un tratamiento de datos de carácter personal cuyas características se detallan a continuación:

Responsable: E-MEDIA CINCO VILLAS S.L.

Finalidad: Te mantendremos informado con noticias de interés.

Legitimación: Tu consentimiento a través de este formulario.

Destinatarios: Puedes estar tranquilo, en Uup no cedemos datos a terceros.

Derechos: En todo momento puedes acceder, rectificar y suprimir tus datos.

Plazo de conservación de los datos: Guardaremos tus datos mientras no nos solicites su baja.

Información adicional: política de privacidad