Cómo usar Componentes en Blade de Leaflet.js y Google Maps en Laravel

Tras instalar el Paquete Laravel Maps vamos a poder utilizar los componentes tanto de Leaflet.js como de Google Maps en las vistas del motor de plantillas Blade para Laravel.

Paso 1 – Crear Proyecto

Creamos un nuevo proyecto
Entramos en el directorio que acabamos de crear
Arrancamos el servidor

laravel new blade-maps
cd blade-maps
php artisan serve

Paso 2 – Instalar Laravel Maps

Instalamos el paquete vía Composer :

composer require larswiegers/laravel-maps

Paso 3 – Añadir Componente de Leaflet.js

Añadimos un componente a la plantilla welcome.blade.php :

<!DOCTYPE html>
<html>
    <body>
        <h2>Bienvenidos a Málaga</h2>
        <x-maps-leaflet :centerPoint="['lat' => 36.719631, 'long' => -4.420000]"></x-maps-leaflet>
        
    </body>
</html>

Este sería el resultado en el navegador :

Paso 4 – Añadir Componente de Google Maps

Añadimos un componente a la plantilla welcome.blade.php :

<x-maps-google :centerPoint="['lat' => 52.16, 'long' => 5]"></x-maps-google>

Este sería el resultado :

Paso 1 – Crear Proyecto

Paso 2 – Instalar Laravel Maps

Paso 3 – Añadir Componente de Leaflet.js

Paso 4 – Añadir Componente de Google Maps

Interacciones con los lectores

Comentarios

Responder a Fabián Cancelar la respuesta