Los mapas son un aspecto esencial de cualquier sitio web de negocios. Incluso si está completamente basado en Internet, a los clientes les gusta saber quién es usted y dónde vive. Google Maps es ahora el predeterminado para muchos sitios web, ya que es el más fácil de usar, aparentemente el más preciso y es gratuito. Al final de este tutorial, sabrá exactamente cómo insertar un mapa de Google receptivo en su sitio web.
Los mapas de Google predeterminados no siempre responden, por lo que es posible que no se escalen a diferentes tamaños de pantalla. Dependiendo de si está utilizando un complemento de WordPress o incrustándolo usted mismo usando código, es posible que deba agregar un par de líneas de CSS para que el mapa responda.
Diseño web adaptable
Responsive es un término clave aquí. Describe el diseño web que tiene en cuenta la experiencia del usuario y el dispositivo para garantizar que sea el mismo, independientemente del dispositivo que utilice para acceder al sitio web. Por ejemplo, un sitio web receptivo debe proporcionar la misma calidad de experiencia, ya sea que lo visite en una computadora de escritorio, tableta o teléfono inteligente.
Para hacer esto, el sitio web tiene que adaptarse a diferentes resoluciones, tamaños de pantalla y tocar.
Incrustar un mapa de Google receptivo en un sitio web
Conozco tres formas de insertar Google Maps en un sitio web. Si usa un tema de WordPress, puede tener la función incorporada. También puede usar un complemento o puede incrustar código directamente desde Google en cualquier sitio web. La primera y la segunda opción son excelentes para los usuarios de WordPress, otros CMS también usan complementos para que esté cubierto allí. La opción final, usar el código debería funcionar en la mayoría de los sitios web, independientemente de cómo se construyan.
Use un tema de WordPress para incrustar un mapa de Google receptivo
Algunos temas de WordPress tendrán una función específica para Google Maps. Como los mapas son tan fundamentales para los sitios web modernos, algunos diseñadores de temas los han implementado directamente en sus diseños. Si su tema tiene una función de mapa, es probable que necesite una API de Google Maps para que funcione. Agregue la API a las opciones del tema y se comunicará directamente con Google para construir el mapa en cada visita.
- Visite esta página en el sitio web de Google para comenzar el proceso de API.
- Seleccione el botón azul Comenzar.
- Seleccione el icono del menú de tres líneas en la esquina superior izquierda de la nueva pantalla.
- Seleccione APIs y servicios y luego Credenciales.
- Seleccione Crear credenciales y luego Clave API.
- Seleccione Restringir clave y seleccione Referencias HTTP.
- Selecciona Guardar.
- Copie la clave API y péguela en la página de opciones de diseño que lo requiera.
Una vez que tenga la clave API, puede implementar Google Map en su sitio web utilizando las herramientas de diseño de temas. Mientras el tema responda, el mapa también debería serlo.
Use un complemento para incrustar un mapa de Google receptivo
WordPress usa complementos, Joomla usa extensiones, Drupal usa módulos o complementos y otros CMS usan convenciones de nomenclatura similares. De cualquier manera, los complementos se refieren a elementos modulares que puede atornillar a su CMS central para agregar funciones. Una característica útil es un mapa de Google. Si el tema de su sitio web no incluye un elemento de mapas y no desea hacer el código usted mismo, un complemento es la siguiente mejor opción.
- En WordPress, navegue a Complementos y Agregar nuevo.
- Busque Google Maps y seleccione un complemento que le guste.
- Habilítelo dentro de Complementos y vaya a su Configuración.
- Agregue la API de Google Maps que creó anteriormente donde se indica y guarde.
- Implemente el complemento donde quiera que aparezca el mapa.
Otros CMS difieren ligeramente en sus nombres y posiciones de menú, pero el principio es muy similar. La mayoría, si no todos, los complementos de mapas requerirán la API de Google Maps para funcionar.
Use el código para incrustar un mapa de Google receptivo
Si no usa WordPress u otro CMS, aún puede incrustar un Google Map receptivo. Solo necesita usar código en lugar de un módulo. Se necesita un poco más de trabajo, pero entregará los mismos mapas receptivos.
- Visite Google Maps y navegue hasta que el mapa que desea mostrar llene la pantalla.
- Seleccione el enlace azul Compartir y copie el código de Insertar mapa.
- Agregue su código de inserción específico al siguiente código entre y.
- Agregue el código dentro del HTML de su página web donde desea ver el mapa.
- Guarda tus cambios.
El código:
Este no es mi código, lo encontré en línea pero lo probé en mi sitio web. Funciona a las mil maravillas y debería funcionar tanto si utiliza un CMS, HTML, Hugo o uno de los muchos otros lenguajes de sitios web o herramientas de página.
