Embedding Google Maps with markers

Google Maps is one of the most powerful tools for integrating geographical location services into websites or applications. Whether you’re displaying your business location, multiple branch offices, or simply marking points of interest, embedding a Google Map with markers offers an interactive experience for users. This guide explains how to embed Google Maps with custom markers step-by-step, using the Google Maps JavaScript API.

Step 1: Set Up a Google Cloud Platform Project

Before you can embed a customized Google Map, you need access to the Google Maps JavaScript API through Google Cloud.

Go to Google Cloud Console.
Click on the project dropdown and select “New Project”.
Name your project (e.g., “My Map Project”) and click Create.
Once created, make sure the new project is selected.

Step 2: Enable Google Maps JavaScript API

To use Google Maps, the JavaScript API must be enabled for your project.

In the Cloud Console, go to APIs & Services > Library.
Search for “Maps JavaScript API”.
Click it, then hit the Enable button.

You can also enable other optional APIs like Geocoding API and Places API, depending on your use case.

Step 3: Generate an API Key

The API key is required to authenticate your requests to the Google Maps Platform.

Go to APIs & Services > Credentials.
Click Create Credentials > API key.
A key will be generated. Copy and store it safely.

Restricting your API key (recommended):

Click on your API key to edit.
Under “Application restrictions”, choose HTTP referrers (websites) and enter your domain or localhost for local development.
Under “API restrictions”, limit it to only Maps JavaScript API.

Step 4: Create the HTML Page

Here’s the basic structure of an HTML page to embed a map:

<!DOCTYPE html>
<html>
  <head>
    <title>My Google Map with Marker</title>
    <style>
      /* Set the map height */
      #map {
        height: 500px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <h3>My Map</h3>
    <div id="map"></div>

    <!-- Load the Maps API -->
    <script async defer
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>

    <script>
      function initMap() {
        // Define the map center
        const location = { lat: 37.7749, lng: -122.4194 }; // San Francisco

        // Create a new map
        const map = new google.maps.Map(document.getElementById("map"), {
          zoom: 12,
          center: location,
        });

        // Add a marker
        const marker = new google.maps.Marker({
          position: location,
          map: map,
          title: "Hello San Francisco!",
        });
      }
    </script>
  </body>
</html>

Replace YOUR_API_KEY with your actual API key from Step 3.

Step 5: Add Multiple Markers

To add more than one marker, you can define multiple locations and loop through them:

function initMap() {
  const locations = [
    { lat: 37.7749, lng: -122.4194, title: "San Francisco" },
    { lat: 37.8044, lng: -122.2711, title: "Oakland" },
    { lat: 37.6879, lng: -122.4702, title: "Daly City" }
  ];

  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 10,
    center: locations[0],
  });

  locations.forEach((loc) => {
    new google.maps.Marker({
      position: { lat: loc.lat, lng: loc.lng },
      map: map,
      title: loc.title
    });
  });
}

You can add more markers by simply expanding the locations array.

Step 6: Customize Your Markers

Google Maps allows you to customize markers with custom icons, animations, or draggable features.

Example with custom icon:

new google.maps.Marker({
  position: location,
  map: map,
  icon: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
  title: "Custom Icon Marker"
});

Other options:

animation: google.maps.Animation.BOUNCE
draggable: true

Step 7: Add Info Windows

An InfoWindow is a popup that displays information when a user clicks on a marker.

const infoWindow = new google.maps.InfoWindow({
  content: "<h4>San Francisco</h4><p>This is SF!</p>"
});

const marker = new google.maps.Marker({
  position: location,
  map: map,
  title: "San Francisco"
});

marker.addListener("click", () => {
  infoWindow.open(map, marker);
});

For multiple markers, use a loop and bind InfoWindows accordingly.

Step 8: Hosting and Testing

You can test this map locally by:

Saving the file as index.html.
Opening it with any modern browser.

For production, host it on a web server like:

GitHub Pages
Netlify
Vercel
Your own server

Ensure the domain is added to your API key’s referrer list.

Step 9: Troubleshooting Tips

Map not loading? Check the browser console for API errors.
Is your API key restricted? Make sure the right domain is whitelisted.
Billing required? Google Maps APIs require billing to be set up, but they offer $200 of free usage every month.

Step 10: Real-World Use Cases

Embedding Google Maps with markers is useful for:

Business contact pages
Delivery/pick-up tracking
Real estate listings
Travel and tourism websites
Events and venue locators

You can even extend the functionality with:

Directions API (show route between two points)
Geolocation API (show user location)
Clustering markers (for hundreds of points)

Leave a Reply Cancel reply