Skip to main content
Diseño web

Añadir google maps a mi web: ¿API o iFrame?

By marzo 21, 2020marzo 10th, 2022No Comments

agregar-google-maps-a-mi-pagina-web

Cuando Google lanzó su servicio de mapas el 8 de febrero de 2005, seguramente el equipo de diseño responsable no habría adivinado lo mucho que su servicio de mapas en línea cambiaría nuestra vida cotidiana para siempre. Durante más de una década, este servicio web ha proporcionado imágenes de satélite de todo el planeta. Y desde el surgimiento de los dispositivos móviles, se ha convertido en un compañero indispensable. La aplicación puede entretener cuando estás en casa, mirando qué tan lejos está ese hotel de 4 estrellas de la playa o restaurantes de moda en el área local. Pero cuando está fuera, Google Maps se convierte en un ayudante de emergencia, mostrándole las diferentes formas de llegar a su destino , ya sea a pie, en bicicleta, en transporte público o en automóvil. Por eso le ayudaremos a añadir Google Maps a su web

 

Configure una cuenta y cree sus propios mapas

Como operador de un sitio web, puede utilizar este servicio de Google para sus propios fines, agregando secciones de Google Maps en su sitio web. Aquí puede marcar la ubicación de su oficina, hotel, restaurante, consultorio, etc. e incluir instrucciones para ayudar a sus usuarios a encontrarlo. Siga leyendo para descubrir cómo integrar Google Maps a su web correctamente y descubra todos los beneficios que esto puede ofrecer.

Antes de que pueda crear sus propios extractos de mapas, debe crear una cuenta de Google, siempre que no tenga una. Después de iniciar sesión, abra sus aplicaciones de Google e inicie el servicio de mapas haciendo clic en ‘Mapas’.

agregar-google-maps-web

En el menú de navegación en el lado izquierdo, se le presentan varias opciones y configuraciones. Puede consultar las actualizaciones de tráfico en tiempo real, por ejemplo, o ver cuánto tiempo le llevará volver a casa desde el trabajo. Más abajo en la lista, verá la opción ‘Compartir o insertar mapa’. Esta es la forma más fácil de incrustar su propia pantalla de Google Maps.

Incrustar Google Maps con iFrame

Para añadir Google Maps a mi web comience por ubicar la sección de Google Maps que desea mostrar en su sitio, agregando instrucciones para rutas u otra información que considere importante. Una vez que esté satisfecho con su selección, puede comenzar a integrarla en su presencia en la web. Abra el menú de navegación nuevamente y elija la opción ‘Compartir mapa incrustado’. Haga clic en ‘incrustar’ y Google le ofrecerá un código HTML para incrustar su mapa en una ventana emergente.

Ahora todo lo que queda por hacer es copiar este fragmento de código en el código fuente de su sitio web. Los datos de píxeles dentro del código (por ejemplo, 640 x 480 píxeles) definen el tamaño de la sección del mapa. Dado que este código HTML compacto es lo que se conoce como un elemento iFrame. Esto significa que el contenido del mapa se cargará en paralelo en el servidor de Google cada vez que se abra su sitio web, por lo que su servidor web no estará involucrado. Esta tecnología de marco en línea es compatible con casi todos los navegadores modernos y se puede utilizar para integrar elementos de redes sociales.

La integración de Google Maps con iFrame solo está permitida para uso privado. Si desea implementar el servicio de mapas en un sitio web comercial, deberá utilizar otro método de integración: incrustación con las API oficiales de Google Maps.

Incrustar con las API de Google Maps

Insertar un servicio de Google Maps en su sitio web para uso comercial se vuelve un poco más complejo. Las API de Google Maps (interfaces de programación de aplicaciones) son menos fáciles de usar que la tecnología iFrame. Pero también tiene otros usos: los programadores informáticos que lo usan tienen opciones nuevas y extendidas cuando se trata de integrar Google Maps en sus proyectos web. Un ejemplo de esto se puede ver en la relativamente nueva incorporación de WhatsApp, que utiliza las API de Google Maps para permitir a los usuarios mostrar su ubicación exacta en un mapa. También el servicio web Plane Finder, que muestra las salidas y llegadas de vuelos en todo el mundo en tiempo real, utiliza las API de Google Maps.

Para echar un vistazo adecuado a lo que hacen estas API diferentes y para averiguar cuál se adapta mejor a su proyecto web, consulte el Selector de API de Google  para obtener una lista completa y algunas pautas.

Cómo incrustar Google Maps con API

añadir-google-maps-mi-web

Trabajar con las API de Google Maps no es realmente adecuado para usuarios sin experiencia sin conocimientos específicos de programación. Un conocimiento decente de JavaScript es particularmente útil y ventajoso cuando se trata de incrustar mapas más complejos.

  1. Al igual que para incrustar Google Maps con iFrame, necesitará una cuenta de Google para aprovechar las API de Google. Elija la API que desea usar y solicite una clave. En este ejemplo, hemos optado por la API de JavaScript.
  2. Continúe el proceso haciendo clic en «OBTENER UNA CLAVE» en la parte superior derecha de la pantalla. Ahora se le presentará un cuadro emergente que le pedirá que acepte los términos y condiciones. Ingrese un nombre de proyecto en la parte superior, luego haga clic en ‘Sí’ para aceptar. Podrá progresar haciendo clic en ‘CREAR Y HABILITAR API’ en la esquina inferior derecha de la ventana emergente.
  3. Una vez que haya creado la clave API, puede usarla en su proyecto web de inmediato. Para ayudarlo a descubrir qué entradas agregar a su documento HTML y dónde integrar la clave, Google ofrece una guía paso a paso.

¿Cuánto cuesta una API de Google Maps?

Usar las interfaces de programación de Google no siempre tiene un precio. Si tiene que pagar por el servicio web o no, depende en gran medida del tipo de sitio web o aplicación que esté ejecutando. Para proyectos que son completamente gratuitos para los usuarios, solo tiene que pagar la API si excede un número determinado de visitas por día o mes. Pero si su sitio web o aplicación ofrece algún seguimiento de la ubicación de personas u objetos, entonces incrustar las API de Google Maps solo está disponible por una tarifa. Para obtener una descripción general de los diferentes precios y modelos de uso, puede visitar la página de precios de las API de Google Maps. Esta página de resumen también ofrece información de contacto para el equipo de ventas de Google, en caso de que no esté seguro de qué modelo es el adecuado para su proyecto.

Incrustar Google Maps: una cuestión de conocimientos y uso

Las ventajas de añadir Google Maps a m web, son claras: ofrece a los visitantes de su sitio la forma más sencilla de encontrarlo, mientras que el servidor web de Google se esfuerza y mantiene el suyo funcionando a plena capacidad. Google comenzó a cobrar una tarifa por el uso comercial de su increíble servicio de ubicación en 2012. Sin embargo, para fines no comerciales, los usuarios pueden usar la sencilla herramienta de incrustación disponible en Google Maps: iFrame. Para uso comercial, Google ofrece las API de Google Maps, un mecanismo de integración más complicado que permite una mayor flexibilidad para el mapeo de aplicaciones y sitios web. Las empresas utilizan hoy en día las API, pero requieren experiencia previa con JavaScript y HTML.

 

Esperamos que este contenido le haya sido útil.