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

dev-main 2023-01-09 06:25 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.