Como implementar un mapa de google en mi sitio web

En este breve tutorial, explicaremos cómo implementar un mapa de Google en nuestros sitios web. Lamentablemente, no tenemos como garantizar que este proceso se mantenga igual en el tiempo, ya que, Google, y en general todas las compañías, van remodelando/reestructurando sus plataformas, ya sea por usabilidad, por seguridad de la información o por motivos internos. De cualquier forma y dentro de todo lo posible, iremos actualizando este tutorial y así poder ayudarlos con las futuras actualizaciones.

 

  • Lo primero que debes hacer es acceder a https://www.google.cl/maps
  • Luego, en el recuadro que dice “Busca en google maps”, escribe la dirección partiendo por el país, ciudad, calle y número.

  • Una vez encontrada la dirección, debes dar click derecho del mouse sobre el mapa y dar click en “Ruta hacia aquí”.

  • Se generará el mapa, el cual entrega la opción inmediata para que los usuarios puedan ingresar su ubicación actual y así activar su GPS, entregando la ruta a pie, en locomoción y/o en auto.
  • Finalmente, en el menú desplegable, das click en Compartir o insertar mapa y luego en insertar mapa. Esto entregará un código que inicia con iframe. Este código debes copiarlo y pegarlo en el cuerpo html de nuestro sitio web (Dentro del body) y si es un sitio web desarrollado por Emagenic, debes pegarlo en la herramienta iframe del texto enriquecido, retirando todo el texto y dejando solo lo que está entre comillas dentro, después del texto que dice: src="

Observaciones: En el código que genera google maps, puedes observar que dice: width (ancho del mapa) y height (alto del mapa). Recomendamos que el ancho lo dejen en 100%, para que se ajuste a los diferentes dispositivos y el alto puede ser el sugerido por google.

 

Esperamos que con esto puedan implementar sus google maps y si tienen dudas pueden escribirnos en nuestras redes sociales.

NUESTRAS TECNOLOGÍAS

Como empresa, nos comprometemos a utilizar siempre las últimas tecnologías disponibles en el medio.

Html5
Css3
Javascript
Laravel
Bootstrap
Vue.js