Laravel Maps package allows you to easily use leaflet.js or google maps to create a map in your laravel project.
You can install the package via composer:
composer require larswiegers/laravel-maps
If you want to customize the map views more then you can publish the views:
php artisan vendor:publish --provider="Larswiegers\LaravelMaps\LaravelMapsServiceProvider"
Openstreetmap is a creative commence tile library created by volunteers. No configuration has to be set to use as it is the default file host for this library. More information can be found here: openstreetmap.org
Mapbox is a for-profit company that also offers free keys. Their map can be more accurate/precise. To get your free key go to mapbox.com Once logged in you can get your free key and use it by placing it in the env file like this
Mapbox requires you to have attribution when you use their file host. More information on that here: https://docs.mapbox.com/help/getting-started/attribution/ We provide a default value if you use mapbox. But if you want to customize it you can pass in the te text via the attribution attribute.
// Leaflet // A basic map is as easy as using the x blade component. <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>
// 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 customize the title for each markers: <x-maps-google :markers="[['lat' => 52.16444513293423, 'long' => 5.985622388024091, 'title' => 'Your Title']]"></x-maps-google>
Do note that if you want to use multiple maps on the same page that you need to specify an id per map.
Google maps api key
This library does not support livewire out of the box, but some users have found a workaround to work. Please see this issue for more information: #34
Feel free to PR a livewire component if you have the time.
For more details, please visit Github.
Published at : 16-12-2022
I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.