How to add google map in laravel with example

on

Google Maps is one of the most popular and widely used web mapping services in the world. Integrating Google Maps into your Laravel application can provide numerous benefits, including providing location-based services, improving user experience, and enhancing the overall functionality of your application. In this step-by-step guide, we will walk you through the process of adding Google Maps to your Laravel application.

Step 1: Create a new Laravel Project First, create a new Laravel project using the following command:

laravel new my-map-app

Step 2: Install Laravel Collective To work with forms in Laravel, we will use the Laravel Collective package. You can install it using the following command:

composer require "laravelcollective/html":"^5.5"

Step 3: Configure Google Maps API To use Google Maps API, you need to create a project in the Google Cloud Console and enable the Google Maps JavaScript API. Once done, generate an API key to use it in your Laravel application.

Step 4: Create a new route Create a new route in routes/web.php to display the map.

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

Step 5: Create a new controller Create a new controller named MapController using the following command:

php artisan make:controller MapController

Step 6: Define a method to display the map Add the following code to the MapController to define a method to display the map.

<?phpnamespace App\Http\Controllers;use Illuminate\Http\Request;class MapController extends Controller{    public function index()    {        $apiKey = 'YOUR_GOOGLE_MAPS_API_KEY';        return view('map', compact('apiKey'));    }}

Step 7: Create a view to display the map Create a new view named map.blade.php in the resources/views folder. Add the following code to the view to display the map.

<!DOCTYPE html><html><head>    <title>Google Map Example</title>    <style>        #map {            height: 500px;            width: 100%;        }    </style></head><body>    <h1>Google Map Example</h1>    <div id="map"></div>    <script src="https://maps.googleapis.com/maps/api/js?key={{ $apiKey }}"></script>    <script>        function initMap() {            var myLatLng = {lat: -25.363, lng: 131.044};            var map = new google.maps.Map(document.getElementById('map'), {                zoom: 4,                center: myLatLng            });            var marker = new google.maps.Marker({                position: myLatLng,                map: map,                title: 'Hello World!'            });        }    </script>    <script async defer        src="https://maps.googleapis.com/maps/api/js?key={{ $apiKey }}&callback=initMap">    </script></body></html>

Step 8: Route to the view Finally, update the index() method of the MapController to route to the map view.

public function index(){    $apiKey = 'YOUR_GOOGLE_MAPS_API_KEY';    return view('map', compact('apiKey'));}

That’s it! You can now visit http://your-app-url/map to see the map in action. Note that you will need to replace YOUR_GOOGLE_MAPS_API_KEY with your actual API key.

Conclusion

integrating Google Maps into your Laravel application can provide numerous benefits, including providing location-based services, improving user experience, and enhancing the overall functionality of your application. With this step-by-step guide, you can easily add Google Maps to your Laravel application and take advantage of the many features it has to offer. By following these steps, you will be able to display a map with a marker on your application, and customize it according to your needs. Remember to always use an API key when working with Google Maps to ensure security and avoid any unexpected errors.

Comments

Post a Comment