PHP code example of imamhsn195 / interactive-map

    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

imamhsn195 / interactive-map example snippets

'stacks' => [
    'styles' => 'css',    // Match your @stack('css')
    'scripts' => 'js',    // Match your @stack('js')
],

public function contact()
{
    $locations = [
        [
            'name' => 'Dubai Office',
            'lat' => 25.17188147144341,
            'lng' => 55.3556179237354,
            'url' => 'https://maps.app.goo.gl/uYiJ6CfwoNm3XGgh9',
            'address' => 'Ras Al Khor Industrial Area, Dubai',
        ],
    ];

    return view('contact', compact('locations'));
}

// In your controller
public function locations()
{
    $locations = Location::all()->map(function ($location) {
        return [
            'name' => $location->name,
            'lat' => $location->latitude,
            'lng' => $location->longitude,
            'url' => $location->google_maps_url,
            'address' => $location->address,
        ];
    })->toArray();

    return view('locations', compact('locations'));
}

return [
    'default' => [
        'tile_layer' => 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        'attribution' => '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        'zoom' => 8,
        'padding' => [50, 50],
        'marker_click_zoom' => 11,
    ],
    
    'container' => [
        'id' => 'mapContainer',
        'class' => 'w-100 h-100',
        'height' => '400px',
        'width' => '100%',
    ],

    /*
    | Blade Stack Names
    | Configure the stack names used for pushing styles and scripts.
    | These should match the @stack directives in your layout file.
    */
    'stacks' => [
        'styles' => 'styles',  // Change to match your layout's @stack('styles')
        'scripts' => 'scripts', // Change to match your layout's @stack('scripts')
    ],
];

blade
@php
    $locations = [
        [
            'name' => 'Location 1',
            'lat' => 25.17,
            'lng' => 55.35,
            'url' => 'https://maps.app.goo.gl/...',
            'address' => 'Address here',
        ],
    ];
@endphp

{!! interactive_map($locations, 'contactMap', '400px', '100%') !!}