{"id":156,"date":"2025-12-15T10:57:11","date_gmt":"2025-12-15T07:57:11","guid":{"rendered":"https:\/\/mapsfun.com\/?p=156"},"modified":"2025-12-15T10:57:12","modified_gmt":"2025-12-15T07:57:12","slug":"best-map-widgets-for-wordpress-2025-top-recommendations","status":"publish","type":"post","link":"https:\/\/mapsfun.com\/?p=156","title":{"rendered":"Best Map Widgets for WordPress (2025 Top Recommendations)"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">How to Add a Custom Map Widget to Your WordPress Site: A Developer&#8217;s Guide<\/h2>\n\n\n\n<p>Adding an interactive map widget to your WordPress &#8220;Contact Us&#8221; page or sidebar is crucial for helping visitors find your location. While plugin-free solutions offer more control and better performance, they require a technical approach.<\/p>\n\n\n\n<p>This guide will walk you through creating a custom, lightweight Google Maps widget without relying on heavy plugins.<\/p>\n\n\n\n<p><strong>This method requires a Google Cloud account and basic familiarity with editing WordPress files.<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>Method 1: The Custom Code Method (Plugin-Free)<\/strong><\/p>\n\n\n\n<p>This approach creates a fast-loading, fully customized map widget by adding code directly to your theme.<\/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>1.&nbsp; <strong>Go to the Google Cloud Console:<\/strong> Navigate to [Google Cloud Console](<strong>https:\/\/console.cloud.google.com\/<\/strong>) and create a new project.<\/li>\n\n\n\n<li><strong>2.&nbsp; Enable Billing: <\/strong>You must enable billing, but the generous $200 monthly credit will cover most website usage.<\/li>\n\n\n\n<li><strong>3.&nbsp; Enable the Maps JavaScript API:<\/strong> In the &#8220;APIs &amp; Services&#8221; library, find and enable the **Maps JavaScript API**.<\/li>\n\n\n\n<li><strong>4.&nbsp; Create an API Key: <\/strong>Go to &#8220;Credentials&#8221;, create an API key, and **restrict it** to your domain and the Maps JavaScript API for security.<\/li>\n<\/ul>\n\n\n\n<p><strong>Enable the Maps JavaScript API in your Google Cloud project.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"322\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-24-1024x322.png\" alt=\"\" class=\"wp-image-157\" style=\"width:624px;height:auto\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-24-1024x322.png 1024w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-24-300x94.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-24-768x242.png 768w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-24.png 1046w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Step 2: Add the Code to Your WordPress Theme<\/p>\n\n\n\n<p>Here&#8217;s the complete, working code for a custom map widget. You&#8217;ll need to add this to your theme files.<\/p>\n\n\n\n<p><strong>A. Add the CSS to your theme&#8217;s stylesheet<\/strong><\/p>\n\n\n\n<p>Add this to your `style.css` file or WordPress Customizer &gt; Additional CSS:<\/p>\n\n\n\n<p><strong>css<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-comment\">\/* Custom Map Widget Styling *\/<\/span>\n<span class=\"hljs-selector-class\">.custom-map-widget<\/span> {\n    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n    <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">300px<\/span>;\n    <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">8px<\/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\">2px<\/span> <span class=\"hljs-number\">10px<\/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\">margin<\/span>: <span class=\"hljs-number\">15px<\/span> <span class=\"hljs-number\">0<\/span>;\n    <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#e0e0e0<\/span>;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>B. Add the HTML and JavaScript to your theme files<\/strong><\/p>\n\n\n\n<p>Create a new file called `custom-map-widget.php` and add this complete code:<\/p>\n\n\n\n<p><strong>php<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" 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 * Custom Map Widget for WordPress\n *\/<\/span>\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">Custom_Map_Widget<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">WP_Widget<\/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        <span class=\"hljs-keyword\">parent<\/span>::__construct(\n            <span class=\"hljs-string\">'custom_map_widget'<\/span>,\n            <span class=\"hljs-string\">'Custom Map Widget'<\/span>,\n            <span class=\"hljs-keyword\">array<\/span>(<span class=\"hljs-string\">'description'<\/span> =&gt; <span class=\"hljs-string\">'A custom Google Maps widget for your location'<\/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\">widget<\/span><span class=\"hljs-params\">($args, $instance)<\/span> <\/span>{\n        <span class=\"hljs-keyword\">echo<\/span> $args&#91;<span class=\"hljs-string\">'before_widget'<\/span>];\n        \n        <span class=\"hljs-comment\">\/\/ Widget title<\/span>\n        <span class=\"hljs-keyword\">if<\/span> (!<span class=\"hljs-keyword\">empty<\/span>($instance&#91;<span class=\"hljs-string\">'title'<\/span>])) {\n            <span class=\"hljs-keyword\">echo<\/span> $args&#91;<span class=\"hljs-string\">'before_title'<\/span>] . apply_filters(<span class=\"hljs-string\">'widget_title'<\/span>, $instance&#91;<span class=\"hljs-string\">'title'<\/span>]) . $args&#91;<span class=\"hljs-string\">'after_title'<\/span>];\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Map container<\/span>\n        <span class=\"hljs-keyword\">echo<\/span> <span class=\"hljs-string\">'&lt;div class=\"custom-map-widget\" id=\"map-'<\/span> . <span class=\"hljs-keyword\">$this<\/span>-&gt;id . <span class=\"hljs-string\">'\"&gt;&lt;\/div&gt;'<\/span>;\n        \n        <span class=\"hljs-comment\">\/\/ JavaScript for the map<\/span>\n        <span class=\"hljs-meta\">?&gt;<\/span><\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"handlebars\"><span class=\"xml\">\n        function initMap<span class=\"php\"><span class=\"hljs-meta\">&lt;?php<\/span> <span class=\"hljs-keyword\">echo<\/span> str_replace(<span class=\"hljs-string\">'-'<\/span>, <span class=\"hljs-string\">'_'<\/span>, <span class=\"hljs-keyword\">$this<\/span>-&gt;id); <span class=\"hljs-meta\">?&gt;<\/span><\/span>() {\n            const location = { lat: <span class=\"php\"><span class=\"hljs-meta\">&lt;?php<\/span> <span class=\"hljs-keyword\">echo<\/span> esc_js($instance&#91;<span class=\"hljs-string\">'latitude'<\/span>]); <span class=\"hljs-meta\">?&gt;<\/span><\/span>, lng: <span class=\"php\"><span class=\"hljs-meta\">&lt;?php<\/span> <span class=\"hljs-keyword\">echo<\/span> esc_js($instance&#91;<span class=\"hljs-string\">'longitude'<\/span>]); <span class=\"hljs-meta\">?&gt;<\/span><\/span> };\n            \n            const map = new google.maps.Map(document.getElementById('map-<span class=\"php\"><span class=\"hljs-meta\">&lt;?php<\/span> <span class=\"hljs-keyword\">echo<\/span> <span class=\"hljs-keyword\">$this<\/span>-&gt;id; <span class=\"hljs-meta\">?&gt;<\/span><\/span>'), {\n                zoom: 15,\n                center: location,\n                mapTypeControl: false,\n                streetViewControl: true,\n                fullscreenControl: true,\n                styles: &#91;\n                    {featureType: \"poi\", stylers: &#91;{visibility: \"off\"}]} \/\/ Hide points of interest\n                ]\n            });\n            \n            new google.maps.Marker({\n                position: location,\n                map: map,\n                title: \"<span class=\"php\"><span class=\"hljs-meta\">&lt;?php<\/span> <span class=\"hljs-keyword\">echo<\/span> esc_js($instance&#91;<span class=\"hljs-string\">'location_name'<\/span>]); <span class=\"hljs-meta\">?&gt;<\/span><\/span>\"\n            });\n        }\n        <\/span><\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n        <span class=\"php\"><span class=\"hljs-meta\">&lt;?php<\/span>\n        <span class=\"hljs-keyword\">echo<\/span> $args&#91;<span class=\"hljs-string\">'after_widget'<\/span>];\n    }\n    \n    <span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">form<\/span><span class=\"hljs-params\">($instance)<\/span> <\/span>{\n        $title = !<span class=\"hljs-keyword\">empty<\/span>($instance&#91;<span class=\"hljs-string\">'title'<\/span>]) ? $instance&#91;<span class=\"hljs-string\">'title'<\/span>] : <span class=\"hljs-string\">'Our Location'<\/span>;\n        $latitude = !<span class=\"hljs-keyword\">empty<\/span>($instance&#91;<span class=\"hljs-string\">'latitude'<\/span>]) ? $instance&#91;<span class=\"hljs-string\">'latitude'<\/span>] : <span class=\"hljs-string\">'40.7128'<\/span>;\n        $longitude = !<span class=\"hljs-keyword\">empty<\/span>($instance&#91;<span class=\"hljs-string\">'longitude'<\/span>]) ? $instance&#91;<span class=\"hljs-string\">'longitude'<\/span>] : <span class=\"hljs-string\">'-74.0060'<\/span>;\n        $location_name = !<span class=\"hljs-keyword\">empty<\/span>($instance&#91;<span class=\"hljs-string\">'location_name'<\/span>]) ? $instance&#91;<span class=\"hljs-string\">'location_name'<\/span>] : <span class=\"hljs-string\">'Our Office'<\/span>;\n        <span class=\"hljs-meta\">?&gt;<\/span><\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">\"&lt;?php echo $this-&gt;get_field_id('title'); ?&gt;\"<\/span>&gt;<\/span>Widget Title:<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"widefat\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"&lt;?php echo $this-&gt;get_field_id('title'); ?&gt;\"<\/span> \n                   <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"&lt;?php echo $this-&gt;get_field_name('title'); ?&gt;\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\"<\/span> \n                   <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"&lt;?php echo esc_attr($title); ?&gt;\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">\"&lt;?php echo $this-&gt;get_field_id('latitude'); ?&gt;\"<\/span>&gt;<\/span>Latitude:<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"widefat\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"&lt;?php echo $this-&gt;get_field_id('latitude'); ?&gt;\"<\/span> \n                   <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"&lt;?php echo $this-&gt;get_field_name('latitude'); ?&gt;\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\"<\/span> \n                   <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"&lt;?php echo esc_attr($latitude); ?&gt;\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">\"&lt;?php echo $this-&gt;get_field_id('longitude'); ?&gt;\"<\/span>&gt;<\/span>Longitude:<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"widefat\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"&lt;?php echo $this-&gt;get_field_id('longitude'); ?&gt;\"<\/span> \n                   <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"&lt;?php echo $this-&gt;get_field_name('longitude'); ?&gt;\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\"<\/span> \n                   <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"&lt;?php echo esc_attr($longitude); ?&gt;\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">\"&lt;?php echo $this-&gt;get_field_id('location_name'); ?&gt;\"<\/span>&gt;<\/span>Location Name:<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"widefat\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"&lt;?php echo $this-&gt;get_field_id('location_name'); ?&gt;\"<\/span> \n                   <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"&lt;?php echo $this-&gt;get_field_name('location_name'); ?&gt;\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\"<\/span> \n                   <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"&lt;?php echo esc_attr($location_name); ?&gt;\"<\/span>&gt;<\/span>\n        <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\">update<\/span><span class=\"hljs-params\">($new_instance, $old_instance)<\/span> <\/span>{\n        $instance = <span class=\"hljs-keyword\">array<\/span>();\n        $instance&#91;<span class=\"hljs-string\">'title'<\/span>] = (!<span class=\"hljs-keyword\">empty<\/span>($new_instance&#91;<span class=\"hljs-string\">'title'<\/span>])) ? strip_tags($new_instance&#91;<span class=\"hljs-string\">'title'<\/span>]) : <span class=\"hljs-string\">''<\/span>;\n        $instance&#91;<span class=\"hljs-string\">'latitude'<\/span>] = (!<span class=\"hljs-keyword\">empty<\/span>($new_instance&#91;<span class=\"hljs-string\">'latitude'<\/span>])) ? floatval($new_instance&#91;<span class=\"hljs-string\">'latitude'<\/span>]) : <span class=\"hljs-string\">''<\/span>;\n        $instance&#91;<span class=\"hljs-string\">'longitude'<\/span>] = (!<span class=\"hljs-keyword\">empty<\/span>($new_instance&#91;<span class=\"hljs-string\">'longitude'<\/span>])) ? floatval($new_instance&#91;<span class=\"hljs-string\">'longitude'<\/span>]) : <span class=\"hljs-string\">''<\/span>;\n        $instance&#91;<span class=\"hljs-string\">'location_name'<\/span>] = (!<span class=\"hljs-keyword\">empty<\/span>($new_instance&#91;<span class=\"hljs-string\">'location_name'<\/span>])) ? strip_tags($new_instance&#91;<span class=\"hljs-string\">'location_name'<\/span>]) : <span class=\"hljs-string\">''<\/span>;\n        <span class=\"hljs-keyword\">return<\/span> $instance;\n    }\n}\n\n<span class=\"hljs-comment\">\/\/ Register the widget<\/span>\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">register_custom_map_widget<\/span><span class=\"hljs-params\">()<\/span> <\/span>{\n    register_widget(<span class=\"hljs-string\">'Custom_Map_Widget'<\/span>);\n}\nadd_action(<span class=\"hljs-string\">'widgets_init'<\/span>, <span class=\"hljs-string\">'register_custom_map_widget'<\/span>);\n\n<span class=\"hljs-comment\">\/\/ Enqueue Google Maps API<\/span>\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">add_google_maps_api<\/span><span class=\"hljs-params\">()<\/span> <\/span>{\n    <span class=\"hljs-keyword\">if<\/span> (is_active_widget(<span class=\"hljs-keyword\">false<\/span>, <span class=\"hljs-keyword\">false<\/span>, <span class=\"hljs-string\">'custom_map_widget'<\/span>, <span class=\"hljs-keyword\">true<\/span>)) {\n        <span class=\"hljs-meta\">?&gt;<\/span><\/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=initAllMaps\"<\/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\">script<\/span>&gt;<\/span><span class=\"actionscript\">\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">initAllMaps<\/span><span class=\"hljs-params\">()<\/span> <\/span>{\n            <span class=\"hljs-comment\">\/\/ Maps are initialized by their individual widget scripts<\/span>\n        }\n        <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n        <span class=\"php\"><span class=\"hljs-meta\">&lt;?php<\/span>\n    }\n}\nadd_action(<span class=\"hljs-string\">'wp_footer'<\/span>, <span class=\"hljs-string\">'add_google_maps_api'<\/span>);\n<span class=\"hljs-meta\">?&gt;<\/span><\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><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>C. Add the widget file to your theme<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1.&nbsp; Add the `custom-map-widget.php` file to your theme directory<\/li>\n\n\n\n<li>2.&nbsp; Include it in your theme&#8217;s `functions.php` file by adding this line at the end:<\/li>\n\n\n\n<li>`<strong>&#8220;php<\/strong><\/li>\n\n\n\n<li><strong>require_once get_template_directory() . &#8216;\/custom-map-widget.php&#8217;;<\/strong><\/li>\n\n\n\n<li><strong>&#8220;`<\/strong><\/li>\n<\/ul>\n\n\n\n<p><strong>D. Configure the API Key<\/strong><\/p>\n\n\n\n<p>Replace `<strong>YOUR_API_KEY_HERE<\/strong>` in the code with your actual restricted Google Maps API key.<\/p>\n\n\n\n<p class=\"has-text-align-center\">Step 3: Use the Widget in WordPress<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1.&nbsp; Go to <strong>Appearance &gt; Widgets<\/strong> in your WordPress admin<\/li>\n\n\n\n<li>2.&nbsp; Find the &#8220;Custom Map Widget&#8221; in the available widgets list<\/li>\n\n\n\n<li>3.&nbsp; Drag it to your desired widget area (sidebar, footer, etc.)<\/li>\n\n\n\n<li>4.&nbsp; Configure the title, coordinates, and location name<\/li>\n\n\n\n<li>5.&nbsp; Save the widget<\/li>\n<\/ul>\n\n\n\n<p><strong>Configure your map widget with coordinates and location name<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"523\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-25-1024x523.png\" alt=\"\" class=\"wp-image-158\" style=\"width:709px;height:auto\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-25-1024x523.png 1024w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-25-300x153.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-25-768x392.png 768w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-25.png 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\"><strong>The Challenges of This Custom Code Method<\/strong><\/p>\n\n\n\n<p>While this solution is lightweight and avoids plugins, it has significant drawbacks:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Technical Complexity:<\/strong> Requires editing theme files and understanding PHP\/JavaScript<\/li>\n\n\n\n<li><strong>Theme Dependency: <\/strong>The custom code may break when you update or change your theme<\/li>\n\n\n\n<li><strong>Security Risks:<\/strong> Incorrect API key configuration can lead to unauthorized usage<\/li>\n\n\n\n<li><strong>Limited Features:<\/strong> Adding multiple locations or advanced styling requires extensive code modifications<\/li>\n\n\n\n<li><strong>Maintenance Burden:<\/strong> You&#8217;re responsible for keeping the code secure and functional<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>Get a Professional Map Widget in Minutes with <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a><\/strong><\/p>\n\n\n\n<p>Why spend hours coding and troubleshooting when you can have a better solution instantly?<\/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 the perfect WordPress map solution without any technical hassle:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1.&nbsp; No Coding Required: <\/strong>Create beautiful maps with a simple visual editor<\/li>\n\n\n\n<li><strong>2.&nbsp; Automatic WordPress Integration:<\/strong> Get a dedicated plugin or simple embed code that works with any theme<\/li>\n\n\n\n<li><strong>3.&nbsp; Advanced Features:<\/strong> Multiple locations, custom markers, contact forms, and pre-designed styles<\/li>\n\n\n\n<li><strong>4.&nbsp; Fully Managed:<\/strong> No API keys, no security concerns, no maintenance needed<\/li>\n<\/ul>\n\n\n\n<p>Stop wrestling with complex code and theme compatibility issues. Create and embed a professional, feature-rich map widget in just a few clicks at <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a>.<br><\/p>\n","protected":false},"excerpt":{"rendered":"How to Add a Custom Map Widget to Your WordPress Site: A Developer&#8217;s Guide Adding an interactive map widget to your WordPress &#8220;Contact Us&#8221; page or sidebar is crucial for helping visitors find your location. While plugin-free solutions offer more control and better performance, they require a technical approach. This guide will walk you through [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22,1],"tags":[],"class_list":["post-156","post","type-post","status-publish","format-standard","hentry","category-map-widget-for-wordpress","category-1"],"_links":{"self":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/156","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=156"}],"version-history":[{"count":2,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/156\/revisions"}],"predecessor-version":[{"id":208,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/156\/revisions\/208"}],"wp:attachment":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=156"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=156"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}