Maps for your Laravel application

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.

Features

	Google Maps	OpenStreetMap	Bing Maps	MapQuest	Yandex Maps	MapKit
Map	✔	✔	✔	✔	✔	✔
Markers	✔	✔	✔	✔	✔	✔
Marker Title	✔	✔	✔	✔	✔	✔
Marker Link	✔	✔	✔	✔	✔	✔
Custom Marker Icon	✔	✔	✔	✔	✔	✔
Marker Popup	✔	✔	✔	✔	✔	❌
Marker Click Event	✔	✔	✔	✔	✔	✔

Installation

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

Usage

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 custom marker icon. The URL to the icon image can be absolute or relative.

@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.

@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:

.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;
}

Advanced Customization

Map Initialized

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:

• Google Maps
• OpenStreetMap
• Bing Maps
• MapQuest
• Yandex Maps
• MapKit (beta)

Marker Clicked

The event LaravelMaps:MarkerClicked will be dispatched when a marker was clicked. The DOM element, map, markers 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);
});

Changelog

Please see CHANGELOG for more information what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please email em@gonoware.com instead of using the issue tracker.

Credits

• Emanuel Mutschlechner
• Benedikt Tuschter
• All Contributors

License

MIT

Copyright (c) 2018-present Go NoWare