Laravel

How to Integrate Google Maps in Your Website – Step-by-Step Guide

Shahroz Javed

May 15, 2025 . 56 views

Introduction

Google Maps is one of the most powerful tools for displaying interactive maps on your website. Whether you're building a store locator, contact page, or delivery tracking, integrating Google Maps can enhance both user experience and trust. This guide shows you how to easily embed and customize Google Maps on your website using the official API.

Why Use Google Maps?

Integrating Google Maps provides:

Accurate real-time location display
Easy directions for users
Support for multiple locations and markers
Professional look to your contact or about page

Steps to Integrate Google Maps

01: Get a Google Maps API Key

Go to the Google Cloud Console, create a project, and enable the “Maps JavaScript API.” Then go to **Credentials** and generate an API key.

🔐 Security Tip: Always restrict your API key to your domain.

02: Add Google Maps Script

Place this script at the bottom of your HTML file before ``. Replace `YOUR_API_KEY` with your real key.

<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

03: Create Map Container

Add a `div` where the map will be displayed:

<div id="map" style="height: 400px; width: 100%;"></div>

04: JavaScript Code to Load Map

<script>
  function initMap() {
    const location = { lat: 33.6844, lng: 73.0479 }; // Example: Islamabad
    const map = new google.maps.Map(document.getElementById("map"), {
      zoom: 12,
      center: location,
    });
    const marker = new google.maps.Marker({
      position: location,
      map: map,
    });
  }
</script>

05: Common Issues

Map not showing? Check for console errors and make sure the API key is valid.
White screen? Your browser may be blocking the script if HTTPS isn’t enabled.
Billing required? Google Maps now requires billing enabled even for free-tier usage.

Conclusion

Google Maps integration is a simple but powerful enhancement for websites. With a free API key and a few lines of code, you can display interactive, zoomable, and customizable maps that improve usability and professionalism.

Main Menu