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.
For Laravel 5.5 use version 1.0.3
Google Maps | OpenStreetMap | Bing Maps | MapQuest | Yandex Maps | MapKit | |
---|---|---|---|---|---|---|
Map | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
Markers | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
Marker Links | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
Marker Popups | ✔ | ✔ | ✔ | ✔ | ✔ | ❌ |
Custom Marker Icons | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
Marker Click Event | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
This package can be installed through Composer.
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:
php artisan vendor:publish --tag=maps
php artisan vendor:publish --provider="GoNoWare\Maps\MapsServiceProvider" --tag=public
When updating, use the
--force
switch to overwrite existing assets:
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
:
php artisan vendor:publish --provider="GoNoWare\Maps\MapsServiceProvider" --tag=config
Load the map styles by adding the following directive to your
Blade template before the </head>
closing tag.
@mapstyles
Then add the following directive to your Blade template
before the </body>
closing tag, to load the map scripts.
@mapscripts
Display a map by adding the @map
directive to your Blade template.
@map([
'lat' => 48.134664,
'lng' => 11.555220,
'zoom' => 6,
])
You can also show markers / pins / annotations:
@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.
@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 popup when a marker is clicked. The popup
attribute may contain HTML markup.
@map([
'lat' => 48.134664,
'lng' => 11.555220,
'zoom' => 6,
'markers' => [
[
'title' => 'Go NoWare',
'lat' => 48.134664,
'lng' => 11.555220,
'popup' => '<h3>Details</h3><p>Click <a href="https://gonoware.com">here</a>.</p>',
],
],
])
Show a custom marker icon. Absolute and relative URLs are supported.
@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 image will be aligned so that the tip of the icon is at the marker's geographical location.
@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',
'icon_size' => [20, 32],
'icon_anchor' => [0, 32],
],
],
])
To adjust the height of the map use CSS:
.gnw-map-service {
height: 750px;
}
Change the background of the map container:
.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:
.gnw-map.fade {
transition: opacity .15s linear;
}
.gnw-map.fade:not(.show) {
opacity: 0;
}
The event LaravelMaps:MapInitialized
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.
window.addEventListener('LaravelMaps:MapInitialized', function (event) {
var element = event.detail.element;
var map = event.detail.map;
var markers = event.detail.markers;
var service = event.detail.service;
console.log('map initialized', element, map, markers, service);
});
Please refer to the respective documentation for advanced customization:
The event LaravelMaps:MarkerClicked
will be dispatched when a marker was clicked. The DOM element, map, marker and
service name can be accessed via the event details.
window.addEventListener('LaravelMaps:MarkerClicked', function (event) {
var element = event.detail.element;
var map = event.detail.map;
var marker = event.detail.marker;
var service = event.detail.service;
console.log('marker clicked', element, map, marker, service);
});
Please see CHANGELOG for more information what has changed recently.
Please see CONTRIBUTING for details.
If you discover any security related issues, please email [email protected] instead of using the issue tracker.
Copyright (c) 2018-present Go NoWare