Laravel 11 - Google Maps integration
Laravel 11 - Google Maps integration
In this tutorial, we'll discuss how to integrate Google Maps into Laravel 11, which is useful for displaying interactive maps and location-based data.
If you're a video person, feel free to skip the post and check out the video instead!
Step # 1 : Create fresh Laravel project or use existing project.
Two commands to create fresh laravel project
Global Command : laravel new google-maps
Or use
Non Global Command : composer create-project laravel/laravel --prefer-dist google-maps
Step # 2 : Access the project.
Open a terminal (e.g., Git Bash) and navigate to your Laravel project's root folder.
Git Bash : cd c:xampp/htdocs/google-maps
Step # 3 : Update view.
Update the welcome.blade.php file with the following HTML to display Google Maps
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laravel 11 - Google Maps - Code Shotcut</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<div class="container" style="margin-top: 50px;">
<h2>Laravel 11 - Code Shotcut - Google Maps</h2>
<div id="map"></div>
</div>
<script>
function initMap() {
const latLng = { lat: 21.60476953235633, lng: 39.10753805227597 };
const mapOptions = {
zoom: 12,
center: latLng,
};
const map = new google.maps.Map(document.getElementById("map"), mapOptions);
new google.maps.Marker({
position: latLng,
map: map,
title: "Welcome to Jeddah Corniche",
});
}
window.initMap = initMap;
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAP_KEY') }}&callback=initMap"
async defer>
</script>
</body>
</html>
Step # 4 : Access the .env file
Define the variable for your Google Maps API key.
GOOGLE_MAP_KEY="Your Google Map API Key here"
Step #5: Get the API key from Google Cloud.
Visit Google Cloud Console and follow these steps:
Create a new project (if you don't have one already).
Access the Credentials section.
Create credentials and choose the API Key option.
Set restrictions if needed.
You can find more details about usage limits.
link : https://developers.google.com/webmaster-tools/limits
Copy and paste the Key in .env
GOOGLE_MAP_KEY="You're Google Map API Key here"
Step # 6 : It's time to test.
Start the Laravel development server.
Command : php artisan serve.
Access below URL
127.0.0.1:8000
If you see the error, "This page can't load Google Maps correctly," it's because Google requires billing information, even for testing. You get $200 of free usage each month, and won’t be charged unless your usage exceeds this limit
Share this with friends!
To engage in commentary, kindly proceed by logging in or registering
Subscribe to Our Newsletter
Stay ahead of the curve! Join our newsletter to see what everyone’s talking about.
0 Comments