{"id":149,"date":"2025-12-07T13:59:18","date_gmt":"2025-12-07T10:59:18","guid":{"rendered":"https:\/\/mapsfun.com\/?p=149"},"modified":"2025-12-15T10:56:07","modified_gmt":"2025-12-15T07:56:07","slug":"__trashed-2","status":"publish","type":"post","link":"https:\/\/mapsfun.com\/?p=149","title":{"rendered":"Top WordPress Plugins for Multiple Location Maps"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">How to Create a Multiple Location Map for WordPress: A Developer&#8217;s Guide<\/h2>\n\n\n\n<p>Displaying multiple locations on your WordPress site\u2014whether for store locators, event venues, or service areas\u2014significantly enhances user experience. While you can build a custom solution, it requires substantial development work. This guide will show you how to create a custom multiple location map plugin from scratch.<\/p>\n\n\n\n<p><strong>This method requires PHP\/JavaScript knowledge and a Google Cloud account with billing enabled.<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>Method 1: Build a Custom Multiple Location Map Plugin<\/strong><\/p>\n\n\n\n<p>This approach gives you complete control but involves creating a custom WordPress plugin.<\/p>\n\n\n\n<p class=\"has-text-align-center\">Step 1: Set Up Google Maps Platform<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1.&nbsp; Create a Google Cloud Project<\/strong> at the [Google Cloud Console]<\/li>\n\n\n\n<li><strong>2.&nbsp; Enable Billing<\/strong> (you&#8217;ll get $200 monthly credit)<\/li>\n\n\n\n<li><strong>3.&nbsp; Enable Maps JavaScript API<\/strong> and Geocoding API<\/li>\n\n\n\n<li><strong>4.&nbsp; Create and restrict an API Key<\/strong> to your domain and the enabled APIs<\/li>\n<\/ul>\n\n\n\n<p><strong>Restrict your API key to prevent unauthorized usage.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"931\" height=\"580\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-22.png\" alt=\"\" class=\"wp-image-150\" style=\"width:602px;height:auto\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-22.png 931w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-22-300x187.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-22-768x478.png 768w\" sizes=\"auto, (max-width: 931px) 100vw, 931px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Step 2: Create the Custom WordPress Plugin<\/p>\n\n\n\n<p>Create a new folder in your `\/wp-content\/plugins\/` directory called `multi-location-map` and add these files:<\/p>\n\n\n\n<p><strong>A. Create the main plugin file: `multi-location-map.php`<\/strong><\/p>\n\n\n\n<p><strong>php<\/strong><\/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: Multiple Location Map\n * Description: Display multiple locations on an interactive Google Map\n * Version: 1.0\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\">MultipleLocationMap<\/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\">'init'<\/span>, <span class=\"hljs-keyword\">array<\/span>(<span class=\"hljs-keyword\">$this<\/span>, <span class=\"hljs-string\">'init'<\/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\">'multi_location_map'<\/span>, <span class=\"hljs-keyword\">array<\/span>(<span class=\"hljs-keyword\">$this<\/span>, <span class=\"hljs-string\">'render_map_shortcode'<\/span>));\n    }\n    \n    <span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">init<\/span><span class=\"hljs-params\">()<\/span> <\/span>{\n        <span class=\"hljs-comment\">\/\/ Register custom post type for locations<\/span>\n        register_post_type(<span class=\"hljs-string\">'location'<\/span>,\n            <span class=\"hljs-keyword\">array<\/span>(\n                <span class=\"hljs-string\">'labels'<\/span> =&gt; <span class=\"hljs-keyword\">array<\/span>(\n                    <span class=\"hljs-string\">'name'<\/span> =&gt; __(<span class=\"hljs-string\">'Locations'<\/span>),\n                    <span class=\"hljs-string\">'singular_name'<\/span> =&gt; __(<span class=\"hljs-string\">'Location'<\/span>)\n                ),\n                <span class=\"hljs-string\">'public'<\/span> =&gt; <span class=\"hljs-keyword\">true<\/span>,\n                <span class=\"hljs-string\">'has_archive'<\/span> =&gt; <span class=\"hljs-keyword\">true<\/span>,\n                <span class=\"hljs-string\">'supports'<\/span> =&gt; <span class=\"hljs-keyword\">array<\/span>(<span class=\"hljs-string\">'title'<\/span>, <span class=\"hljs-string\">'editor'<\/span>, <span class=\"hljs-string\">'custom-fields'<\/span>)\n            )\n        );\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        <span class=\"hljs-keyword\">global<\/span> $post;\n        <span class=\"hljs-keyword\">if<\/span> (is_a($post, <span class=\"hljs-string\">'WP_Post'<\/span>) &amp;&amp; has_shortcode($post-&gt;post_content, <span class=\"hljs-string\">'multi_location_map'<\/span>)) {\n            wp_enqueue_script(<span class=\"hljs-string\">'google-maps'<\/span>, <span class=\"hljs-string\">'https:\/\/maps.googleapis.com\/maps\/api\/js?key=YOUR_API_KEY_HERE&amp;callback=Function.prototype'<\/span>, <span class=\"hljs-keyword\">array<\/span>(), <span class=\"hljs-keyword\">null<\/span>, <span class=\"hljs-keyword\">true<\/span>);\n            wp_enqueue_script(<span class=\"hljs-string\">'multi-location-map'<\/span>, plugin_dir_url(<span class=\"hljs-keyword\">__FILE__<\/span>) . <span class=\"hljs-string\">'map.js'<\/span>, <span class=\"hljs-keyword\">array<\/span>(<span class=\"hljs-string\">'jquery'<\/span>), <span class=\"hljs-string\">'1.0'<\/span>, <span class=\"hljs-keyword\">true<\/span>);\n            \n            <span class=\"hljs-comment\">\/\/ Pass locations to JavaScript<\/span>\n            $locations = <span class=\"hljs-keyword\">$this<\/span>-&gt;get_locations();\n            wp_localize_script(<span class=\"hljs-string\">'multi-location-map'<\/span>, <span class=\"hljs-string\">'mapData'<\/span>, <span class=\"hljs-keyword\">array<\/span>(\n                <span class=\"hljs-string\">'locations'<\/span> =&gt; $locations,\n                <span class=\"hljs-string\">'center'<\/span> =&gt; !<span class=\"hljs-keyword\">empty<\/span>($locations) ? $locations&#91;<span class=\"hljs-number\">0<\/span>] : <span class=\"hljs-keyword\">array<\/span>(<span class=\"hljs-string\">'lat'<\/span> =&gt; <span class=\"hljs-number\">40.7128<\/span>, <span class=\"hljs-string\">'lng'<\/span> =&gt; <span class=\"hljs-number\">-74.0060<\/span>)\n            ));\n        }\n    }\n    \n    <span class=\"hljs-keyword\">private<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">get_locations<\/span><span class=\"hljs-params\">()<\/span> <\/span>{\n        $locations = <span class=\"hljs-keyword\">array<\/span>();\n        $posts = get_posts(<span class=\"hljs-keyword\">array<\/span>(\n            <span class=\"hljs-string\">'post_type'<\/span> =&gt; <span class=\"hljs-string\">'location'<\/span>,\n            <span class=\"hljs-string\">'numberposts'<\/span> =&gt; <span class=\"hljs-number\">-1<\/span>\n        ));\n        \n        <span class=\"hljs-keyword\">foreach<\/span> ($posts <span class=\"hljs-keyword\">as<\/span> $post) {\n            $lat = get_post_meta($post-&gt;ID, <span class=\"hljs-string\">'latitude'<\/span>, <span class=\"hljs-keyword\">true<\/span>);\n            $lng = get_post_meta($post-&gt;ID, <span class=\"hljs-string\">'longitude'<\/span>, <span class=\"hljs-keyword\">true<\/span>);\n            $address = get_post_meta($post-&gt;ID, <span class=\"hljs-string\">'address'<\/span>, <span class=\"hljs-keyword\">true<\/span>);\n            \n            <span class=\"hljs-keyword\">if<\/span> ($lat &amp;&amp; $lng) {\n                $locations&#91;] = <span class=\"hljs-keyword\">array<\/span>(\n                    <span class=\"hljs-string\">'title'<\/span> =&gt; $post-&gt;post_title,\n                    <span class=\"hljs-string\">'lat'<\/span> =&gt; floatval($lat),\n                    <span class=\"hljs-string\">'lng'<\/span> =&gt; floatval($lng),\n                    <span class=\"hljs-string\">'address'<\/span> =&gt; $address,\n                    <span class=\"hljs-string\">'content'<\/span> =&gt; wp_trim_words($post-&gt;post_content, <span class=\"hljs-number\">20<\/span>)\n                );\n            }\n        }\n        \n        <span class=\"hljs-keyword\">return<\/span> $locations;\n    }\n    \n    <span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">render_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\">'height'<\/span> =&gt; <span class=\"hljs-string\">'500px'<\/span>,\n            <span class=\"hljs-string\">'width'<\/span> =&gt; <span class=\"hljs-string\">'100%'<\/span>\n        ), $atts);\n        \n        <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-string\">'&lt;div id=\"multi-location-map\" style=\"height: '<\/span> . esc_attr($atts&#91;<span class=\"hljs-string\">'height'<\/span>]) . <span class=\"hljs-string\">'; width: '<\/span> . esc_attr($atts&#91;<span class=\"hljs-string\">'width'<\/span>]) . <span class=\"hljs-string\">'; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);\"&gt;&lt;\/div&gt;'<\/span>;\n    }\n}\n\n<span class=\"hljs-keyword\">new<\/span> MultipleLocationMap();\n\n<span class=\"hljs-comment\">\/\/ Add meta boxes for location data<\/span>\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">add_location_meta_boxes<\/span><span class=\"hljs-params\">()<\/span> <\/span>{\n    add_meta_box(<span class=\"hljs-string\">'location_coordinates'<\/span>, <span class=\"hljs-string\">'Location Coordinates'<\/span>, <span class=\"hljs-string\">'location_coordinates_callback'<\/span>, <span class=\"hljs-string\">'location'<\/span>, <span class=\"hljs-string\">'normal'<\/span>, <span class=\"hljs-string\">'high'<\/span>);\n}\nadd_action(<span class=\"hljs-string\">'add_meta_boxes'<\/span>, <span class=\"hljs-string\">'add_location_meta_boxes'<\/span>);\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">location_coordinates_callback<\/span><span class=\"hljs-params\">($post)<\/span> <\/span>{\n    $lat = get_post_meta($post-&gt;ID, <span class=\"hljs-string\">'latitude'<\/span>, <span class=\"hljs-keyword\">true<\/span>);\n    $lng = get_post_meta($post-&gt;ID, <span class=\"hljs-string\">'longitude'<\/span>, <span class=\"hljs-keyword\">true<\/span>);\n    $address = get_post_meta($post-&gt;ID, <span class=\"hljs-string\">'address'<\/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\">p<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span>&gt;<\/span>Address:<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\">type<\/span>=<span class=\"hljs-string\">\"text\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"location_address\"<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"&lt;?php echo esc_attr($address); ?&gt;\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"width: 100%; margin-bottom: 10px;\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Enter full address for geocoding\"<\/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>&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\">type<\/span>=<span class=\"hljs-string\">\"text\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"latitude\"<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"&lt;?php echo esc_attr($lat); ?&gt;\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"width: 48%; margin-right: 2%;\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/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\">type<\/span>=<span class=\"hljs-string\">\"text\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"longitude\"<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"&lt;?php echo esc_attr($lng); ?&gt;\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"width: 48%;\"<\/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><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">small<\/span>&gt;<\/span>Use <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/www.latlong.net\/\"<\/span> <span class=\"hljs-attr\">target<\/span>=<span class=\"hljs-string\">\"_blank\"<\/span>&gt;<\/span>latlong.net<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span> to find coordinates<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">small<\/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-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">save_location_metadata<\/span><span class=\"hljs-params\">($post_id)<\/span> <\/span>{\n    <span class=\"hljs-keyword\">if<\/span> (defined(<span class=\"hljs-string\">'DOING_AUTOSAVE'<\/span>) &amp;&amp; DOING_AUTOSAVE) <span class=\"hljs-keyword\">return<\/span>;\n    \n    <span class=\"hljs-keyword\">if<\/span> (<span class=\"hljs-keyword\">isset<\/span>($_POST&#91;<span class=\"hljs-string\">'latitude'<\/span>])) {\n        update_post_meta($post_id, <span class=\"hljs-string\">'latitude'<\/span>, sanitize_text_field($_POST&#91;<span class=\"hljs-string\">'latitude'<\/span>]));\n    }\n    <span class=\"hljs-keyword\">if<\/span> (<span class=\"hljs-keyword\">isset<\/span>($_POST&#91;<span class=\"hljs-string\">'longitude'<\/span>])) {\n        update_post_meta($post_id, <span class=\"hljs-string\">'longitude'<\/span>, sanitize_text_field($_POST&#91;<span class=\"hljs-string\">'longitude'<\/span>]));\n    }\n    <span class=\"hljs-keyword\">if<\/span> (<span class=\"hljs-keyword\">isset<\/span>($_POST&#91;<span class=\"hljs-string\">'location_address'<\/span>])) {\n        update_post_meta($post_id, <span class=\"hljs-string\">'address'<\/span>, sanitize_text_field($_POST&#91;<span class=\"hljs-string\">'location_address'<\/span>]));\n    }\n}\nadd_action(<span class=\"hljs-string\">'save_post'<\/span>, <span class=\"hljs-string\">'save_location_metadata'<\/span>);\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><strong>B. Create the JavaScript file: `map.js<\/strong><\/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\">jQuery(<span class=\"hljs-built_in\">document<\/span>).ready(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">$<\/span>) <\/span>{\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">initMultiLocationMap<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n        <span class=\"hljs-keyword\">const<\/span> mapElement = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'multi-location-map'<\/span>);\n        <span class=\"hljs-keyword\">if<\/span> (!mapElement) <span class=\"hljs-keyword\">return<\/span>;\n        \n        <span class=\"hljs-keyword\">const<\/span> map = <span class=\"hljs-keyword\">new<\/span> google.maps.Map(mapElement, {\n            <span class=\"hljs-attr\">zoom<\/span>: <span class=\"hljs-number\">10<\/span>,\n            <span class=\"hljs-attr\">center<\/span>: <span class=\"hljs-keyword\">new<\/span> google.maps.LatLng(mapData.center.lat, mapData.center.lng),\n            <span class=\"hljs-attr\">mapTypeControl<\/span>: <span class=\"hljs-literal\">false<\/span>,\n            <span class=\"hljs-attr\">styles<\/span>: &#91;\n                {<span class=\"hljs-attr\">featureType<\/span>: <span class=\"hljs-string\">\"poi\"<\/span>, <span class=\"hljs-attr\">stylers<\/span>: &#91;{<span class=\"hljs-attr\">visibility<\/span>: <span class=\"hljs-string\">\"off\"<\/span>}]},\n                {<span class=\"hljs-attr\">featureType<\/span>: <span class=\"hljs-string\">\"transit\"<\/span>, <span class=\"hljs-attr\">stylers<\/span>: &#91;{<span class=\"hljs-attr\">visibility<\/span>: <span class=\"hljs-string\">\"off\"<\/span>}]}\n            ]\n        });\n        \n        <span class=\"hljs-keyword\">const<\/span> bounds = <span class=\"hljs-keyword\">new<\/span> google.maps.LatLngBounds();\n        <span class=\"hljs-keyword\">const<\/span> infoWindow = <span class=\"hljs-keyword\">new<\/span> google.maps.InfoWindow();\n        \n        <span class=\"hljs-comment\">\/\/ Add markers for each location<\/span>\n        mapData.locations.forEach(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">location<\/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>: {<span class=\"hljs-attr\">lat<\/span>: location.lat, <span class=\"hljs-attr\">lng<\/span>: location.lng},\n                <span class=\"hljs-attr\">map<\/span>: map,\n                <span class=\"hljs-attr\">title<\/span>: location.title\n            });\n            \n            bounds.extend(marker.getPosition());\n            \n            <span class=\"hljs-comment\">\/\/ Add click listener for info window<\/span>\n            marker.addListener(<span class=\"hljs-string\">'click'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n                infoWindow.setContent(<span class=\"hljs-string\">`\n                    &lt;div style=\"padding: 12px; max-width: 250px;\"&gt;\n                        &lt;h3 style=\"margin: 0 0 8px 0; color: #2c3e50;\"&gt;<span class=\"hljs-subst\">${location.title}<\/span>&lt;\/h3&gt;\n                        &lt;p style=\"margin: 0 0 8px 0; color: #666;\"&gt;<span class=\"hljs-subst\">${location.address}<\/span>&lt;\/p&gt;\n                        &lt;p style=\"margin: 0; font-size: 14px;\"&gt;<span class=\"hljs-subst\">${location.content}<\/span>&lt;\/p&gt;\n                    &lt;\/div&gt;\n                `<\/span>);\n                infoWindow.open(map, marker);\n            });\n        });\n        \n        <span class=\"hljs-comment\">\/\/ Adjust map bounds to show all markers<\/span>\n        <span class=\"hljs-keyword\">if<\/span> (mapData.locations.length &gt; <span class=\"hljs-number\">1<\/span>) {\n            map.fitBounds(bounds);\n        }\n    }\n    \n    <span class=\"hljs-comment\">\/\/ Initialize map when Google Maps API is loaded<\/span>\n    <span class=\"hljs-keyword\">if<\/span> (<span class=\"hljs-keyword\">typeof<\/span> google !== <span class=\"hljs-string\">'undefined'<\/span>) {\n        initMultiLocationMap();\n    } <span class=\"hljs-keyword\">else<\/span> {\n        <span class=\"hljs-built_in\">window<\/span>.initMultiLocationMap = initMultiLocationMap;\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 3: Install and Configure the Plugin<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1.&nbsp;<strong> Replace `YOUR_API_KEY_HERE<\/strong>` with your actual Google Maps API key<\/li>\n\n\n\n<li>2.&nbsp; <strong>Zip the plugin folder<\/strong> and upload via WordPress Admin &gt; Plugins &gt; Add New<\/li>\n\n\n\n<li>3<strong>.&nbsp; Activate the plugin<\/strong><\/li>\n\n\n\n<li>4.&nbsp; <strong>Add locations<\/strong> via the new &#8220;Locations&#8221; menu in WordPress admin<\/li>\n\n\n\n<li>5.&nbsp; <strong>Use the shortcode<\/strong> `[multi_location_map]` on any post or page<\/li>\n<\/ul>\n\n\n\n<p><strong>Add and manage locations through the custom post type interface.<\/strong><br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"596\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-23-1024x596.png\" alt=\"\" class=\"wp-image-151\" style=\"width:668px;height:auto\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-23-1024x596.png 1024w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-23-300x175.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-23-768x447.png 768w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-23.png 1216w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\"><strong>The Challenges of This Custom Plugin Method<\/strong><\/p>\n\n\n\n<p>While this solution offers complete control, it comes with significant drawbacks:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Development Complexity<\/strong>: Requires extensive PHP and JavaScript knowledge<\/li>\n\n\n\n<li><strong>Maintenance Burden:<\/strong> You&#8217;re responsible for security updates and compatibility<\/li>\n\n\n\n<li><strong>No Geocoding:<\/strong> Users must manually find and enter latitude\/longitude coordinates<\/li>\n\n\n\n<li><strong>Limited Features:<\/strong> Missing advanced functionality like search filters, categories, or custom marker clustering<\/li>\n\n\n\n<li><strong>API Management:<\/strong> Requires ongoing monitoring of Google Cloud usage and costs<\/li>\n\n\n\n<li><strong>Time-Consuming: <\/strong>Development and testing can take days or weeks<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>Get a Professional Multi-Location Map in Minutes with MapsFun.com<\/strong><\/p>\n\n\n\n<p>Why spend weeks developing and maintaining a custom solution when you can have a superior, feature-rich map 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 ultimate WordPress multi-location mapping solution:<br><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1.&nbsp; <strong>Zero Coding Required:<\/strong> Create stunning maps with our visual editor\u2014no development needed<\/li>\n\n\n\n<li>2.<strong>&nbsp; Automatic Geocoding:<\/strong> Simply enter addresses\u2014we handle the coordinates automatically<\/li>\n\n\n\n<li>3.&nbsp; <strong>Advanced Features: <\/strong>Marker clustering, category filters, live search, and custom styling<\/li>\n\n\n\n<li>4.&nbsp; <strong>Easy WordPress Integration:<\/strong> Simple plugin installation or embed code<\/li>\n\n\n\n<li>5.&nbsp;<strong> Fully Managed:<\/strong> No API keys, no security concerns, automatic updates<\/li>\n<\/ul>\n\n\n\n<p>Stop wasting time on complex development and maintenance. Create a professional, feature-rich multi-location map in just a few clicks at <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"How to Create a Multiple Location Map for WordPress: A Developer&#8217;s Guide Displaying multiple locations on your WordPress site\u2014whether for store locators, event venues, or service areas\u2014significantly enhances user experience. While you can build a custom solution, it requires substantial development work. This guide will show you how to create a custom multiple location map [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21,1],"tags":[],"class_list":["post-149","post","type-post","status-publish","format-standard","hentry","category-multiple-location-map-wordpress-plugin","category-1"],"_links":{"self":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/149","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=149"}],"version-history":[{"count":3,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/149\/revisions"}],"predecessor-version":[{"id":194,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/149\/revisions\/194"}],"wp:attachment":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=149"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=149"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}