How to show markers location in google map dynamically in laravel

Google Maps is a powerful tool that can be used to display maps and location data on web applications. In this tutorial, we will be learning how to show markers location in Google Maps dynamically from a database in Laravel. By the end of this tutorial, you will be able to retrieve location data from a database and display it as markers on a Google Map in your Laravel application.

Step 1: Create a new Laravel Project

To get started, create a new Laravel project by running the following command in your terminal:

composer create-project --prefer-dist laravel/laravel project-name

Step 2: Set up the database

Next, set up the database connection in the .env file. You can use any database of your choice. Once the database connection is set up, create a new table to store the location data. For this example, let’s call the table locations and add the following columns:

idnamelatitudelongitude

Step 3: Install Google Maps JavaScript API

You can install the Google Maps JavaScript API by adding the following script tag to your HTML file:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

Make sure to replace YOUR_API_KEY with your own Google Maps API key.

Step 4: Create the view

Create a new view file called map.blade.php in the resources/views directory. In this view file, add a div element to hold the map:

<div id="map" style="height: 500px;"></div>

Step 5: Create the controller

Create a new controller called LocationController by running the following command in your terminal:

php artisan make:controller LocationController

In the LocationController class, create a method called index that retrieves the location data from the database and passes it to the view:

<?phpnamespace App\Http\Controllers;use Illuminate\Http\Request;use Illuminate\Support\Facades\DB;class LocationController extends Controller{    public function index()    {        $locations = DB::table('locations')->get();        return view('map', ['locations' => $locations]);    }}

Step 6: Add the route

Add a new route to the web.php file that maps to the index method of the LocationController:

Route::get('/', [LocationController::class, 'index']);

Step 7: Display the markers on the map

In the map.blade.php file, add the following JavaScript code to display the map and the markers:

<script>    function initMap() {        // Create a new map object        var map = new google.maps.Map(document.getElementById('map'), {            zoom: 8,            center: {lat: 37.7749, lng: -122.4194}        });        // Loop through the locations and add a marker for each one        @foreach($locations as $location)            new google.maps.Marker({                position: {lat: {{ $location->latitude }}, lng: {{ $location->longitude }}},                map: map,                title: '{{ $location->name }}'            });        @endforeach    }</script>

This code loops through the locations and adds a marker for each one with the latitude and longitude values from the database.

Step 8: Call the initMap function

Finally, call the initMap function to display the map and the markers:

<script>    function initMap() {        // Create a new map object        var map = new google.maps.Map(document.getElementById('map'), {            zoom: 8,            center: {lat: 37.7749, lng: -122.4194}        });        // Loop through the locations and add a marker for each one        @foreach($locations as $location)            new google.maps.Marker({                position: {lat: {{ $location->latitude }}, lng: {{ $location->longitude }}},                map: map,                title: '{{ $location->name }}'            });        @endforeach    }</script><script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

Make sure to replace YOUR_API_KEY with your own Google Maps API key. The async defer attributes on the script tag ensure that the script is loaded asynchronously and does not block the page rendering.

Conclusion

In this tutorial, we have learned how to show markers location in Google Maps dynamically from a database in Laravel. By following the steps outlined in this tutorial, you can easily retrieve location data from your database and display it as markers on a Google Map in your Laravel application. This functionality can be useful for a wide range of applications, such as displaying store locations, event venues, or other points of interest. With this knowledge, you can now add dynamic mapping functionality to your Laravel application and create a more interactive user experience for your users.