Como poner un Mapa en tu sitio Web

Aunque tú página Web tiene visibilidad sin importar de una dirección física, siempre es importante que tus clientes conozcan tu ubicación presencial (si la tienes); esto cobra mayor importancia si tu empresa tiene sedes que los clientes puedan visitar en “el mundo real”.

Existen varias maneras de colocar un mapa con la ubicación de tus tiendas, desde soluciones libres hasta de grandes compañías como Google; en el presente documento te diremos las ventajas y desventajas de algunas de ellas, junto con unos tips para su implementación.

Lo primero que debes tener es la coordenada de los sitios que quieres tener en tu página, esta información la puedes obtener fácilmente con el A-GPS de tú celular.

Google Maps

Google lleva años ofreciendo una plataforma en la cual se puede poner información teniendo de fondo la cartografía de Google Maps. Esta plataforma en un principio fue gratuita pero actualmente es de pago después de cierto número de consultas.

Entre sus ventajas y desventajas tenemos:

Ventajas

  • Cartografía actualizada
  • Utiliza el motor de búsqueda implementado por Google
  • Económica en páginas de bajo tráfico.
  • Facilidad de uso e implementación.
  • Amplia documentación y configuración.

Desventajas

  • Herramienta de pago.
  • Posible publicidad indeseada.
  • Requiere cuenta en Google.
  • Si no se crea cuenta de pago, la pagina no se muestra correctamente.

Implementación

Para realizar la implementación se requieren conocimientos de HTML, CSS y un poco de JavaScript; junto con una cuenta de Google para obtener una llave que es la que te dará acceso a la herramienta.

Recuerda que debes tener las coordenadas de los sitios para una correcta georreferenciación junto con la información que desees publicar.

La documentación para la implementación la encuentras en:
https://developers.google.com/maps/documentation/javascript/adding-a-google-map

Como ejercicio, dentro de la pagina debes agregar el siguiente código (al final del articulo esta el código disponible para descarga):

css mapa

Estilo que debes configurar según tus necesidades, va en los encabezados de la página, o en tu código de estilos.

html mapa con js

Al hacer la división para el mapa, puedes ponerle un estilo (tamaño, colores, textos, etc.) si así lo quieres.

Ten en cuenta de poner la coordenada del sitio de tú interés sobre el que estará centrado el mapa, para este código la coordenada corresponde a la plaza de Bolívar en Bogotá.

Se debe poner dentro del código la llave suministrada por Google; a continuación, te informamos como obtenerla.

Obtener Google API_KEY

Una API_KEY de Google es un identificador único que debes solicitar para cada proyecto que use las API (Application Programming Interface) de esta compañía; la API esta enlazada con tú cuenta con el fin de tener registro de uso, ten en cuenta que puede haber cargos por el uso de esta herramienta.

Las condiciones del servicio las puedes consultar en: https://cloud.google.com/terms/?_ga    
https://console.cloud.google.com/tos?id=universal

Después de leer las condiciones debes dirigirte a la plataforma de Google Cloud donde podrás acceder o crear una cuenta en Google: https://console.cloud.google.com

Después de autenticarte con tu cuenta de Google, deberás aceptar los términos y condiciones del servicio.

google api key
configuracion api key

Después de estos pasos deberás suministrar el nombre del proyecto:

nombre proyecto

estadisticas
Pagina de estadísticas y configuración del proyecto

Debes ir al menú Credenciales y crear una nueva credencial

Clave de API
Clave Creada

Copiamos la llave y la escribimos en el script de Google:

Copiar script JS

Por último solo nos queda activar el API.

Activación del API

Para que el código funcione, debes activar el API; esto lo haces en el tablero de trabajo de Google dentro de Panel de Control.

Activacion API

Te aparecerán todas la API’s que podrás utilizar, como ves son bastantes y para diferentes plataformas:

Javascript API
Selecciona JavaScript API
Javascript API
Ejemplo Google Maps

Los precios del uso del API los puedes consultar en:
https://developers.google.com/maps/documentation/javascript/usage-and-billing?hl=es

El siguiente es el código utilizado para añadir el mapa:

<!doctype html>
<html>
<head>  
  <meta charset="utf-8">
  <title>Ejemplo Google Maps</title>
  <style>
    /* Set the size of the div element that contains the map */
    #mapa {
      height: 400px;  /* The height is 400 pixels */
      width: 45%;  /* The width is the width of the web page */
      background-color: lightgray;
     }
  </style>
</head>
<body>
  <app-root></app-root>
  <h3>Ejemplo Google Maps</h3>
    <!--The div element for the map -->
    <div id="mapa"></div>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=TU_LLAVE_AQUI&callback=initMap"></script>
    <script>
      // Initializa y anade el mapa
      function initMap() {
        // Coordenada del sitios que queremos resaltar.
        var punto_inicial = {lat: 4.597965, lng: -74.076098};
        // Mapa centrado en punto_inicial
        var map = new google.maps.Map(
            document.getElementById('mapa'), {zoom: 18, center: punto_inicial});
        // Marcador posicionado en el punto_inicial
        var marker = new google.maps.Marker({position: punto_inicial, map: mapa});        
      }
    </script>
</body>
</html>

Comentarios

Share