Laravel Packages

Use Leaflet.js and Google Maps Blade Components in Laravel

Published
Use Leaflet.js and Google Maps Blade Components in Laravel image

Laravel Maps is a package to easily create maps using Leaflet.js or Google Maps and Blade components. The main features that work with both map engines include:

  • Basic maps
  • Centerpoint
  • Basic Markers
  • Zoom Level
  • Can use different tiles (see tilehosts)

After you follow the installation and setup instructions, you can use the provided Blade components for rendering maps.

Here are some examples from the readme for Leaflet:

<x-maps-leaflet></x-maps-leaflet>
 
{{-- set the centerpoint of the map: --}}
<x-maps-leaflet :centerPoint="['lat' => 52.16, 'long' => 5]"></x-maps-leaflet>
 
{{-- set a zoomlevel: --}}
<x-maps-leaflet :zoomLevel="6"></x-maps-leaflet>
 
{{-- Set markers on the map: --}}
<x-maps-leaflet :markers="[['lat' => 52.16444513293423, 'long' => 5.985622388024091]]"></x-maps-leaflet>

And here are similar examples using the Google Maps Blade components:

{{-- Google maps --}}
 
{{-- set the centerpoint of the map: --}}
<x-maps-google :centerPoint="['lat' => 52.16, 'long' => 5]"></x-maps-google>
 
{{-- set a zoomlevel: --}}
<x-maps-google :zoomLevel="6"></x-maps-google>
 
{{-- Set markers on the map: --}}
<x-maps-google :markers="[['lat' => 52.16444513293423, 'long' => 5.985622388024091]]"></x-maps-google>

You can learn more about this package, get full installation instructions, and view the source code on GitHub.


This package was submitted to our Laravel News Links section. Links is a place the community can post packages and tutorials around the Laravel ecosystem. Follow along on Twitter @LaravelLinks

Paul Redmond photo

Staff writer at Laravel News. Full stack web developer and author.

Sponsored

serpapi logo
SerpApi

The Web Search API for Your LLM and AI Applications

Visit SerpApi

The latest

View all →
What's New in PHP 8.6 image

What's New in PHP 8.6

Read article
Building EasyReply: How We Used Laravel to Unify Customer Support image

Building EasyReply: How We Used Laravel to Unify Customer Support

Read article
PostgreSQL Monitoring and Schema Linting for Laravel with Vacuum image

PostgreSQL Monitoring and Schema Linting for Laravel with Vacuum

Read article
PayZephyr: One Payment API for Stripe, Paystack, and PayPal image

PayZephyr: One Payment API for Stripe, Paystack, and PayPal

Read article
Bifrost Turns One With AI Builds and New Workflows image

Bifrost Turns One With AI Builds and New Workflows

Read article
Preview Blade Templates in macOS Finder with Quick Blade image

Preview Blade Templates in macOS Finder with Quick Blade

Read article