Laravel Google Maps Example

Hello coders, In this tutorial, I will show you how to do Laravel Google Maps Example. We use farhanwazir/laravelgooglemaps Package in our application. This Package provides different service like directions, geocoding and features like localizing, geocaching, controls, etc.,  If you want to get more information, then go to Github.

Laravel Google Maps Example

We are going to Configure Laravel Project.

#1: Download Laravel Project.

Install new Laravel project by writing the following command.

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

#2: Install GoogleMaps Package.

Now we will install farhanwazir/laravelgooglemaps Package in our project.

composer require farhanwazir/laravelgooglemaps:dev-master

Let’s Add service provider in config/app.php

 FarhanWazir\GoogleMaps\GMapsServiceProvider::class,

And lastly, add in the alias section config/app.php

'GMaps' => FarhanWazir\GoogleMaps\Facades\GMapsFacade::class,

Now publish configuration file.

php artisan vendor:publish --provider="FarhanWazir\GoogleMaps\GMapsServiceProvider"

#3: Configure MySQL Database.

Now we can setup database credentials.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=googlemap
DB_USERNAME=root
DB_PASSWORD=

#4: Create one controller.

 php artisan make:controller MapController

It will create a controller file called MapController.php.

Add center, zoom,height in a google map called map() function.

use FarhanWazir\GoogleMaps\GMaps;

public function map()
    {
        $config['center'] = 'Sydney Airport,Sydney';
        $config['zoom'] = '14';
        $config['map_height'] = '400px';

        $gmap = new GMaps();
        $gmap->initialize($config);
     
        $map = $gmap->create_map();
        return view('map',compact('map'));
    }

Here we can pass the map to the view file.

#5: Create a View File

Create a file in resources  >>  views  >>   map.blade.php and put this following code in it.

Next, we can add html and javascript.

<html>
    <head>
    <title>Laravel Google Maps Example</title>
        {!! $map['js'] !!}
    </head>
<body>
    <div class="container">
            {!! $map['html'] !!}
    </div>
</body>
</html>

#6: Define Route

We register all route in a web.php file.

Route::get('googlemap', 'MapController@map');
Route::get('googlemap/direction', 'MapController@direction');

Save and run the following command in terminal to start the laravel development server.

php artisan serve

you can see the output like below image.

laravel google maps api example

Possible error : file_get_contents(): SSL operation failed with code 1. OpenSSL Error messages: error:14090086:SSL routines:ssl3_get_server_certificate:certificate verify failed in laravel.

Possible Solution: Follow this link: https://gist.github.com/odan/07c110028111647ee9615ae85cb7e71d

#7: Add Marker in Google Maps

Next, we can add the marker in google maps. So add following code in map() function.

use FarhanWazir\GoogleMaps\GMaps;

public function map()
    {
        $config['center'] = 'Sydney Airport,Sydney';
        $config['zoom'] = '14';
        $config['map_height'] = '400px';

        $gmap = new GMaps();
        $gmap->initialize($config);
     
        $marker['position'] = 'Sydney Airport,Sydney';
        $marker['infowindow_content'] = 'Sydney Airport,Sydney';

        $gmap->add_marker($marker);
        $map = $gmap->create_map();
        return view('map',compact('map'));
    }

After add marker in the map() function. the output looks like that.

laravel google maps markers

#8: Add Multiple Marker in Google Maps

Next, we can add the multiple markers in google maps. So add following code in map() function.

use FarhanWazir\GoogleMaps\GMaps;
 
public function map()
    {
        $config['center'] = 'Sydney Airport,Sydney';
        $config['zoom'] = '14';
        $config['map_height'] = '400px';

        $gmap = new GMaps();
        $gmap->initialize($config);
     
        $marker['position'] = 'Sydney Airport,Sydney';
        $marker['infowindow_content'] = 'Sydney Airport,Sydney';
        $gmap->add_marker($marker);

        $marker['position'] = 'Kogarah Golf Club,Sydney';
        $marker['infowindow_content'] = 'Kogarah Golf Club,Sydney';
        $gmap->add_marker($marker);

        $marker['position'] = 'The Lakes Golf Club,Sydney';
        $marker['infowindow_content'] = 'The Lakes Golf Club,Sydney';
        $gmap->add_marker($marker);

        $map = $gmap->create_map();
        return view('map',compact('map'));
    }

You can see below image Sydney Airport, Kogarah Golf Club, The Lakes Golf Club multiple markers are there.

how to add google map api in laravel

Now we can add geocaching in map() function.

public function map()
    {
        $config['center'] = 'Sydney Airport,Sydney';
        $config['zoom'] = '14';
        $config['map_height'] = '400px';
        $config['geocodeCaching'] = true;

        $gmap = new GMaps();
        $gmap->initialize($config);
     
        $marker['position'] = 'Sydney Airport,Sydney';
        $marker['infowindow_content'] = 'Sydney Airport,Sydney';
        $gmap->add_marker($marker);

        $marker['position'] = 'Kogarah Golf Club,Sydney';
        $marker['infowindow_content'] = 'Kogarah Golf Club,Sydney';
        $gmap->add_marker($marker);

        $marker['position'] = 'The Lakes Golf Club,Sydney';
        $marker['infowindow_content'] = 'The Lakes Golf Club,Sydney';
        $gmap->add_marker($marker);

        $map = $gmap->create_map();
        return view('map',compact('map'));
    }

We have already set up the database so perform following command in cmd. Here create_gmaps_geocache_table.php file already created so we can only migrate this file.

php artisan migrate

Save and run. You can see the database looks like that.

laravel google maps integration

#9: Add Directions in Google Maps

we can add directions in google map. If the user can go another location so it can easily find on google map and reach the destination.

Add following code in direction() in MapController file.

 public function direction()
    {
        $config['center'] = 'Sydney Airport,Sydney';
        $config['zoom'] = '14';
        $config['map_height'] = '500px';
        $config['geocodeCaching'] = true;
    
        $config['directions'] = true;
        $config['directionsStart'] = 'Sydney Airport,Sydney';
        $config['directionsEnd'] = 'Kogarah Golf Club,Sydney';
        $config['directionsDivID'] =  'directionsDiv';
    
        $gmap = new GMaps();
        $gmap->initialize($config);
        $map = $gmap->create_map();
        return view('map',compact('map'));
    
    }

Add directions in view file so we can modify the view file.

//map.blade.php

<html>
    <head>
    <title>Laravel Google Maps Example</title>
        {!! $map['js'] !!}
    </head>
<body>
    <div class="container">
            {!! $map['html'] !!}
            <div id="directionsDiv"></div>
    </div>
</body>
</html>

You can see the result like below image.

laravel gmaps example

At last, our Laravel Google Maps Example is over.

Post Your Thoughts

This site uses Akismet to reduce spam. Learn how your comment data is processed.

One Response