esadewater / livewire-maps
Laravel Livewire-Maps
Installs: 156
Dependents: 0
Suggesters: 0
Security: 0
Stars: 16
Watchers: 3
Forks: 2
Open Issues: 5
Language:JavaScript
Requires
- php: ^8.1
- illuminate/contracts: ^9.0
- livewire/livewire: ^2.10
- spatie/laravel-package-tools: ^1.13.0
Requires (Dev)
- laravel/pint: ^1.0
- nunomaduro/collision: ^6.0
- orchestra/testbench: ^7.0
- pestphp/pest: ^1.21
- pestphp/pest-plugin-laravel: ^1.1
- phpunit/phpunit: ^9.5
This package is auto-updated.
Last update: 2024-10-19 23:36:35 UTC
README
⚠️ ALPHA status: This project is still in the early stages of development. It is not yet ready for production use. Further development is postponed until the release of Livewire v3.
Livewire-Maps
Basic Google Maps-implementation for Laravel-Livewire currently supporting:
Example
You can find an example here: esadewater/livewire-maps-sample
Installation
You can install the package via composer:
composer require esadewater/livewire-maps
Install the map marker npm package:
npm install @googlemaps/markerclusterer
Then include the JavaScript resources in your app.js:
import {init} from "../../vendor/esadewater/livewire-maps/resources/js/LiveWireMaps"; init();
You can publish the config file with:
php artisan vendor:publish --tag="livewire-maps-config"
You can publish the views using
php artisan vendor:publish --tag="livewire-maps-views"
Usage
Get an API-key for the Google Maps Platform from here and add it to your .env-file:
GOOGLE_MAPS_API_KEY=YOUR_KEY_GOES_HERE
Add the @livewireMapsScripts directive right after @livewireScripts and your app.js:
<script src="/js/app.js"></script> @livewireScripts @livewireMapsScripts
Then you are ready to start with a basic map with a center point and a zoom:
<livewire:map-view center-lat="52.004021" center-lng="7.710472" zoom="3" style="100vh" />
## Credits
- [Erik Sadewater](https://github.com/esadewater)
## License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.