Al crear un sitio web, a menudo es necesario incluir un mapa para dar a las personas un mejor sentido de orientación. Google Maps es el servicio de mapas más popular en la actualidad y ofrece una amplia variedad de herramientas y servicios que puede utilizar.
En este tutorial, le mostraremos cómo agregar fácilmente un mapa a su sitio web y personalizarlo utilizando la biblioteca gMaps.js. Es una biblioteca simple y fácil de usar que le permite usar todo el potencial de Google Maps sin usar una gran cantidad de código.
Descripción general del proyecto
Para demostrar el uso de Google Maps, hemos creado un diseño simple usando HTML y Bootstrap 4. Puede consultar la imagen a continuación para ver el resultado final.
Diseño
Nuestro diseño consta de una fila Bootstrap y dos columnas. En la columna de la izquierda mostramos el mapa de Google y en la columna de la derecha tenemos encabezados, con algo de texto, íconos de fuentes increíbles 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 de mapa
Para utilizar Google Maps, debe importar la biblioteca gMaps.js y la API de Google Maps. Requiere una clave API, por lo que si ya tiene una puede usarla, de lo contrario, puede ir a este enlace para aprender cómo crear una. Cuando tenga su clave lista, simplemente reemplace 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 necesitamos generar el mapa. Creamos un nuevo objeto de mapa y como parámetros ponemos el selector ('#map'), y la latitud y longitud del punto que queremos mostrar en el mapa.
A continuación, tenemos que agregar un marcador en el mapa. Para hacerlo, use el addMarker() método con la latitud y longitud donde desea colocarlo. También podemos establecer el zoom inicial con el que se muestra el mapa usando el setZoom() Método 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);
Estilos
Los estilos se encuentran en un archivo CSS separado. Dado que estamos usando Bootstrap, la mayor parte del estilo lo realiza el marco. Hemos agregado algunos ajustes de margen y relleno, colores de fuente y sombras de cuadro.
.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;
}
}
Google Maps en Bootstrap Studio
La aplicación Bootstrap Studio ofrece una manera rápida y fácil de configurar Google Maps sin tener que escribir una sola línea de código. Puede encontrar instrucciones detalladas sobre cómo agregar Google Maps en sus proyectos en la sección de tutoriales de Bootstrap Studio.
Conclusión
Puede obtener el código fuente completo de este tutorial en Descargar botón cerca de la parte superior de la página. Eres libre de personalizarlo y usarlo en todos tus proyectos, para uso comercial o personal, no se requiere atribución (nuestra licencia).