# Maps for your Laravel application

[![GitLab Repository](https://img.shields.io/badge/GitLab-gonoware/laravel--maps-blue.svg?logo=gitlab&style=flat-square&longCache=true)](https://gitlab.com/gonoware/laravel-maps)
[![Laravel Version](https://img.shields.io/badge/Laravel-5.5-blue.svg?logo=laravel&style=flat-square&longCache=true)]()
[![Laravel Version](https://img.shields.io/badge/Laravel-6-blue.svg?logo=laravel&style=flat-square&longCache=true)]()
[![Latest Stable Version](https://poser.pugx.org/gonoware/laravel-maps/v/stable?format=flat-square)](https://packagist.org/packages/gonoware/laravel-maps)
[![StyleCI](https://gitlab.styleci.io/repos/8146646/shield)](https://gitlab.styleci.io/repos/8146646)
[![License](https://poser.pugx.org/gonoware/laravel-maps/license?format=flat-square)](https://packagist.org/packages/gonoware/laravel-maps)
[![Total Downloads](https://poser.pugx.org/gonoware/laravel-maps/downloads?format=flat-square)](https://packagist.org/packages/gonoware/laravel-maps)

Using this package you can easily display maps on your website.

Supported map services: 
 * Google Maps
 * OpenStreetMap
 * Bing Maps
 * MapQuest
 * Yandex Maps
 * MapKit (beta)

> Note: Yandex Maps API does not work in Chrome.

## Installation

This package can be installed through Composer.
```bash
composer require gonoware/laravel-maps
```
Laravel 5.5 uses Package Auto-Discovery, so doesn't require you to manually add 
the ServiceProvider.

Publish the compiled assets to `public/vendor/maps` with one of these 
commands:
```bash
php artisan vendor:publish --tag=maps
```
```bash
php artisan vendor:publish --provider="GoNoWare\Maps\MapsServiceProvider" --tag=public
```
> When updating, use the `--force` switch to overwrite existing assets:
```bash
php artisan vendor:publish --tag=maps --force
```

Optionally, you can also publish the config file of this package with this 
command to `config/vendor/maps.php`:
```bash
php artisan vendor:publish --provider="GoNoWare\Maps\MapsServiceProvider" --tag=config
```


## Usage

Load the map styles by adding the following directive to your
Blade template before the `</head>` closing tag.
```php
@mapstyles
```

Then add the following directive to your Blade template
before the `</body>` closing tag, to load the map scripts.
```php
@mapscripts
```

Display a map by adding the `@map` directive to your Blade template.
```php
@map([
    'lat' => '48.134664',
    'lng' => '11.555220',
    'zoom' => '6',
])
```
You can also show markers/pins/annotations:
```php
@map([
    'lat' => '48.134664',
    'lng' => '11.555220',
    'zoom' => '6',
    'markers' => [[
        'title' => 'Go NoWare',
        'lat' => '48.134664',
        'lng' => '11.555220',
    ]],
])
```

Open a url when a marker is clicked
```php
@map([
    'lat' => '48.134664',
    'lng' => '11.555220',
    'zoom' => '6',
    'markers' => [[
        'title' => 'Go NoWare',
        'lat' => '48.134664',
        'lng' => '11.555220',
        'url' => 'https://gonoware.com',
    ]],
])
```

Show a custom marker icon. The URL to the icon image can be absolute or relative.
```php
@map([
    'lat' => '48.134664',
    'lng' => '11.555220',
    'zoom' => '6',
    'markers' => [[
        'title' => 'Go NoWare',
        'lat' => '48.134664',
        'lng' => '11.555220',
        'url' => 'https://gonoware.com',
        'icon' => 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
    ]],
])
```

Additionally you may also specify the icon image size and anchor in pixels. The icon will be aligned so that the anchor point is at the marker's geographical location.
```php
@map([
    'lat' => '48.134664',
    'lng' => '11.555220',
    'zoom' => '6',
    'markers' => [[
        'title' => 'Go NoWare',
        'lat' => '48.134664',
        'lng' => '11.555220',
        'url' => 'https://gonoware.com',
        'icon' => 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
        'iconSize' => [20, 32],
        'iconAnchor' => [0, 32],
    ]],
])
```

## Customization

To adjust the height of the map use CSS:
```css
.gnw-map-service {
    height: 750px;
}
```

Change the background of the map container:
```css
.gnw-map-service__osm {
    background: rgb(221, 221, 221);
}
```

Fade in by default when using Bootstrap 3.3.7 or 4+. To replicate or modify the animation use following CSS:
```css
.gnw-map.fade {
    transition: opacity .15s linear;
}
.gnw-map.fade:not(.show) {
    opacity: 0;
}
```

## Advanced Customization
The event `LaravelMapInitialized` will be dispatched when a map and its markers were initialized. The DOM element, map, 
markers and service name can be accessed via the event details. 
```js
window.addEventListener('LaravelMapInitialized', function (event) {
    var element = event.detail.element;
    var map = event.detail.map;
    var markers = event.detail.markers;
    var service = event.detail.service;
    console.log(element, map, markers, service);
});
```
Please refer to the respective documentation for advanced customization:
 * [Google Maps](https://developers.google.com/maps/documentation/javascript/tutorial)
 * [OpenStreetMap](https://leafletjs.com/reference-1.6.0.html)
 * [Bing Maps](https://leafletjs.com/reference-1.6.0.html)
 * [MapQuest](https://leafletjs.com/reference-1.6.0.html)
 * [Yandex Maps](https://tech.yandex.com/maps/jsapi/)
 * [MapKit (beta)](https://developer.apple.com/documentation/mapkitjs)

## Changelog

Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.


## Contributing

Please see [CONTRIBUTING](CONTRIBUTING.md) for details.


## Security

If you discover any security related issues, please email [em@gonoware.com](mailto:em@gonoware.com) 
instead of using the issue tracker.


## Credits

- [Emanuel Mutschlechner](https://gitlab.com/emanuel)
- [Benedikt Tuschter](https://gitlab.com/benedikttuschter)
- [All Contributors](https://gitlab.com/gonoware/laravel-maps/graphs/master)


## License

[MIT](LICENSE.md)
 
Copyright (c) 2018-present Go NoWare
 
[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgitlab.com%2Fgonoware%2Flaravel-maps.svg?type=large)](https://app.fossa.io/projects/git%2Bgitlab.com%2Fgonoware%2Flaravel-maps?ref=badge_large)