Estas buscando una manera sencilla de implementar Google Maps o Leaflet.js en tu proyecto de Laravel? Hace poco tiempo salió la primer versión del paquete que te va a ayudar a agregar mapas de manera rápida en los componentes Blade. Se trata de un paquete creado por Lars Wiegers en @github para simplificarnos todo el proceso.
El paquete se llama laravel-maps y esta disponible para instalar con composer. laravel-maps no es nada mas ni nada menos que componentes para integrar en blade. Con tan solo llamar al componente de Google Maps o Leaflet vamos a estar integrando los mapas en Laravel.
Agregar Mapas a Laravel
Para empezar a utilizar laravel-maps, ejecutamos dentro de nuestra aplicación de Laravel el siguiente comando:
composer require larswiegers/laravel-mapsUna vez que esta integrado nuestro mapa, vamos a pasar a realizar las configuraciones de acceso. En el caso de que no lo sepas, Leaflet.js necesita un tileset para funcionar y poder mostrar la imagen del mapa. Para leaflet.js tenemos dos opciones.
Agregar Leaflet.js en Laravel
Openstreetmap
Openstreetmap es un set de tiles creados por la comunidad. No es necesario realizar ningún tipo de configuración adicional, ya que viene por defecto. Mas información en: openstreetmap.org
Mapbox
Mapbox ofrece tiles gratis y de pago. Es mucho mas certero y actualizado a la hora de mostrar la imagen. Para instalar Mapbox en Laravel vamos a la pagina mapbox.com y nos registramos. Luego de registrados, nos van a proporcionar un Token de Acceso que lo vamos a agregar en el .env de nuestro proyecto en Laravel.
MAPS_MAPBOX_ACCESS_TOKEN = XXXXXXXXXXXXXXXXXXXXXXXXXAgregar Google Maps en Laravel
Para mostrar el mapa de Google, necesitamos regístranos en console.cloud.google.com crear un Token de Acceso a la API y además dar de alta el servicio de Mapas en la consola. Una vez finalizado el registro, agregamos el token en nuestro .env:
MAPS_GOOGLE_MAPS_ACCESS_TOKEN = XXXXXXXXXXXXXXXXXXXXXXXXXMostrar el mapa en Laravel Blade
Para empezar a usar este paquete de fácil implementación de mapas en Laravel vamos a usar los componentes que ya vienen incorporados. Para Leaflet.js usamos los siguientes componentes de Laravel:
// Leaflet
// Mapa básico
<x-maps-leaflet></x-maps-leaflet>
// Mapa con Latitud y Longitud
<x-maps-leaflet :centerPoint="['lat' => 52.16, 'long' => 5]"></x-maps-leaflet>
// Mapa con Zoom
<x-maps-leaflet :zoomLevel="6"></x-maps-leaflet>
// Agregarle Marcadores
<x-maps-leaflet :markers="[['lat' => 52.16444513293423, 'long' => 5.985622388024091]]"></x-maps-leaflet>Y por ultimo, si queremos mostrar los mapas de Google Maps en Laravel:
// Google maps
// Mapa con Latitud y Longitud
<x-maps-google :centerPoint="['lat' => 52.16, 'long' => 5]"></x-maps-google>
// Mapa con Zoom
<x-maps-google :zoomLevel="6"></x-maps-google>
// Mapas con Marcadores
<x-maps-google :markers="[['lat' => 52.16444513293423, 'long' => 5.985622388024091]]"></x-maps-google>La documentación oficial de laravel-maps la podes encontrar en el repositorio oficial: LarsWiegers/laravel-maps: Your laravel maps libary. (github.com)