{"id":108,"date":"2025-12-15T10:43:26","date_gmt":"2025-12-15T07:43:26","guid":{"rendered":"https:\/\/mapsfun.com\/?p=108"},"modified":"2025-12-15T10:43:26","modified_gmt":"2025-12-15T07:43:26","slug":"how-to-embed-google-maps-location-on-website","status":"publish","type":"post","link":"https:\/\/mapsfun.com\/?p=108","title":{"rendered":"How to Embed Google Maps Location on Website"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">How to Embed a Google Maps Location on Your Website: A Technical Guide<\/h2>\n\n\n\n<p>Embedding a specific Google Maps location on your &#8220;Contact Us&#8221; or &#8220;Find Us&#8221; page is a fantastic way to help customers visualize your location and get directions. While the basic embed feature is quick, creating a custom, branded map that integrates seamlessly with your site requires a more technical approach.<\/p>\n\n\n\n<p>This guide will walk you through the professional method using the Google Maps Platform API for a fully customized result.<\/p>\n\n\n\n<p><strong>This method requires a Google Cloud account, enabling APIs, and basic knowledge of HTML, CSS, and JavaScript.<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>Method 1: The Custom Google Maps API Method<\/strong><\/p>\n\n\n\n<p>This approach gives you complete control over the map&#8217;s design, behavior, and functionality.<\/p>\n\n\n\n<p class=\"has-text-align-center\">Step 1: Set Up the Google Maps Platform<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1.&nbsp; Create a Google Cloud Project:<\/strong> Go to the [Google Cloud Console](https:\/\/console.cloud.google.com\/), create a new project (e.g., &#8220;My Business Map&#8221;).<\/li>\n\n\n\n<li><strong>2.&nbsp; Enable Billing:<\/strong> You must enable billing on your project. Google offers a recurring $200 monthly credit, which covers most website map usage unless you have millions of page views.<\/li>\n\n\n\n<li><strong>3.&nbsp; Enable the Maps JavaScript API:<\/strong> Navigate to &#8220;APIs &amp; Services&#8221; &gt; &#8220;Library&#8221;. Search for &#8220;Maps JavaScript API&#8221; and click **Enable**.<\/li>\n\n\n\n<li><strong>4.&nbsp; Create and Secure an API Key:<\/strong> Go to &#8220;Credentials&#8221;, click &#8220;Create Credentials&#8221;, and choose &#8220;API key&#8221;. <strong>Immediately restrict this key:<\/strong> Click on it, set &#8220;Application restrictions&#8221; to &#8220;HTTP referrers&#8221; (adding your website domain, e.g., `<strong>*.yourdomain.com\/*<\/strong>`), and set &#8220;API restrictions&#8221; to &#8220;Maps JavaScript API&#8221;.<\/li>\n<\/ul>\n\n\n\n<p><strong>[Google Cloud Console API Library] You must enable the Maps JavaScript API for the custom map to work.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"718\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-6.png\" alt=\"\" class=\"wp-image-109\" style=\"width:687px;height:auto\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-6.png 1024w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-6-300x210.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-6-768x539.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\"><strong>Step 2: Build the Custom Map Code<\/strong><\/p>\n\n\n\n<p>This code creates a responsive, styled map centered on your exact location with a custom marker and an information window.<\/p>\n\n\n\n<p>Create an HTML file and use the following code:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"UTF-8\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"viewport\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"width=device-width, initial-scale=1.0\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Our Location<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n    <span class=\"hljs-comment\">&lt;!-- Load the Google Maps API with your key --&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">async<\/span> <span class=\"hljs-attr\">defer<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=YOUR_API_KEY_HERE&amp;callback=initMap\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\">\n        <span class=\"hljs-comment\">\/* Container for a polished look *\/<\/span>\n        <span class=\"hljs-selector-class\">.custom-map-container<\/span> {\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n            <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">800px<\/span>;\n            <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">2rem<\/span> auto;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">12px<\/span>;\n            <span class=\"hljs-attribute\">overflow<\/span>: hidden;\n            <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">5px<\/span> <span class=\"hljs-number\">15px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0.1<\/span>);\n            <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#e1e5e9<\/span>;\n        }\n        <span class=\"hljs-comment\">\/* The map must have a defined height *\/<\/span>\n        <span class=\"hljs-selector-id\">#map<\/span> {\n            <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">450px<\/span>;\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n        }\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span>&gt;<\/span>Visit Our Store<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Find us conveniently located in the city center.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"custom-map-container\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"map\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"actionscript\">\n        <span class=\"hljs-comment\">\/\/ The initMap function is called once the API is loaded<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">initMap<\/span><span class=\"hljs-params\">()<\/span> <\/span>{\n            <span class=\"hljs-comment\">\/\/ Define your business coordinates (e.g., Paris, France)<\/span>\n            <span class=\"hljs-keyword\">const<\/span> businessLocation = { lat: <span class=\"hljs-number\">48.8566<\/span>, lng: <span class=\"hljs-number\">2.3522<\/span> };\n\n            <span class=\"hljs-comment\">\/\/ Create a new map instance<\/span>\n            <span class=\"hljs-keyword\">const<\/span> map = <span class=\"hljs-keyword\">new<\/span> google.maps.Map(document.getElementById(<span class=\"hljs-string\">\"map\"<\/span>), {\n                zoom: <span class=\"hljs-number\">16<\/span>,\n                center: businessLocation,\n                mapTypeControl: <span class=\"hljs-literal\">false<\/span>, <span class=\"hljs-comment\">\/\/ Cleaner UI<\/span>\n                streetViewControl: <span class=\"hljs-literal\">true<\/span>,\n                fullscreenControl: <span class=\"hljs-literal\">true<\/span>,\n                styles: &#91; <span class=\"hljs-comment\">\/\/ Optional: A custom \"silver\" style<\/span>\n                    { <span class=\"hljs-string\">\"elementType\"<\/span>: <span class=\"hljs-string\">\"geometry\"<\/span>, <span class=\"hljs-string\">\"stylers\"<\/span>: &#91;{ <span class=\"hljs-string\">\"color\"<\/span>: <span class=\"hljs-string\">\"#f5f5f5\"<\/span> }] },\n                    { <span class=\"hljs-string\">\"elementType\"<\/span>: <span class=\"hljs-string\">\"labels.icon\"<\/span>, <span class=\"hljs-string\">\"stylers\"<\/span>: &#91;{ <span class=\"hljs-string\">\"visibility\"<\/span>: <span class=\"hljs-string\">\"off\"<\/span> }] },\n                    { <span class=\"hljs-string\">\"elementType\"<\/span>: <span class=\"hljs-string\">\"labels.text.fill\"<\/span>, <span class=\"hljs-string\">\"stylers\"<\/span>: &#91;{ <span class=\"hljs-string\">\"color\"<\/span>: <span class=\"hljs-string\">\"#616161\"<\/span> }] },\n                    { <span class=\"hljs-string\">\"elementType\"<\/span>: <span class=\"hljs-string\">\"labels.text.stroke\"<\/span>, <span class=\"hljs-string\">\"stylers\"<\/span>: &#91;{ <span class=\"hljs-string\">\"color\"<\/span>: <span class=\"hljs-string\">\"#f5f5f5\"<\/span> }] }\n                ]\n            });\n\n            <span class=\"hljs-comment\">\/\/ Create a custom marker<\/span>\n            <span class=\"hljs-keyword\">const<\/span> marker = <span class=\"hljs-keyword\">new<\/span> google.maps.Marker({\n                position: businessLocation,\n                map: map,\n                title: <span class=\"hljs-string\">\"Le Boutique Paris\"<\/span>, <span class=\"hljs-comment\">\/\/ Tooltip on hover<\/span>\n                <span class=\"hljs-comment\">\/\/ icon: 'custom_pin.png' \/\/ Uncomment to use a custom marker image<\/span>\n            });\n\n            <span class=\"hljs-comment\">\/\/ Define the content for the info window<\/span>\n            <span class=\"hljs-keyword\">const<\/span> infoWindowContent = `\n                &lt;div style=<span class=\"hljs-string\">\"padding: 12px; max-width: 250px;\"<\/span>&gt;\n                    &lt;h3 style=<span class=\"hljs-string\">\"margin-top: 0; color: #2c3e50;\"<\/span>&gt;Le Boutique Paris&lt;\/h3&gt;\n                    &lt;p style=<span class=\"hljs-string\">\"margin-bottom: 8px;\"<\/span>&gt;\n                        \ud83d\udccd <span class=\"hljs-number\">123<\/span> Avenue de la R\u00e9publique&lt;br&gt;\n                        <span class=\"hljs-number\">75011<\/span> Paris, France\n                    &lt;\/p&gt;\n                    &lt;p style=<span class=\"hljs-string\">\"margin-bottom: 12px;\"<\/span>&gt;\n                        \ud83d\udd52 Mon-Sat: <span class=\"hljs-number\">9<\/span>AM<span class=\"hljs-number\">-7<\/span>PM\n                    &lt;\/p&gt;\n                    &lt;a href=<span class=\"hljs-string\">\"https:\/\/www.google.com\/maps\/dir\/?api=1&amp;destination=48.8566,2.3522\"<\/span> \n                       target=<span class=\"hljs-string\">\"_blank\"<\/span> \n                       style=<span class=\"hljs-string\">\"background: #4CAF50; color: white; padding: 8px 12px; text-decoration: none; border-radius: 4px; display: inline-block;\"<\/span>&gt;\n                        Get Directions\n                    &lt;\/a&gt;\n                &lt;\/div&gt;\n            `;\n\n            <span class=\"hljs-comment\">\/\/ Create the info window<\/span>\n            <span class=\"hljs-keyword\">const<\/span> infowindow = <span class=\"hljs-keyword\">new<\/span> google.maps.InfoWindow({\n                content: infoWindowContent\n            });\n\n            <span class=\"hljs-comment\">\/\/ Open the info window automatically when the page loads<\/span>\n            infowindow.open(map, marker);\n\n            <span class=\"hljs-comment\">\/\/ Also open it when the marker is clicked<\/span>\n            marker.addListener(<span class=\"hljs-string\">'click'<\/span>, () =&gt; {\n                infowindow.open(map, marker);\n            });\n        }\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Critical: Replace `YOUR_API_KEY_HERE` in the script tag with the restricted API key you created in Step 1.<\/strong><br><\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>Step 3: Embed the Map on Your Site<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>For HTML Sites:<\/strong> Copy the entire code into your page&#8217;s HTML.<\/li>\n\n\n\n<li><strong>For WordPress:<\/strong> Use a &#8220;Custom HTML&#8221; block or a plugin like &#8220;Code Snippets&#8221; to paste the code.<\/li>\n\n\n\n<li><strong>For Other CMS:<\/strong> Look for an &#8220;HTML&#8221; or &#8220;Embed Code&#8221; widget\/module.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>The Challenges of the DIY API Method<\/strong><\/p>\n\n\n\n<p>While this method is powerful, it presents significant hurdles:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Technical Barrier:<\/strong> Managing Google Cloud, API keys, and code is not for everyone.<\/li>\n\n\n\n<li><strong>Security Concerns:<\/strong> Incorrectly configured API keys can lead to unauthorized usage and unexpected charges.<\/li>\n\n\n\n<li><strong>Time-Consuming:<\/strong> Writing, testing, and debugging code takes considerable effort.<\/li>\n\n\n\n<li><strong>Limited Flexibility:<\/strong> Simple changes like updating an address or changing the map color scheme require manual code edits.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>Create Stunning, Custom Maps in Minutes with MapsFun.com<\/strong><\/p>\n\n\n\n<p>Why deal with the complexity of API keys and JavaScript when you can achieve professional results instantly?<\/p>\n\n\n\n<p><br><a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a> is the ultimate solution for embedding beautiful, customized Google Maps without any technical knowledge.<\/p>\n\n\n<p><iframe src=\"https:\/\/panel.mapsfun.com\/embed-map?code=668ecbcced7931f89205d1e881bb82aa&#038;lang=uk&#038;tpl=photo\" width=\"100%\" height=\"600\" style=\"border:0\" loading=\"lazy\" referrerpolicy=\"no-referrer-when-downgrade\"><\/iframe><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1.&nbsp; No-Code Visual Editor:<\/strong> Design your perfect map with a simple point-and-click interface.<\/li>\n\n\n\n<li><strong>2.&nbsp; Zero API Setup:<\/strong> We handle all the backend complexity, security, and billing.<\/li>\n\n\n\n<li><strong>3.&nbsp; Advanced Customization:<\/strong> Easily add custom markers, contact forms, multiple locations, and choose from pre-designed map styles.<\/li>\n\n\n\n<li><strong>4.&nbsp; Instant Embedding: <\/strong>Get a clean, responsive code snippet ready to paste into any website builder or CMS.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"How to Embed a Google Maps Location on Your Website: A Technical Guide Embedding a specific Google Maps location on your &#8220;Contact Us&#8221; or &#8220;Find Us&#8221; page is a fantastic way to help customers visualize your location and get directions. While the basic embed feature is quick, creating a custom, branded map that integrates seamlessly [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,1],"tags":[],"class_list":["post-108","post","type-post","status-publish","format-standard","hentry","category-embed-google-maps-location-in-website","category-1"],"_links":{"self":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/108","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=108"}],"version-history":[{"count":3,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/108\/revisions"}],"predecessor-version":[{"id":197,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/108\/revisions\/197"}],"wp:attachment":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=108"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=108"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}