Laravel Store Locator: A Guide to Connecting with Local Customers

Prerequisite: Generating Your MapCosmos Embed Code

Before implementation, you must configure your locator and retrieve the installation code from the MapCosmos platform. This initial setup is done entirely within the MapCosmos dashboard.

The process involves creating an account, adding your business locations either manually or via a bulk CSV/Excel import, and customizing the widget's appearance to align with your brand's design language. Once configured, copy the embed code provided in the widget settings.

For a complete walkthrough of this initial setup, please refer to our detailed guide on generating the installation code.

Implementation Steps within a Laravel Application

Step 1. Establish a Route

First, define a route in your routes/web.php file. This route will point to a controller method or directly return the view that will display the store locator.

PHP

//routes/web.php 
Route::get('/store-locator', function () { return view('store-locator'); })->name('locations.find');

Step 2. Create the Blade View

Next, create a new Blade file at resources/views/store-locator.blade.php. This file will contain the embed code.

PHP

//resources/views/store-locator.blade.php

@extends('layouts.app') // Assuming you have a main layout file

@section('content')
<div class="container">
	<h1>Our Locations</h1>
    <p>Find a store near you to experience our products and services in person.</p>
    <script type="text/javascript" src="https://widget.mapcosmos.com/map-widget.js?key=WIDGET_KEY" async></script>
    <div id="map-cosmos-container"></div>
 </div>
@endsection

Step 3. Embed the Widget Code

Paste the installation code you copied from the MapCosmos dashboard directly into the

store-locator.blade.php file where indicated. The Laravel Blade engine will render the HTML and JavaScript snippet correctly, displaying the interactive map on the page.

Finalizing the Integration

To ensure users can find the locator, add a link to your new page in your site's primary navigation, which is often located in a master layout file like resources/views/layouts/app.blade.php.

HTML

<a class="nav-link" href="{{ route('locations.find') }}">Find a Store</a>

By completing these steps, you have successfully integrated a dynamic MapCosmos widget that empowers your customers to find your locations instantly, get one-click directions, and filter results by products or services offered.