{"id":85,"date":"2025-12-05T12:16:22","date_gmt":"2025-12-05T09:16:22","guid":{"rendered":"https:\/\/mapsfun.com\/?p=85"},"modified":"2025-12-15T10:37:35","modified_gmt":"2025-12-15T07:37:35","slug":"how-to-embed-google-maps-on-website-using-iframe","status":"publish","type":"post","link":"https:\/\/mapsfun.com\/?p=85","title":{"rendered":"How to Embed Google Maps on Website Using iFrame"},"content":{"rendered":"\n

How to Add a Google Maps Widget to Your Website: A Developer’s Guide<\/h2>\n\n\n\n

A Google Maps widget is essential for any business with a physical location. It helps customers find you easily, increasing trust and foot traffic. While adding a simple map might seem straightforward, creating a custom, responsive widget that matches your site’s design requires some technical work.<\/p>\n\n\n\n

This guide will walk you through the process of creating and embedding a custom Google Maps widget using the official Google Maps Platform.
<\/p>\n\n\n\n

This method requires a Google Cloud account, enabling APIs, and basic knowledge of HTML, CSS, and JavaScript.<\/strong><\/p>\n\n\n\n

\n

Method 1: The Custom Google Maps API Method<\/strong><\/p>\n\n\n\n

Step 1: Google Cloud Project & API Setup<\/p>\n<\/blockquote>\n\n\n\n

\n
\n

<\/p>\n<\/blockquote>\n<\/blockquote>\n\n\n\n

    \n
  • 1. Go to the Google Cloud Console<\/strong>: Navigate to the [Google Cloud Console].<\/li>\n\n\n\n
  • 2. Create a Project<\/strong>: Click on the project dropdown and create a new project or select an existing one.<\/li>\n\n\n\n
  • 3. Enable Billing<\/strong>: You must enable billing on your project. Don’t worry\u2014Google offers a $200 monthly credit, which typically covers significant usage for a standard website map.<\/li>\n\n\n\n
  • 4. Enable the Maps JavaScript API<\/strong>: Go to “APIs & Services” > “Library”. Search for “Maps JavaScript API” and click “Enable”.


    <\/li>\n<\/ul>\n\n\n\n

    [Google Cloud Console API Library] Enable the Maps JavaScript API in your Google Cloud project<\/strong> <\/strong><\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n
      \n
    • 5. Create an API Key<\/strong>: Go to “APIs & Services” > “Credentials”. Click “Create Credentials” and choose “API key”.<\/li>\n\n\n\n
    • 6. Restrict Your API Key (CRITICAL):<\/strong> Click on the created key and set restrictions. Restrict it to the “Maps JavaScript API” and add your website domain (e.g., `*.yourdomain.com\/*`) under “HTTP referrers” to prevent unauthorized use.
      <\/li>\n<\/ul>\n\n\n\n

      [API Key restriction settings] Always restrict your API key for security<\/strong> <\/strong><\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      Step 2: Build the Custom Widget Code<\/p>\n\n\n\n

      This code creates a responsive map widget centered on your location with a custom marker and info window.
      Create an HTML file (e.g., `map-widget.html`) and add the following code:<\/p>\n\n\n

      <!DOCTYPE html<\/span>><\/span>\n<\/span><\/span><html<\/span>><\/span>\n<\/span><\/span><head<\/span>><\/span>\n<\/span><\/span>    <title<\/span>><\/span>Our Location<\/title<\/span>><\/span>\n<\/span><\/span>    <!-- Include the Google Maps JS API with your key --><\/span>\n<\/span><\/span>    <script<\/span> async<\/span> defer<\/span> src<\/span>=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=YOUR_API_KEY&callback=initMap\"<\/span>><\/span><\/script<\/span>><\/span>\n<\/span><\/span>    <style<\/span>><\/span><\/span>\n<\/span><\/span>        \/* Widget Container Styling *\/<\/span><\/span><\/span>\n<\/span><\/span>        .map-widget<\/span> {<\/span><\/span>\n<\/span><\/span>            width<\/span>: 100%<\/span>;<\/span><\/span>\n<\/span><\/span>            max-width<\/span>: 600px<\/span>; \/* Adjust as needed *\/<\/span><\/span><\/span>\n<\/span><\/span>            height<\/span>: 400px<\/span>;<\/span><\/span>\n<\/span><\/span>            border<\/span>: none;<\/span><\/span>\n<\/span><\/span>            border-radius<\/span>: 8px<\/span>; \/* Rounded corners *\/<\/span><\/span><\/span>\n<\/span><\/span>            box-shadow<\/span>: 0<\/span> 2px<\/span> 10px<\/span> rgba<\/span>(0<\/span>,0<\/span>,0<\/span>,0.1<\/span>); \/* Subtle shadow *\/<\/span><\/span><\/span>\n<\/span><\/span>            margin<\/span>: 20px<\/span> auto;<\/span><\/span>\n<\/span><\/span>        }<\/span><\/span>\n<\/span><\/span>        #map<\/span> {<\/span><\/span>\n<\/span><\/span>            height<\/span>: 100%<\/span>;<\/span><\/span>\n<\/span><\/span>            width<\/span>: 100%<\/span>;<\/span><\/span>\n<\/span><\/span>            border-radius<\/span>: 8px<\/span>;<\/span><\/span>\n<\/span><\/span>        }<\/span><\/span>\n<\/span><\/span>    <\/span><\/style<\/span>><\/span><\/span>\n<\/span><\/span><\/head<\/span>><\/span><\/span><\/span>\n<\/span><\/span><body<\/span>><\/span><\/span><\/span><\/span>\n<\/span><\/span>    <!-- The Map Widget Container --><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>    <div<\/span> class<\/span>=\"map-widget\"<\/span>><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>        <div<\/span> id<\/span>=\"map\"<\/span>><\/span><\/div<\/span>><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>    <\/div<\/span>><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>    <script<\/span>><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>        function<\/span> initMap<\/span>()<\/span> <\/span>{<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>            \/\/ Define your business coordinates (e.g., London)<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>            const<\/span> myLocation = { lat: 51.5074<\/span>, lng: -0.1278<\/span> };<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>            \/\/ Create a map centered at your location<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>            const<\/span> map = new<\/span> google.maps.Map(document.getElementById(\"map\"<\/span>), {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>                zoom: 15<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>                center: myLocation,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>                mapTypeControl: false<\/span>, \/\/ Cleaner look<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>                streetViewControl: true<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>                fullscreenControl: true<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>            });<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>            \/\/ Create a custom marker<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>            const<\/span> marker = new<\/span> google.maps.Marker({<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>                position: myLocation,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>                map: map,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>                title: \"Our Main Office\"<\/span>, \/\/ Tooltip<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>                \/\/ icon: 'path\/to\/custom-icon.png' \/\/ Uncomment for custom icon<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>            });<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>            \/\/ Create an info window<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>            const<\/span> infowindow = new<\/span> google.maps.InfoWindow({<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>                content: `<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>                    <div style=\"padding: 10px;\"<\/span>><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>                        <h3 style=\"margin: 0 0 8px 0;\"<\/span>>Our Office<\/h3><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>                        <p style=\"margin: 0;\"<\/span>>123<\/span> Business Street<br>London, UK<\/p><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>                        <a href=\"https:\/\/maps.google.com\/?q=51.5074,-0.1278\"<\/span> target=\"_blank\"<\/span>>Get Directions<\/a><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>                    <\/div><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>                `<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>            });<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>            \/\/ Open info window on marker click<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>            marker.addListener(\"click\"<\/span>, () => {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>                infowindow.open(map, marker);<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>            });<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>            <\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>            \/\/ Optional: Open info window automatically<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>            \/\/ infowindow.open(map, marker);<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>        }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>    <\/span><\/script<\/span>><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/body<\/span>><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/html<\/span>><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
      \n
       Replace `YOUR_API_KEY` in the script tag with the restricted API key you created in Step 1.
      <\/strong><\/p>\n\n\n\n
      Step 3: Embed the Widget on Your Website<\/p>\n<\/blockquote>\n\n\n\n
        \n
      • 1. For Static HTML Sites:<\/strong> Simply upload the `map-widget.html` file to your server and link to it or embed the code directly into your page.<\/li>\n\n\n\n
      • 2. For CMS like WordPress:<\/strong> Use a “Custom HTML” block or a code snippet plugin. Paste the entire code block into the widget area.<\/li>\n\n\n\n
      • 3. Test Thoroughly:<\/strong> Ensure the map loads correctly and the API key restrictions are working by checking the browser’s console for errors.<\/li>\n<\/ul>\n\n\n\n
        The Challenges of This Method<\/strong><\/p>\n\n\n\n
        While powerful, the custom API approach has significant drawbacks:
        <\/p>\n\n\n\n
          \n
        • Technical Complexity:<\/strong> Requires managing Google Cloud projects, billing, and API keys.<\/li>\n\n\n\n
        • Security Risks:<\/strong> An unrestricted API key can lead to massive unauthorized charges.<\/li>\n\n\n\n
        • Development Time:<\/strong> Writing, testing, and debugging code takes considerable effort.<\/li>\n\n\n\n
        • Limited Flexibility:<\/strong> Making design changes requires rewriting and redeploying code.<\/li>\n<\/ul>\n\n\n\n
          Create Beautiful Maps in Minutes, Not Hours with MapsFun.com<\/a><\/strong><\/p>\n\n\n\n
          Why spend hours on complex setup when you can achieve professional results in minutes?
          <\/p>\n\n\n