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.

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',
    ]],
])

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