Consejo rápido Incrustar nuevos mapas de Google

El nuevo Google Maps se puso a disposición del público en julio, pero sigue siendo una vista previa de lo que será el producto final y, por lo tanto, carece de algunas características familiares..

Por ejemplo, ¿ha intentado incrustar un mapa de Google más nuevo en una página web? ¡El viejo y confiable botón de "enlace" no se encuentra en ninguna parte! Algunas personas le sugerirán que vuelva a la antigua versión de Google Maps, incruste un iframe en la forma original, y luego vuelva a la vista previa de Google Maps más nueva una vez que haya terminado. Pero hay otra forma, y ​​es una manera que te ayudará a aprovechar las ventajas de Google Maps más nuevas y bonitas, como esta:

Esto no es una imagen ...

Maps Engine Lite

Maps Engine Lite (Beta) es una herramienta que le permite diseñar y guardar sus propios mapas personalizados. Para poder utilizarlo, deberá tener una cuenta de Google y estar conectado..


Luego puede publicar y compartir sus mapas, así que comencemos haciendo clic en "Nuevo mapa":


Ingresemos la dirección de Envato HQ en el campo de búsqueda como ejemplo:


Tras ubicar la oficina y agregar un marcador, ahora podemos darle un nombre a nuestro mapa haciendo clic en "Mapa sin título":


También podemos hacer clic en "Capa sin título" para darle un nombre, luego de lo cual podemos agregar todo tipo de ubicaciones, rutas y áreas a nuestro mapa. También podemos importar a través de cargas de archivos, pero por el momento solo nos concentraremos en nuestro único marcador. Asegúrese de haber agregado la ubicación buscada a su mapa, entonces puede concentrarse en las características del marcador.


Ahora Envato HQ aparece en la lista de "Ubicaciones de negocios", podemos modificar su color, etiqueta e incluso el icono. Google ha proporcionado un montón de posibilidades de personalización aquí, ¡así que diviértete explorando! Le he dado a HQ un icono de oficina amarillo..


Otra característica interesante de los nuevos mapas de Google son sus diversos temas; haz clic en "Mapa base" y déjate llevar. He ido a por "agua blanca":



Cambiar configuración de compartir

Una vez completado nuestro mapa, ahora debemos modificar la configuración de compartir, así que haga clic en el botón "Compartir" en la parte superior derecha.

Esto abrirá un cuadro de diálogo en el que puede elegir cambiar la visibilidad de su mapa de "Privado" a "Público". Esto es necesario para incrustar su mapa en una página web..


Una vez hecho esto, haga clic en el ícono "carpeta" y seleccione "Insertar en mi sitio".


Te darán un fragmento de código HTML, como este:

para incrustar un iframe en una página web.


Haz que tu mapa sea fluido

Una última cosa, su mapa no responde exactamente en su estado actual. Envolvámoslo en un elemento fluido (como los que se usan para incrustaciones de video fluido) para que podamos incluirlo en un diseño sensible.

Primero, envolvemos un elemento adicional alrededor de nuestro iframe:

Luego dimensionamos la envoltura con relleno (una propiedad de altura de fluido no funcionará) y colocamos el iframe dentro de ella:

.envoltura de fluidos posición: relativa; Fondo de relleno: 56,25%; / * 16: 9 * / altura: 0;  .fluid-wrapper iframe posición: absoluta; arriba: 0; izquierda: 0; ancho: 100%; altura: 100%; frontera: ninguna; 

Este relleno del 56,25% le da a nuestro contenedor una proporción de 16: 9, algo que vale la pena tener en cuenta para el video, pero puede hacer que su Google Map sea un rectángulo cualquiera que sea la proporción que desee.


Conclusión

¡Eso es! Muy simple en realidad, pero una de esas pequeñas tareas útiles que se han hecho temporalmente incómodas mientras que Google hace la transición a los Mapas más nuevos.

ps) ¿Capturaste la reciente caminata de Google Maps Street View de las Islas Galápagos? Bien vale la pena el viaje ...

Aprenda más sobre Google Maps en Tuts+

  • Cómo agregar ubicaciones de sucursales con marca a Google Maps
  • Lograr creatividad con la API de Google Maps
  • Agregue un toque de realismo a su Google Maps
  • Imágenes de Google Map responsivas y retinadas