La manera más sencilla de añadir Google Maps en tu sitio web

Cuando desarrollamos un sitio web, habitualmente se nos indica que debemos incluir un mapa para que los usuarios sepan ubicar la empresa, los productos, contactos... Google Maps es el servicio de mapas más popular hoy en día que nos proporciona una gran variedad de herramientas y servicios que puedes utilizar a tu antojo.

En este tutorial te mostraremos cómo añadir un mapa de Google Maps de manera sencilla en tu sitio web, para después personalizarlo utilizando la librería gMaps.js. Es una librería sencilla y fácil de utilizar, la cual te permite utilizar todo el potencial de Google Maps sin necesidad de escribir líneas y líneas de código.

Para ejemplificar el uso de Google Maps, he creado un diseño sencillo utilizando HTML y Bootstrap 4.

HTML

Nuestro diseño Bootstrap consiste en una fila y dos columnas. En la columna de la izquierda mostraremos el mapa de Google y en la columna de la derecha contaremos con encabezados, textos, íconos de font-awesome y una pequeña galería de imágenes.

<div class="map-example">
    <div class="row">
        <div class="col-lg-6">
            <div id="map"></div>
        </div>
        <div class="col-lg-6">
            <div class="heading">
                <h3>Lorem Ipsum Dolor</h3>
                <div class="rating">
                    <i class="fa fa-star icon"></i>
                    <i class="fa fa-star icon"></i>
                    <i class="fa fa-star icon"></i>
                    <i class="fa fa-star icon"></i>
                    <i class="fa fa-star-o icon"></i>
                </div>
            </div>
            <div class="info">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare leo porta cursus porttitor. Proin quis tempor lectus. Cras sodales nisi ut felis tincidunt suscipit. Nullam consectetur odio et lacus tempor vestibulum.</p>
                <p>Aenean convallis, tortor eget vehicula vestibulum, sem nibh rutrum sem, vel sodales nisl velit eu ex. Sed hendrerit efficitur sollicitudin. Maecenas tempus augue lacus.</p>
            </div>
            <div class="gallery">
                <h4>Photos</h4>
                <div class="row">
                    <div class="col-md-4">
                        <a href="assets/img/image2.jpg"><img class="img-fluid image" src="assets/img/image2.jpg"></a>
                    </div>
                    <div class="col-md-4">
                        <a href="assets/img/image3.jpg"><img class="img-fluid image" src="assets/img/image3.jpg"></a>
                    </div>
                    <div class="col-md-4">
                        <a href="assets/img/image4.jpg"><img class="img-fluid image" src="assets/img/image4.jpg"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Configuración del mapa

Para utilizar Google Maps, debemos importar la librería gMaps.js y la API de Google Maps. Para ello necesitaremos una clave API, por lo que si ya tienes una, puedes usarla; de lo contrario, puedes crearla en Google Developer Console. Cuando tengas tu clave lista, simplemente reemplaza la parte "YOUR_API_KEY" del script.

<script src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.25/gmaps.js"></script>

Ahora debemos generar el mapa. Creamos un nuevo objeto map y como parámetros configuramos el selector ('#map'), y la latitud y longitud del punto que queremos mostrar en el mapa.

A continuación tenemos que añadir un marcador en el mapa. Para hacerlo, utilizaremos el método addMarker() con la latitud y longitud donde desees colocarlo. También podemos establecer el zoom inicial en el que se muestra el mapa usando el método setZoom() con un número entero como parámetro. Cuanto más bajo sea el número, más "ampliado" estará el mapa.

var map = new GMaps({
    el: '#map',
    lat:  40.730610,
    lng: -73.935242
});

map.addMarker({
    lat: 40.700610,
    lng: -73.997242,
    title: 'New York'
});

map.setZoom(8);

CSS

Los estilos se encuentran en un archivo CSS separado. Ya que estamos usando Bootstrap, la mayoría del estilo está desarrollado por el framework. Hemos agregado algunos ajustes de margin y padding, colores de fuente y box-shadows.

.navbar.navbar-light.navbar-expand-lg.bg-white.page-navbar {
  box-shadow:0 4px 10px rgba(0, 0, 0, 0.1);
}

.navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show > .nav-link {
  font-weight:bold;
}

.nav-item.item {
  padding-right:2rem;
}

.navbar-nav:last-child .item:last-child, .navbar-nav:last-child .item:last-child a {
  padding-right:0;
}

.map-example .heading .icon {
  color:#ffb526;
}

.map-example {
  margin-top:50px;
  padding-bottom:100px;
}

.map-example .heading {
  margin-bottom:20px;
  border-bottom:1px solid #e4e4e4;
  padding-bottom:30px;
}

.map-example .info {
  margin-bottom:20px;
  border-bottom:1px solid #e4e4e4;
  padding-bottom:20px;
  color:#636363;
}

.map-example .gallery h4 {
  margin-bottom:30px;
}

.map-example .gallery .image {
  margin-bottom:15px;
  box-shadow:0px 2px 10px rgba(0, 0, 0, 0.15);
}

.map-example #map {
  height: 300px;
  margin-bottom: 20px;
}

.page-footer {
  padding-top:32px;
  border-top:1px solid #ddd;
  text-align:center;
  padding-bottom:20px;
}

.page-footer a {
  margin:0px 10px;
  display:inline-block;
  color:#282b2d;
  font-size:18px;
}

.page-footer .links {
  display:inline-block;
}

@media(min-width: 992px){
  .map-example #map{
    height: 500px;
  }
}