Adding Google Maps to your website

by


To add Google Maps to your webpage, you can use the Google Maps Embed API. Here’s a step-by-step guide on how to do it:

  1. Get an API Key:
    • Go to the Google Cloud Console: https://console.cloud.google.com/
    • Create a new project or use an existing one.
    • Enable the “Maps Embed API” for your project.
    • Generate an API key (you may need to set up billing information, but there’s a free tier that should be sufficient for most use cases).
  2. Embed the map on your webpage:
    • Create an HTML file or open an existing one that you want to add the map to.
    • Add the following code where you want the map to appear:

Customize the map

  1. Customize the map:
    • Replace YOUR_API_KEY with the API key you obtained in step 1.
    • Replace LOCATION in the src attribute with the address or coordinates of the location you want to display on the map.
  2. Save the file and open it in your web browser. You should see the Google Map embedded in your webpage.

Keep in mind that using the Google Maps Embed API is free for the majority of use cases, but you should review Google’s Maps Platform Pricing to ensure that your usage falls within the free tier or to see if additional charges may apply.

<!DOCTYPE html>
<html>
<head>
    <title>Add Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <style>
        /* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
        #map {
            height: 100%;
        }
        /* 
 * Optional: Makes the sample page fill the window. 
 */
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <!-- prettier-ignore -->
    <script>(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })
            ({ key: "A*****Y", v: "beta" });</script>
    <script>
        // Initialize and add the map
        let map;
        async function initMap() {
            // The location of Uluru
            const position = { lat: -25.344, lng: 131.031 };
            // Request needed libraries.
            //@ts-ignore
            const { Map } = await google.maps.importLibrary("maps");
            const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
            // The map, centered at Uluru
            map = new Map(document.getElementById("map"), {
                zoom: 4,
                center: position,
                mapId: "DEMO_MAP_ID",
            });
            // The marker, positioned at Uluru
            const marker = new AdvancedMarkerElement({
                map: map,
                position: position,
                title: "Uluru",
            });
        }
        initMap();
    </script>
</body>
</html>