{"id":140,"date":"2025-12-15T10:55:31","date_gmt":"2025-12-15T07:55:31","guid":{"rendered":"https:\/\/mapsfun.com\/?p=140"},"modified":"2025-12-15T10:55:32","modified_gmt":"2025-12-15T07:55:32","slug":"how-to-embed-google-maps-in-wordpress","status":"publish","type":"post","link":"https:\/\/mapsfun.com\/?p=140","title":{"rendered":"How to Embed Google Maps in WordPress"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">How to Embed Google Map in WordPress: Complete Technical Guide<\/h2>\n\n\n\n<p>Embedding a Google Map in WordPress seems straightforward, but creating a truly customized, high-performance map requires technical expertise. While there are basic methods, advanced implementations involve API keys, custom code, and ongoing maintenance. This guide covers both approaches.<\/p>\n\n\n\n<p><strong>The advanced method requires WordPress theme editing and Google Cloud Platform knowledge.<\/strong><br><\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>Method 1: Basic Google Maps Embed (Limited Functionality<\/strong>)<\/p>\n\n\n\n<p class=\"has-text-align-center\">Step 1: Get Embed Code from Google Maps<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1. Go to [Google Maps](https:\/\/www.google.com\/maps) and find your location<\/li>\n\n\n\n<li>2. Click &#8220;Share&#8221; \u2192 &#8220;Embed a map&#8221;<\/li>\n\n\n\n<li>3. Copy the iframe code provided<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\">Step 2: Add to WordPress<\/p>\n\n\n\n<p>Option A: Using WordPress Block Editor<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1. Create a new post\/page<\/li>\n\n\n\n<li>2. Add a &#8220;Custom HTML&#8221; block<\/li>\n\n\n\n<li>3. Paste the iframe code<\/li>\n\n\n\n<li>4. Update\/Publish<\/li>\n<\/ul>\n\n\n\n<p><strong>Basic iframe embed works but offers limited customization and mobile responsiveness.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"383\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-17-1024x383.png\" alt=\"\" class=\"wp-image-141\" style=\"width:751px;height:auto\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-17-1024x383.png 1024w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-17-300x112.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-17-768x287.png 768w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-17.png 1365w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Limitations of this method:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&#8211; Fixed size that may not be responsive<\/li>\n\n\n\n<li>&#8211; No custom styling or branding<\/li>\n\n\n\n<li>&#8211; Limited to single location<\/li>\n\n\n\n<li>&#8211; Basic functionality only<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>Method 2: Advanced Custom Map with Google Maps API<\/strong><br><\/p>\n\n\n\n<p class=\"has-text-align-left\">This method provides full control but requires technical implementation.<\/p>\n\n\n\n<p class=\"has-text-align-center\">Step 1: Set Up Google Maps API<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1.Create Google Cloud Project:\n<ul class=\"wp-block-list\">\n<li>-Visit https:\/\/console.cloud.google.com\/<\/li>\n\n\n\n<li>-Create new project \u2192 Enable billing<\/li>\n\n\n\n<li>-Note: $200 monthly credit covers most usage<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>2.Enable Required APIs:\n<ul class=\"wp-block-list\">\n<li>&nbsp;&#8211; Maps JavaScript API<\/li>\n\n\n\n<li>&nbsp;&nbsp;&#8211; Geocoding API<\/li>\n\n\n\n<li>&nbsp;&nbsp;&#8211; Places API (optional)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>3.Create and Restrict API Key:\n<ul class=\"wp-block-list\">\n<li>&#8211; Restrict to your domain (yourwebsite.com)<\/li>\n\n\n\n<li>&#8211; Restrict to Maps JavaScript API<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><strong>Always restrict your API keys to prevent unauthorized usage.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"489\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-18-1024x489.png\" alt=\"\" class=\"wp-image-142\" style=\"width:689px;height:auto\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-18-1024x489.png 1024w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-18-300x143.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-18-768x367.png 768w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-18-1536x733.png 1536w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-18.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Step 2: Create Custom Map Plugin<\/p>\n\n\n\n<p>Create a custom WordPress plugin for your advanced map functionality.<br>Create file: `<strong>\/wp-content\/plugins\/custom-google-map\/custom-google-map.php<\/strong>`<\/p>\n\n\n\n<p><strong>php<\/strong><br><\/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=\"php\"><span class=\"hljs-meta\">&lt;?php<\/span>\n<span class=\"hljs-comment\">\/**\n * Plugin Name: Custom Google Map\n * Description: Advanced Google Maps integration for WordPress\n * Version: 1.0\n * Author: Your Name\n *\/<\/span>\n\n<span class=\"hljs-comment\">\/\/ Prevent direct access<\/span>\n<span class=\"hljs-keyword\">if<\/span> (!defined(<span class=\"hljs-string\">'ABSPATH'<\/span>)) {\n    <span class=\"hljs-keyword\">exit<\/span>;\n}\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">CustomGoogleMap<\/span> <\/span>{\n    \n    <span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">__construct<\/span><span class=\"hljs-params\">()<\/span> <\/span>{\n        add_action(<span class=\"hljs-string\">'wp_enqueue_scripts'<\/span>, <span class=\"hljs-keyword\">array<\/span>(<span class=\"hljs-keyword\">$this<\/span>, <span class=\"hljs-string\">'enqueue_scripts'<\/span>));\n        add_shortcode(<span class=\"hljs-string\">'custom_map'<\/span>, <span class=\"hljs-keyword\">array<\/span>(<span class=\"hljs-keyword\">$this<\/span>, <span class=\"hljs-string\">'map_shortcode'<\/span>));\n        add_action(<span class=\"hljs-string\">'wp_head'<\/span>, <span class=\"hljs-keyword\">array<\/span>(<span class=\"hljs-keyword\">$this<\/span>, <span class=\"hljs-string\">'add_map_styles'<\/span>));\n    }\n    \n    <span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">enqueue_scripts<\/span><span class=\"hljs-params\">()<\/span> <\/span>{\n        $api_key = get_option(<span class=\"hljs-string\">'google_maps_api_key'<\/span>, <span class=\"hljs-string\">''<\/span>);\n        <span class=\"hljs-keyword\">if<\/span> (!<span class=\"hljs-keyword\">empty<\/span>($api_key)) {\n            wp_enqueue_script(\n                <span class=\"hljs-string\">'google-maps-api'<\/span>,\n                <span class=\"hljs-string\">\"https:\/\/maps.googleapis.com\/maps\/api\/js?key={$api_key}&amp;callback=initMap&amp;libraries=places\"<\/span>,\n                <span class=\"hljs-keyword\">array<\/span>(),\n                <span class=\"hljs-keyword\">null<\/span>,\n                <span class=\"hljs-keyword\">true<\/span>\n            );\n        }\n        \n        wp_enqueue_script(\n            <span class=\"hljs-string\">'custom-map-script'<\/span>,\n            plugin_dir_url(<span class=\"hljs-keyword\">__FILE__<\/span>) . <span class=\"hljs-string\">'map-script.js'<\/span>,\n            <span class=\"hljs-keyword\">array<\/span>(<span class=\"hljs-string\">'jquery'<\/span>, <span class=\"hljs-string\">'google-maps-api'<\/span>),\n            <span class=\"hljs-string\">'1.0'<\/span>,\n            <span class=\"hljs-keyword\">true<\/span>\n        );\n    }\n    \n    <span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">add_map_styles<\/span><span class=\"hljs-params\">()<\/span> <\/span>{\n        <span class=\"hljs-meta\">?&gt;<\/span><\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\">\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\">margin<\/span>: <span class=\"hljs-number\">20px<\/span> <span class=\"hljs-number\">0<\/span>;\n                <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">10px<\/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\">4px<\/span> <span class=\"hljs-number\">12px<\/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            }\n            \n            <span class=\"hljs-selector-class\">.custom-map<\/span> {\n                <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">400px<\/span>;\n                <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n            }\n            \n            <span class=\"hljs-selector-class\">.map-controls<\/span> {\n                <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#f8f9fa<\/span>;\n                <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">15px<\/span>;\n                <span class=\"hljs-attribute\">border-bottom<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#dee2e6<\/span>;\n            }\n            \n            <span class=\"hljs-selector-class\">.location-search<\/span> {\n                <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n                <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">10px<\/span>;\n                <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#ced4da<\/span>;\n                <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">4px<\/span>;\n                <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">10px<\/span>;\n            }\n            \n            <span class=\"hljs-keyword\">@media<\/span> (<span class=\"hljs-attribute\">max-width:<\/span> <span class=\"hljs-number\">768px<\/span>) {\n                <span class=\"hljs-selector-class\">.custom-map<\/span> {\n                    <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">300px<\/span>;\n                }\n            }\n        <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n        <span class=\"php\"><span class=\"hljs-meta\">&lt;?php<\/span>\n    }\n    \n    <span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">map_shortcode<\/span><span class=\"hljs-params\">($atts)<\/span> <\/span>{\n        $atts = shortcode_atts(<span class=\"hljs-keyword\">array<\/span>(\n            <span class=\"hljs-string\">'lat'<\/span> =&gt; <span class=\"hljs-string\">'40.7128'<\/span>,\n            <span class=\"hljs-string\">'lng'<\/span> =&gt; <span class=\"hljs-string\">'-74.0060'<\/span>,\n            <span class=\"hljs-string\">'zoom'<\/span> =&gt; <span class=\"hljs-string\">'14'<\/span>,\n            <span class=\"hljs-string\">'title'<\/span> =&gt; <span class=\"hljs-string\">'Our Location'<\/span>,\n            <span class=\"hljs-string\">'address'<\/span> =&gt; <span class=\"hljs-string\">'123 Main Street, New York, NY'<\/span>\n        ), $atts);\n        \n        ob_start();\n        <span class=\"hljs-meta\">?&gt;<\/span><\/span>\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\">class<\/span>=<span class=\"hljs-string\">\"map-controls\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"location-search\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Search locations...\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"map-info\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h4<\/span>&gt;<\/span><span class=\"php\"><span class=\"hljs-meta\">&lt;?php<\/span> <span class=\"hljs-keyword\">echo<\/span> esc_html($atts&#91;<span class=\"hljs-string\">'title'<\/span>]); <span class=\"hljs-meta\">?&gt;<\/span><\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h4<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span><span class=\"php\"><span class=\"hljs-meta\">&lt;?php<\/span> <span class=\"hljs-keyword\">echo<\/span> esc_html($atts&#91;<span class=\"hljs-string\">'address'<\/span>]); <span class=\"hljs-meta\">?&gt;<\/span><\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n                <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            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"custom-map\"<\/span> \n                 <span class=\"hljs-attr\">data-lat<\/span>=<span class=\"hljs-string\">\"&lt;?php echo esc_attr($atts&#91;'lat']); ?&gt;\"<\/span> \n                 <span class=\"hljs-attr\">data-lng<\/span>=<span class=\"hljs-string\">\"&lt;?php echo esc_attr($atts&#91;'lng']); ?&gt;\"<\/span> \n                 <span class=\"hljs-attr\">data-zoom<\/span>=<span class=\"hljs-string\">\"&lt;?php echo esc_attr($atts&#91;'zoom']); ?&gt;\"<\/span>&gt;<\/span>\n            <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        <span class=\"php\"><span class=\"hljs-meta\">&lt;?php<\/span>\n        <span class=\"hljs-keyword\">return<\/span> ob_get_clean();\n    }\n}\n\n<span class=\"hljs-keyword\">new<\/span> CustomGoogleMap();\n\n<span class=\"hljs-comment\">\/\/ Admin settings page<\/span>\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">MapAdminSettings<\/span> <\/span>{\n    \n    <span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">__construct<\/span><span class=\"hljs-params\">()<\/span> <\/span>{\n        add_action(<span class=\"hljs-string\">'admin_menu'<\/span>, <span class=\"hljs-keyword\">array<\/span>(<span class=\"hljs-keyword\">$this<\/span>, <span class=\"hljs-string\">'add_admin_menu'<\/span>));\n        add_action(<span class=\"hljs-string\">'admin_init'<\/span>, <span class=\"hljs-keyword\">array<\/span>(<span class=\"hljs-keyword\">$this<\/span>, <span class=\"hljs-string\">'settings_init'<\/span>));\n    }\n    \n    <span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">add_admin_menu<\/span><span class=\"hljs-params\">()<\/span> <\/span>{\n        add_options_page(\n            <span class=\"hljs-string\">'Google Maps Settings'<\/span>,\n            <span class=\"hljs-string\">'Google Maps'<\/span>,\n            <span class=\"hljs-string\">'manage_options'<\/span>,\n            <span class=\"hljs-string\">'google-maps-settings'<\/span>,\n            <span class=\"hljs-keyword\">array<\/span>(<span class=\"hljs-keyword\">$this<\/span>, <span class=\"hljs-string\">'settings_page'<\/span>)\n        );\n    }\n    \n    <span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">settings_init<\/span><span class=\"hljs-params\">()<\/span> <\/span>{\n        register_setting(<span class=\"hljs-string\">'googleMaps'<\/span>, <span class=\"hljs-string\">'google_maps_settings'<\/span>);\n        \n        add_settings_section(\n            <span class=\"hljs-string\">'google_maps_section'<\/span>,\n            <span class=\"hljs-string\">'API Configuration'<\/span>,\n            <span class=\"hljs-keyword\">array<\/span>(<span class=\"hljs-keyword\">$this<\/span>, <span class=\"hljs-string\">'settings_section_callback'<\/span>),\n            <span class=\"hljs-string\">'googleMaps'<\/span>\n        );\n        \n        add_settings_field(\n            <span class=\"hljs-string\">'api_key'<\/span>,\n            <span class=\"hljs-string\">'Google Maps API Key'<\/span>,\n            <span class=\"hljs-keyword\">array<\/span>(<span class=\"hljs-keyword\">$this<\/span>, <span class=\"hljs-string\">'api_key_field_render'<\/span>),\n            <span class=\"hljs-string\">'googleMaps'<\/span>,\n            <span class=\"hljs-string\">'google_maps_section'<\/span>\n        );\n    }\n    \n    <span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">api_key_field_render<\/span><span class=\"hljs-params\">()<\/span> <\/span>{\n        $options = get_option(<span class=\"hljs-string\">'google_maps_settings'<\/span>);\n        <span class=\"hljs-meta\">?&gt;<\/span><\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">'password'<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">'google_maps_settings&#91;api_key]'<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">'&lt;?php echo esc_attr($options&#91;'<\/span><span class=\"hljs-attr\">api_key<\/span>']); ?&gt;<\/span>' style='width: 300px;'&gt;\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"description\"<\/span>&gt;<\/span>Get your API key from <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/console.cloud.google.com\/\"<\/span> <span class=\"hljs-attr\">target<\/span>=<span class=\"hljs-string\">\"_blank\"<\/span>&gt;<\/span>Google Cloud Console<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n        <span class=\"php\"><span class=\"hljs-meta\">&lt;?php<\/span>\n    }\n    \n    <span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">settings_section_callback<\/span><span class=\"hljs-params\">()<\/span> <\/span>{\n        <span class=\"hljs-keyword\">echo<\/span> <span class=\"hljs-string\">'Configure your Google Maps API settings below:'<\/span>;\n    }\n    \n    <span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">settings_page<\/span><span class=\"hljs-params\">()<\/span> <\/span>{\n        <span class=\"hljs-meta\">?&gt;<\/span><\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"wrap\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Google Maps Settings<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">form<\/span> <span class=\"hljs-attr\">action<\/span>=<span class=\"hljs-string\">'options.php'<\/span> <span class=\"hljs-attr\">method<\/span>=<span class=\"hljs-string\">'post'<\/span>&gt;<\/span>\n                <span class=\"php\"><span class=\"hljs-meta\">&lt;?php<\/span>\n                settings_fields(<span class=\"hljs-string\">'googleMaps'<\/span>);\n                do_settings_sections(<span class=\"hljs-string\">'googleMaps'<\/span>);\n                submit_button();\n                <span class=\"hljs-meta\">?&gt;<\/span><\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">form<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"php\"><span class=\"hljs-meta\">&lt;?php<\/span>\n    }\n}\n\n<span class=\"hljs-keyword\">new<\/span> MapAdminSettings();\n<span class=\"hljs-meta\">?&gt;<\/span><\/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 class=\"has-text-align-center\">Step 3: Create JavaScript File<\/p>\n\n\n\n<p>Create file: `\/wp-content\/plugins\/custom-google-map\/map-script.js<\/p>\n\n\n\n<p><strong>javascript<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">let<\/span> map;\n<span class=\"hljs-keyword\">let<\/span> markers = &#91;];\n<span class=\"hljs-keyword\">let<\/span> geocoder;\n<span class=\"hljs-keyword\">let<\/span> infowindow;\n\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\">\/\/ Initialize geocoder and info window<\/span>\n    geocoder = <span class=\"hljs-keyword\">new<\/span> google.maps.Geocoder();\n    infowindow = <span class=\"hljs-keyword\">new<\/span> google.maps.InfoWindow();\n    \n    <span class=\"hljs-comment\">\/\/ Initialize all maps on page<\/span>\n    <span class=\"hljs-built_in\">document<\/span>.querySelectorAll(<span class=\"hljs-string\">'.custom-map'<\/span>).forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">mapElement<\/span> =&gt;<\/span> {\n        initializeSingleMap(mapElement);\n    });\n    \n    <span class=\"hljs-comment\">\/\/ Initialize search functionality<\/span>\n    initializeSearch();\n}\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">initializeSingleMap<\/span>(<span class=\"hljs-params\">mapElement<\/span>) <\/span>{\n    <span class=\"hljs-keyword\">const<\/span> lat = <span class=\"hljs-built_in\">parseFloat<\/span>(mapElement.dataset.lat);\n    <span class=\"hljs-keyword\">const<\/span> lng = <span class=\"hljs-built_in\">parseFloat<\/span>(mapElement.dataset.lng);\n    <span class=\"hljs-keyword\">const<\/span> zoom = <span class=\"hljs-built_in\">parseInt<\/span>(mapElement.dataset.zoom);\n    \n    <span class=\"hljs-keyword\">const<\/span> mapOptions = {\n        <span class=\"hljs-attr\">center<\/span>: { <span class=\"hljs-attr\">lat<\/span>: lat, <span class=\"hljs-attr\">lng<\/span>: lng },\n        <span class=\"hljs-attr\">zoom<\/span>: zoom,\n        <span class=\"hljs-attr\">styles<\/span>: &#91;\n            {\n                <span class=\"hljs-string\">\"featureType\"<\/span>: <span class=\"hljs-string\">\"poi.business\"<\/span>,\n                <span class=\"hljs-string\">\"stylers\"<\/span>: &#91;{ <span class=\"hljs-string\">\"visibility\"<\/span>: <span class=\"hljs-string\">\"on\"<\/span> }]\n            },\n            {\n                <span class=\"hljs-string\">\"featureType\"<\/span>: <span class=\"hljs-string\">\"transit\"<\/span>,\n                <span class=\"hljs-string\">\"elementType\"<\/span>: <span class=\"hljs-string\">\"labels.icon\"<\/span>,\n                <span class=\"hljs-string\">\"stylers\"<\/span>: &#91;{ <span class=\"hljs-string\">\"visibility\"<\/span>: <span class=\"hljs-string\">\"off\"<\/span> }]\n            }\n        ],\n        <span class=\"hljs-attr\">mapTypeControl<\/span>: <span class=\"hljs-literal\">true<\/span>,\n        <span class=\"hljs-attr\">streetViewControl<\/span>: <span class=\"hljs-literal\">true<\/span>,\n        <span class=\"hljs-attr\">fullscreenControl<\/span>: <span class=\"hljs-literal\">true<\/span>\n    };\n    \n    <span class=\"hljs-keyword\">const<\/span> map = <span class=\"hljs-keyword\">new<\/span> google.maps.Map(mapElement, mapOptions);\n    \n    <span class=\"hljs-comment\">\/\/ Add marker for main location<\/span>\n    <span class=\"hljs-keyword\">const<\/span> marker = <span class=\"hljs-keyword\">new<\/span> google.maps.Marker({\n        <span class=\"hljs-attr\">position<\/span>: { <span class=\"hljs-attr\">lat<\/span>: lat, <span class=\"hljs-attr\">lng<\/span>: lng },\n        <span class=\"hljs-attr\">map<\/span>: map,\n        <span class=\"hljs-attr\">title<\/span>: <span class=\"hljs-string\">'Main Location'<\/span>,\n        <span class=\"hljs-attr\">animation<\/span>: google.maps.Animation.DROP\n    });\n    \n    <span class=\"hljs-comment\">\/\/ Add info window<\/span>\n    <span class=\"hljs-keyword\">const<\/span> infoContent = <span class=\"hljs-string\">`\n        &lt;div style=\"padding: 10px; max-width: 250px;\"&gt;\n            &lt;h4 style=\"margin: 0 0 8px 0;\"&gt;Our Location&lt;\/h4&gt;\n            &lt;p style=\"margin: 0 0 8px 0; color: #666;\"&gt;Main business address&lt;\/p&gt;\n            &lt;button onclick=\"getDirections(<span class=\"hljs-subst\">${lat}<\/span>, <span class=\"hljs-subst\">${lng}<\/span>)\" style=\"background: #007cba; color: white; border: none; padding: 5px 10px; border-radius: 3px; cursor: pointer;\"&gt;\n                Get Directions\n            &lt;\/button&gt;\n        &lt;\/div&gt;\n    `<\/span>;\n    \n    marker.addListener(<span class=\"hljs-string\">'click'<\/span>, () =&gt; {\n        infowindow.setContent(infoContent);\n        infowindow.open(map, marker);\n    });\n    \n    markers.push(marker);\n}\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">initializeSearch<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n    <span class=\"hljs-keyword\">const<\/span> searchInputs = <span class=\"hljs-built_in\">document<\/span>.querySelectorAll(<span class=\"hljs-string\">'.location-search'<\/span>);\n    \n    searchInputs.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">input<\/span> =&gt;<\/span> {\n        <span class=\"hljs-keyword\">const<\/span> autocomplete = <span class=\"hljs-keyword\">new<\/span> google.maps.places.Autocomplete(input);\n        \n        autocomplete.addListener(<span class=\"hljs-string\">'place_changed'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> place = autocomplete.getPlace();\n            <span class=\"hljs-keyword\">if<\/span> (!place.geometry) {\n                <span class=\"hljs-keyword\">return<\/span>;\n            }\n            \n            <span class=\"hljs-comment\">\/\/ Recenter map on searched location<\/span>\n            <span class=\"hljs-keyword\">if<\/span> (map &amp;&amp; place.geometry.viewport) {\n                map.fitBounds(place.geometry.viewport);\n            } <span class=\"hljs-keyword\">else<\/span> {\n                map.setCenter(place.geometry.location);\n                map.setZoom(<span class=\"hljs-number\">15<\/span>);\n            }\n            \n            <span class=\"hljs-comment\">\/\/ Add temporary marker for searched location<\/span>\n            addTemporaryMarker(place.geometry.location, place.name);\n        });\n    });\n}\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">addTemporaryMarker<\/span>(<span class=\"hljs-params\">position, title<\/span>) <\/span>{\n    <span class=\"hljs-keyword\">const<\/span> marker = <span class=\"hljs-keyword\">new<\/span> google.maps.Marker({\n        <span class=\"hljs-attr\">position<\/span>: position,\n        <span class=\"hljs-attr\">map<\/span>: map,\n        <span class=\"hljs-attr\">title<\/span>: title,\n        <span class=\"hljs-attr\">icon<\/span>: {\n            <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">'https:\/\/maps.google.com\/mapfiles\/ms\/icons\/blue-dot.png'<\/span>\n        }\n    });\n    \n    <span class=\"hljs-comment\">\/\/ Remove marker after 5 seconds<\/span>\n    setTimeout(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n        marker.setMap(<span class=\"hljs-literal\">null<\/span>);\n    }, <span class=\"hljs-number\">5000<\/span>);\n}\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">getDirections<\/span>(<span class=\"hljs-params\">lat, lng<\/span>) <\/span>{\n    <span class=\"hljs-keyword\">if<\/span> (navigator.geolocation) {\n        navigator.geolocation.getCurrentPosition(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">position<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> userLat = position.coords.latitude;\n            <span class=\"hljs-keyword\">const<\/span> userLng = position.coords.longitude;\n            \n            <span class=\"hljs-keyword\">const<\/span> directionsUrl = <span class=\"hljs-string\">`https:\/\/www.google.com\/maps\/dir\/?api=1&amp;origin=<span class=\"hljs-subst\">${userLat}<\/span>,<span class=\"hljs-subst\">${userLng}<\/span>&amp;destination=<span class=\"hljs-subst\">${lat}<\/span>,<span class=\"hljs-subst\">${lng}<\/span>`<\/span>;\n            <span class=\"hljs-built_in\">window<\/span>.open(directionsUrl, <span class=\"hljs-string\">'_blank'<\/span>);\n        }, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-comment\">\/\/ Fallback to Google Maps with destination only<\/span>\n            <span class=\"hljs-keyword\">const<\/span> directionsUrl = <span class=\"hljs-string\">`https:\/\/www.google.com\/maps\/dir\/?api=1&amp;destination=<span class=\"hljs-subst\">${lat}<\/span>,<span class=\"hljs-subst\">${lng}<\/span>`<\/span>;\n            <span class=\"hljs-built_in\">window<\/span>.open(directionsUrl, <span class=\"hljs-string\">'_blank'<\/span>);\n        });\n    } <span class=\"hljs-keyword\">else<\/span> {\n        <span class=\"hljs-keyword\">const<\/span> directionsUrl = <span class=\"hljs-string\">`https:\/\/www.google.com\/maps\/dir\/?api=1&amp;destination=<span class=\"hljs-subst\">${lat}<\/span>,<span class=\"hljs-subst\">${lng}<\/span>`<\/span>;\n        <span class=\"hljs-built_in\">window<\/span>.open(directionsUrl, <span class=\"hljs-string\">'_blank'<\/span>);\n    }\n}\n\n<span class=\"hljs-comment\">\/\/ Handle window resize for responsiveness<\/span>\n<span class=\"hljs-built_in\">window<\/span>.addEventListener(<span class=\"hljs-string\">'resize'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n    <span class=\"hljs-keyword\">if<\/span> (map) {\n        google.maps.event.trigger(map, <span class=\"hljs-string\">'resize'<\/span>);\n    }\n});\n\n<span class=\"hljs-comment\">\/\/ Initialize map when DOM is loaded<\/span>\n<span class=\"hljs-built_in\">document<\/span>.addEventListener(<span class=\"hljs-string\">'DOMContentLoaded'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n    <span class=\"hljs-keyword\">if<\/span> (<span class=\"hljs-keyword\">typeof<\/span> google !== <span class=\"hljs-string\">'undefined'<\/span>) {\n        initMap();\n    }\n});\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"has-text-align-center\">Step 4: Use the Custom Map in WordPress<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1. <strong>Activate the plugin<\/strong> in WordPress admin<\/li>\n\n\n\n<li>2. <strong>Configure API key<\/strong> in Settings \u2192 Google Maps<\/li>\n\n\n\n<li>3.<strong> Use shortcode<\/strong> in any post or page:\n<ul class=\"wp-block-list\">\n<li>[custom_map lat=&#8221;40.7128&#8243; lng=&#8221;-74.0060&#8243; zoom=&#8221;14&#8243; title=&#8221;Our Main Office&#8221; address=&#8221;123 Broadway, New York, NY&#8221;]<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><strong>Custom shortcode allows easy map placement with customizable parameters.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"797\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-19-1024x797.png\" alt=\"\" class=\"wp-image-143\" style=\"width:600px;height:auto\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-19-1024x797.png 1024w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-19-300x233.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-19-768x598.png 768w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-19.png 1159w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\"><strong>The Challenges of Manual WordPress Maps Integration<\/strong><\/p>\n\n\n\n<p>While the custom plugin approach works, it presents significant challenges:<br><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1. API Key Management:<\/strong> Securing and rotating API keys requires ongoing attention<\/li>\n\n\n\n<li><strong>2. Plugin Maintenance:<\/strong> WordPress updates may break custom plugin functionality<\/li>\n\n\n\n<li><strong>3. Performance Impact:<\/strong> Multiple API calls can slow down your site<\/li>\n\n\n\n<li><strong>4. Mobile Responsiveness: <\/strong>Ensuring perfect mobile display requires additional CSS<\/li>\n\n\n\n<li><strong>5. Security Risks:<\/strong> Improper API key handling can lead to unauthorized usage charges<\/li>\n\n\n\n<li><strong>6. Feature Limitations<\/strong>: Advanced features like multiple locations require complex coding<\/li>\n\n\n\n<li><strong>7. Update Compatibility: <\/strong>WordPress core updates may require plugin modifications<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>The Simplified WordPress Solution: <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a><\/strong><br><\/p>\n\n\n\n<p>Why spend hours building and maintaining custom map solutions when you can have professional maps in minutes?<\/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<p><a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a> offers seamless WordPress integration without the technical complexity:<br><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1. WordPress-Optimized: <\/strong>Generated maps are perfectly optimized for WordPress performance<\/li>\n\n\n\n<li><strong>2. No API Management:<\/strong> We handle all backend API complexity<\/li>\n\n\n\n<li><strong>3. One-Click Embed:<\/strong> Simple copy-paste embed code that works with any WordPress theme<\/li>\n\n\n\n<li><strong>4. Automatic Updates:<\/strong> Maps stay current with WordPress and browser changes<\/li>\n\n\n\n<li><strong>5. Mobile-Perfect<\/strong>: Responsive design that works flawlessly on all devices<\/li>\n\n\n\n<li><strong>6. No Coding Required:<\/strong> Create beautiful, functional maps through a visual interface<\/li>\n\n\n\n<li><strong>7. Multiple Locations:<\/strong> Easily add multiple points without complex coding<\/li>\n<\/ul>\n\n\n\n<p>Stop wrestling with API keys and custom plugins. Create beautiful, high-performance Google Maps for your WordPress site in minutes. <strong>Visit <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a> to get started today<\/strong><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"How to Embed Google Map in WordPress: Complete Technical Guide Embedding a Google Map in WordPress seems straightforward, but creating a truly customized, high-performance map requires technical expertise. While there are basic methods, advanced implementations involve API keys, custom code, and ongoing maintenance. This guide covers both approaches. The advanced method requires WordPress theme editing [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19,1],"tags":[],"class_list":["post-140","post","type-post","status-publish","format-standard","hentry","category-embed-google-map-in-wordpress","category-1"],"_links":{"self":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/140","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=140"}],"version-history":[{"count":2,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/140\/revisions"}],"predecessor-version":[{"id":198,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/140\/revisions\/198"}],"wp:attachment":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}