{"id":686,"date":"2025-12-15T12:13:24","date_gmt":"2025-12-15T09:13:24","guid":{"rendered":"https:\/\/mapsfun.com\/?p=686"},"modified":"2025-12-15T12:13:24","modified_gmt":"2025-12-15T09:13:24","slug":"how-to-pin-multiple-locations-on-google-maps-2025-quick-guide","status":"publish","type":"post","link":"https:\/\/mapsfun.com\/?p=686","title":{"rendered":"How to Pin Multiple Locations on Google Maps (2025 Quick Guide)"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">How to Pin Multiple Locations on Google Maps: Complete Technical Guide<\/h2>\n\n\n\n<p>Need to display multiple business locations, event venues, or service areas on your website? While Google Maps provides the tools to create custom maps with multiple pins, the process involves significant technical complexity. Here&#8217;s your comprehensive guide to implementing this functionality.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>Method 1: Manual Implementation Using Google Maps API<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-center\"> Step 1: Google Cloud Project Configuration<\/p>\n\n\n\n<p>Before writing any code, you need to set up access to Google&#8217;s mapping services:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1. Create Google Cloud Project<\/strong><\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Visit [Google Cloud Console](https:\/\/console.cloud.google.com\/)<\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Create new project or select existing one<\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Enable billing (credit card required, includes $200 monthly credit)<\/li>\n\n\n\n<li><strong>2. Enable Required APIs<\/strong><\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;Navigate to &#8220;APIs &amp; Services &gt; Library&#8221; and enable:<\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Maps JavaScript API (core mapping functionality)<\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Geocoding API (address conversion)<\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Places API (location search and details)<\/li>\n\n\n\n<li><strong>3. Generate Secure API Key<\/strong><\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Go to &#8220;Credentials&#8221; section<\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Create new API key<\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Restrict by HTTP referrers (your domain)<\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Apply API restrictions to Maps JavaScript and Geocoding APIs<\/li>\n<\/ul>\n\n\n\n<p><strong>Proper API key restriction prevents unauthorized usage and unexpected charges<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"443\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-146.png\" alt=\"\" class=\"wp-image-687\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-146.png 720w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-146-300x185.png 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Step 2: Complete HTML\/JavaScript Implementation<\/p>\n\n\n\n<p>Create a file called `multi-pin-map.html` with this complete working code:<\/p>\n\n\n\n<p><strong>html<\/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=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Multiple Location Pins - Google Maps<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"viewport\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"width=device-width, initial-scale=1.0\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\">\n        <span class=\"hljs-selector-class\">.map-container<\/span> {\n            <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">1200px<\/span>;\n            <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span> auto;\n            <span class=\"hljs-attribute\">font-family<\/span>: <span class=\"hljs-string\">'Arial'<\/span>, sans-serif;\n        }\n        <span class=\"hljs-selector-id\">#map<\/span> {\n            <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">600px<\/span>;\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">8px<\/span>;\n            <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#ddd<\/span>;\n            <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">20px<\/span> <span class=\"hljs-number\">0<\/span>;\n        }\n        <span class=\"hljs-selector-class\">.controls-panel<\/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\">20px<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">8px<\/span>;\n            <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">20px<\/span> <span class=\"hljs-number\">0<\/span>;\n        }\n        <span class=\"hljs-selector-class\">.location-pin<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: white;\n            <span class=\"hljs-attribute\">border-left<\/span>: <span class=\"hljs-number\">4px<\/span> solid <span class=\"hljs-number\">#4285f4<\/span>;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">15px<\/span>;\n            <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">10px<\/span> <span class=\"hljs-number\">0<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">4px<\/span>;\n            <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">2px<\/span> <span class=\"hljs-number\">4px<\/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        <span class=\"hljs-selector-class\">.pin-icon<\/span> {\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">25px<\/span>;\n            <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">35px<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#ea4335<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">50%<\/span> <span class=\"hljs-number\">50%<\/span> <span class=\"hljs-number\">50%<\/span> <span class=\"hljs-number\">0<\/span>;\n            <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">rotate<\/span>(-<span class=\"hljs-number\">45deg<\/span>);\n            <span class=\"hljs-attribute\">display<\/span>: inline-block;\n            <span class=\"hljs-attribute\">margin-right<\/span>: <span class=\"hljs-number\">10px<\/span>;\n        }\n        <span class=\"hljs-selector-class\">.search-box<\/span> {\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">12px<\/span>;\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">350px<\/span>;\n            <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#ddd<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">4px<\/span>;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">16px<\/span>;\n        }\n        <span class=\"hljs-selector-class\">.action-button<\/span> {\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">12px<\/span> <span class=\"hljs-number\">24px<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#4285f4<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: white;\n            <span class=\"hljs-attribute\">border<\/span>: none;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">4px<\/span>;\n            <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">16px<\/span>;\n            <span class=\"hljs-attribute\">margin-left<\/span>: <span class=\"hljs-number\">10px<\/span>;\n        }\n        <span class=\"hljs-selector-class\">.action-button<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#3367d6<\/span>;\n        }\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"map-container\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Pin Multiple Locations on Google Maps<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n        \n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"controls-panel\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span>&gt;<\/span>Add Location Pins<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/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\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"location-search\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"search-box\"<\/span> \n                       <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Search for an address or place...\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">onclick<\/span>=<span class=\"hljs-string\">\"searchAndAddLocation()\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"action-button\"<\/span>&gt;<\/span>Add Pin<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">onclick<\/span>=<span class=\"hljs-string\">\"clearAllPins()\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"action-button\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"background: #ea4335;\"<\/span>&gt;<\/span>Clear All Pins<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/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\">style<\/span>=<span class=\"hljs-string\">\"margin-top: 15px;\"<\/span>&gt;<\/span>\n                <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\">\"checkbox\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"auto-cluster\"<\/span> <span class=\"hljs-attr\">checked<\/span>&gt;<\/span> \n                    Enable marker clustering (for better performance)\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/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\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"map\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"pins-list\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span>&gt;<\/span>Current Location Pins (<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"pin-count\"<\/span>&gt;<\/span>0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>)<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"pins-container\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n    <span class=\"hljs-comment\">&lt;!-- Load Google Maps API with Places library --&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=YOUR_API_KEY_HERE&amp;libraries=places&amp;callback=initMap\"<\/span> <span class=\"hljs-attr\">async<\/span> <span class=\"hljs-attr\">defer<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n        <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        <span class=\"hljs-keyword\">let<\/span> locations = &#91;];\n        <span class=\"hljs-keyword\">let<\/span> autocomplete;\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 the map with custom options<\/span>\n            map = <span class=\"hljs-keyword\">new<\/span> google.maps.Map(<span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'map'<\/span>), {\n                <span class=\"hljs-attr\">center<\/span>: { <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">39.8283<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-98.5795<\/span> }, <span class=\"hljs-comment\">\/\/ Center of US<\/span>\n                <span class=\"hljs-attr\">zoom<\/span>: <span class=\"hljs-number\">4<\/span>,\n                <span class=\"hljs-attr\">styles<\/span>: &#91;\n                    {\n                        <span class=\"hljs-string\">\"featureType\"<\/span>: <span class=\"hljs-string\">\"poi\"<\/span>,\n                        <span class=\"hljs-string\">\"elementType\"<\/span>: <span class=\"hljs-string\">\"labels.text\"<\/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-string\">\"featureType\"<\/span>: <span class=\"hljs-string\">\"transit\"<\/span>,\n                        <span class=\"hljs-string\">\"stylers\"<\/span>: &#91;{ <span class=\"hljs-string\">\"visibility\"<\/span>: <span class=\"hljs-string\">\"off\"<\/span> }]\n                    }\n                ]\n            });\n\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 autocomplete for search box<\/span>\n            <span class=\"hljs-keyword\">const<\/span> searchInput = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'location-search'<\/span>);\n            autocomplete = <span class=\"hljs-keyword\">new<\/span> google.maps.places.Autocomplete(searchInput);\n            autocomplete.bindTo(<span class=\"hljs-string\">'bounds'<\/span>, map);\n\n            <span class=\"hljs-comment\">\/\/ Add sample location pins<\/span>\n            <span class=\"hljs-keyword\">const<\/span> sampleLocations = &#91;\n                {\n                    <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"New York Headquarters\"<\/span>,\n                    <span class=\"hljs-attr\">position<\/span>: { <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">40.7128<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-74.0060<\/span> },\n                    <span class=\"hljs-attr\">address<\/span>: <span class=\"hljs-string\">\"123 Broadway, New York, NY 10001\"<\/span>,\n                    <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"headquarters\"<\/span>,\n                    <span class=\"hljs-attr\">phone<\/span>: <span class=\"hljs-string\">\"(555) 123-4567\"<\/span>\n                },\n                {\n                    <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Chicago Retail Store\"<\/span>,\n                    <span class=\"hljs-attr\">position<\/span>: { <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">41.8781<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-87.6298<\/span> },\n                    <span class=\"hljs-attr\">address<\/span>: <span class=\"hljs-string\">\"456 Michigan Ave, Chicago, IL 60601\"<\/span>,\n                    <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"retail\"<\/span>,\n                    <span class=\"hljs-attr\">phone<\/span>: <span class=\"hljs-string\">\"(555) 234-5678\"<\/span>\n                },\n                {\n                    <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Los Angeles Warehouse\"<\/span>,\n                    <span class=\"hljs-attr\">position<\/span>: { <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">34.0522<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-118.2437<\/span> },\n                    <span class=\"hljs-attr\">address<\/span>: <span class=\"hljs-string\">\"789 Sunset Blvd, Los Angeles, CA 90046\"<\/span>,\n                    <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"warehouse\"<\/span>,\n                    <span class=\"hljs-attr\">phone<\/span>: <span class=\"hljs-string\">\"(555) 345-6789\"<\/span>\n                },\n                {\n                    <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Miami Showroom\"<\/span>,\n                    <span class=\"hljs-attr\">position<\/span>: { <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">25.7617<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-80.1918<\/span> },\n                    <span class=\"hljs-attr\">address<\/span>: <span class=\"hljs-string\">\"321 Ocean Drive, Miami, FL 33139\"<\/span>,\n                    <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"showroom\"<\/span>,\n                    <span class=\"hljs-attr\">phone<\/span>: <span class=\"hljs-string\">\"(555) 456-7890\"<\/span>\n                }\n            ];\n\n            <span class=\"hljs-comment\">\/\/ Plot sample locations<\/span>\n            sampleLocations.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">location<\/span> =&gt;<\/span> {\n                addLocationPin(location);\n            });\n\n            <span class=\"hljs-comment\">\/\/ Update pins list<\/span>\n            updatePinsList();\n        }\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">addLocationPin<\/span>(<span class=\"hljs-params\">locationData<\/span>) <\/span>{\n            <span class=\"hljs-comment\">\/\/ Create custom marker icon based on location type<\/span>\n            <span class=\"hljs-keyword\">const<\/span> iconUrl = getCustomIcon(locationData.type);\n            \n            <span class=\"hljs-keyword\">const<\/span> marker = <span class=\"hljs-keyword\">new<\/span> google.maps.Marker({\n                <span class=\"hljs-attr\">position<\/span>: locationData.position,\n                <span class=\"hljs-attr\">map<\/span>: map,\n                <span class=\"hljs-attr\">title<\/span>: locationData.name,\n                <span class=\"hljs-attr\">icon<\/span>: {\n                    <span class=\"hljs-attr\">url<\/span>: iconUrl,\n                    <span class=\"hljs-attr\">scaledSize<\/span>: <span class=\"hljs-keyword\">new<\/span> google.maps.Size(<span class=\"hljs-number\">30<\/span>, <span class=\"hljs-number\">40<\/span>),\n                    <span class=\"hljs-attr\">anchor<\/span>: <span class=\"hljs-keyword\">new<\/span> google.maps.Point(<span class=\"hljs-number\">15<\/span>, <span class=\"hljs-number\">40<\/span>)\n                },\n                <span class=\"hljs-attr\">animation<\/span>: google.maps.Animation.DROP\n            });\n\n            <span class=\"hljs-comment\">\/\/ Create detailed info window content<\/span>\n            <span class=\"hljs-keyword\">const<\/span> infoContent = <span class=\"hljs-string\">`\n                &lt;div style=\"padding: 15px; min-width: 250px;\"&gt;\n                    &lt;h3 style=\"margin: 0 0 10px 0; color: #1a73e8;\"&gt;<span class=\"hljs-subst\">${locationData.name}<\/span>&lt;\/h3&gt;\n                    &lt;div style=\"margin: 8px 0;\"&gt;\n                        &lt;strong&gt;Address:&lt;\/strong&gt;&lt;br&gt;\n                        &lt;span style=\"color: #5f6368;\"&gt;<span class=\"hljs-subst\">${locationData.address}<\/span>&lt;\/span&gt;\n                    &lt;\/div&gt;\n                    &lt;div style=\"margin: 8px 0;\"&gt;\n                        &lt;strong&gt;Phone:&lt;\/strong&gt;&lt;br&gt;\n                        &lt;span style=\"color: #5f6368;\"&gt;<span class=\"hljs-subst\">${locationData.phone}<\/span>&lt;\/span&gt;\n                    &lt;\/div&gt;\n                    &lt;div style=\"margin: 8px 0;\"&gt;\n                        &lt;strong&gt;Type:&lt;\/strong&gt;\n                        &lt;span style=\"color: #5f6368; text-transform: capitalize;\"&gt;<span class=\"hljs-subst\">${locationData.type}<\/span>&lt;\/span&gt;\n                    &lt;\/div&gt;\n                    &lt;button onclick=\"getDirections(<span class=\"hljs-subst\">${locationData.position.lat}<\/span>, <span class=\"hljs-subst\">${locationData.position.lng}<\/span>)\" \n                            style=\"margin-top: 12px; padding: 8px 16px; background: #34a853; color: white; border: none; border-radius: 4px; cursor: pointer; width: 100%;\"&gt;\n                        \ud83d\udccd Get Directions\n                    &lt;\/button&gt;\n                &lt;\/div&gt;\n            `<\/span>;\n\n            <span class=\"hljs-comment\">\/\/ Add click listener to marker<\/span>\n            marker.addListener(<span class=\"hljs-string\">'click'<\/span>, () =&gt; {\n                infoWindow.setContent(infoContent);\n                infoWindow.open(map, marker);\n                \n                <span class=\"hljs-comment\">\/\/ Add bounce animation<\/span>\n                marker.setAnimation(google.maps.Animation.BOUNCE);\n                setTimeout(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n                    marker.setAnimation(<span class=\"hljs-literal\">null<\/span>);\n                }, <span class=\"hljs-number\">1400<\/span>);\n            });\n\n            markers.push(marker);\n            locations.push(locationData);\n            \n            adjustMapBounds();\n        }\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">getCustomIcon<\/span>(<span class=\"hljs-params\">type<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> colorMap = {\n                <span class=\"hljs-string\">'headquarters'<\/span>: <span class=\"hljs-string\">'ff0000'<\/span>,    <span class=\"hljs-comment\">\/\/ Red<\/span>\n                <span class=\"hljs-string\">'retail'<\/span>: <span class=\"hljs-string\">'4285f4'<\/span>,          <span class=\"hljs-comment\">\/\/ Blue<\/span>\n                <span class=\"hljs-string\">'warehouse'<\/span>: <span class=\"hljs-string\">'fbbc05'<\/span>,       <span class=\"hljs-comment\">\/\/ Yellow<\/span>\n                <span class=\"hljs-string\">'showroom'<\/span>: <span class=\"hljs-string\">'34a853'<\/span>,        <span class=\"hljs-comment\">\/\/ Green<\/span>\n                <span class=\"hljs-string\">'default'<\/span>: <span class=\"hljs-string\">'ea4335'<\/span>          <span class=\"hljs-comment\">\/\/ Orange<\/span>\n            };\n            \n            <span class=\"hljs-keyword\">const<\/span> color = colorMap&#91;type] || colorMap&#91;<span class=\"hljs-string\">'default'<\/span>];\n            <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-string\">`https:\/\/maps.google.com\/mapfiles\/ms\/micons\/red.png`<\/span>;\n        }\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">searchAndAddLocation<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> searchInput = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'location-search'<\/span>);\n            <span class=\"hljs-keyword\">const<\/span> place = autocomplete.getPlace();\n\n            <span class=\"hljs-keyword\">if<\/span> (!place.geometry) {\n                alert(<span class=\"hljs-string\">'Please select a valid location from the suggestions'<\/span>);\n                <span class=\"hljs-keyword\">return<\/span>;\n            }\n\n            <span class=\"hljs-keyword\">const<\/span> newLocation = {\n                <span class=\"hljs-attr\">name<\/span>: place.name || <span class=\"hljs-string\">`Location <span class=\"hljs-subst\">${locations.length + <span class=\"hljs-number\">1<\/span>}<\/span>`<\/span>,\n                <span class=\"hljs-attr\">position<\/span>: place.geometry.location,\n                <span class=\"hljs-attr\">address<\/span>: place.formatted_address,\n                <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">'retail'<\/span>,\n                <span class=\"hljs-attr\">phone<\/span>: <span class=\"hljs-string\">'(555) 000-0000'<\/span>\n            };\n\n            addLocationPin(newLocation);\n            updatePinsList();\n            searchInput.value = <span class=\"hljs-string\">''<\/span>;\n        }\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">clearAllPins<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">if<\/span> (!confirm(<span class=\"hljs-string\">'Are you sure you want to remove all location pins?'<\/span>)) {\n                <span class=\"hljs-keyword\">return<\/span>;\n            }\n\n            markers.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">marker<\/span> =&gt;<\/span> marker.setMap(<span class=\"hljs-literal\">null<\/span>));\n            markers = &#91;];\n            locations = &#91;];\n            updatePinsList();\n        }\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">updatePinsList<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> container = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'pins-container'<\/span>);\n            <span class=\"hljs-keyword\">const<\/span> countElement = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'pin-count'<\/span>);\n            \n            countElement.textContent = locations.length;\n            container.innerHTML = <span class=\"hljs-string\">''<\/span>;\n\n            locations.forEach(<span class=\"hljs-function\">(<span class=\"hljs-params\">location, index<\/span>) =&gt;<\/span> {\n                <span class=\"hljs-keyword\">const<\/span> pinElement = <span class=\"hljs-built_in\">document<\/span>.createElement(<span class=\"hljs-string\">'div'<\/span>);\n                pinElement.className = <span class=\"hljs-string\">'location-pin'<\/span>;\n                pinElement.innerHTML = <span class=\"hljs-string\">`\n                    &lt;div style=\"display: flex; align-items: center; margin-bottom: 8px;\"&gt;\n                        &lt;div class=\"pin-icon\"&gt;&lt;\/div&gt;\n                        &lt;h4 style=\"margin: 0;\"&gt;<span class=\"hljs-subst\">${location.name}<\/span>&lt;\/h4&gt;\n                    &lt;\/div&gt;\n                    &lt;p style=\"margin: 5px 0; color: #666;\"&gt;<span class=\"hljs-subst\">${location.address}<\/span>&lt;\/p&gt;\n                    &lt;p style=\"margin: 5px 0; color: #666;\"&gt;Phone: <span class=\"hljs-subst\">${location.phone}<\/span>&lt;\/p&gt;\n                    &lt;div style=\"margin-top: 10px;\"&gt;\n                        &lt;button onclick=\"focusOnLocation(<span class=\"hljs-subst\">${location.position.lat}<\/span>, <span class=\"hljs-subst\">${location.position.lng}<\/span>)\" \n                                style=\"padding: 6px 12px; background: #4285f4; color: white; border: none; border-radius: 3px; cursor: pointer; margin-right: 5px;\"&gt;\n                            View on Map\n                        &lt;\/button&gt;\n                        &lt;button onclick=\"removePin(<span class=\"hljs-subst\">${index}<\/span>)\" \n                                style=\"padding: 6px 12px; background: #ea4335; color: white; border: none; border-radius: 3px; cursor: pointer;\"&gt;\n                            Remove Pin\n                        &lt;\/button&gt;\n                    &lt;\/div&gt;\n                `<\/span>;\n                container.appendChild(pinElement);\n            });\n        }\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">focusOnLocation<\/span>(<span class=\"hljs-params\">lat, lng<\/span>) <\/span>{\n            map.setCenter({ lat, lng });\n            map.setZoom(<span class=\"hljs-number\">15<\/span>);\n        }\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">removePin<\/span>(<span class=\"hljs-params\">index<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">if<\/span> (index &gt;= <span class=\"hljs-number\">0<\/span> &amp;&amp; index &lt; markers.length) {\n                markers&#91;index].setMap(<span class=\"hljs-literal\">null<\/span>);\n                markers.splice(index, <span class=\"hljs-number\">1<\/span>);\n                locations.splice(index, <span class=\"hljs-number\">1<\/span>);\n                updatePinsList();\n                adjustMapBounds();\n            }\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\">const<\/span> url = <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(url, <span class=\"hljs-string\">'_blank'<\/span>);\n        }\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">adjustMapBounds<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">if<\/span> (markers.length === <span class=\"hljs-number\">0<\/span>) <span class=\"hljs-keyword\">return<\/span>;\n\n            <span class=\"hljs-keyword\">const<\/span> bounds = <span class=\"hljs-keyword\">new<\/span> google.maps.LatLngBounds();\n            markers.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">marker<\/span> =&gt;<\/span> {\n                bounds.extend(marker.getPosition());\n            });\n            map.fitBounds(bounds);\n            \n            <span class=\"hljs-comment\">\/\/ Prevent over-zooming for single markers<\/span>\n            <span class=\"hljs-keyword\">if<\/span> (markers.length === <span class=\"hljs-number\">1<\/span>) {\n                map.setZoom(<span class=\"hljs-number\">15<\/span>);\n            }\n        }\n\n        <span class=\"hljs-comment\">\/\/ Handle API authentication errors<\/span>\n        <span class=\"hljs-built_in\">window<\/span>.gm_authFailure = <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            alert(<span class=\"hljs-string\">'Error: Google Maps API failed to load. Please check your API key configuration and billing setup.'<\/span>);\n        };\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Replace `YOUR_API_KEY_HERE` with your actual Google Maps API key.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"576\" height=\"1024\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-147-576x1024.png\" alt=\"\" class=\"wp-image-688\" style=\"width:465px;height:auto\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-147-576x1024.png 576w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-147-169x300.png 169w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-147.png 720w\" sizes=\"auto, (max-width: 576px) 100vw, 576px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Step 3: Implementation and Deployment<\/p>\n\n\n\n<p>When implementing this solution, you&#8217;ll need to address:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&#8211; API quota management and usage monitoring<\/li>\n\n\n\n<li>&#8211; Cross-browser compatibility testing<\/li>\n\n\n\n<li>&#8211; Mobile responsiveness optimization<\/li>\n\n\n\n<li>&#8211; SSL certificate requirements for modern browsers<\/li>\n\n\n\n<li>&#8211; Error handling for geocoding failures<\/li>\n\n\n\n<li>&#8211; Performance optimization for large numbers of pins<\/li>\n\n\n\n<li><\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>\u00a0The Challenges of Manual Implementation<\/strong><\/p>\n\n\n\n<p>While this coded approach provides complete control, it comes with significant challenges:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&#8211; Development Time: 20-30 hours for robust implementation<\/li>\n\n\n\n<li>&#8211; API Management: Constant monitoring of usage quotas and costs<\/li>\n\n\n\n<li>&#8211; Browser Compatibility: Extensive testing across different platforms<\/li>\n\n\n\n<li>&#8211; Mobile Optimization: Complex touch event handling and responsive design<\/li>\n\n\n\n<li>&#8211; Security Risks: Potential API key exposure and unauthorized usage<\/li>\n\n\n\n<li>&#8211; Maintenance Overhead: Regular updates for API changes and browser updates<\/li>\n\n\n\n<li>&#8211; Performance Issues: Marker clustering and optimization for 50+ locations<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>\u00a0Pin Locations Instantly with <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a>\u00a0<\/strong><\/p>\n\n\n\n<p>Why spend weeks developing and maintaining complex mapping solutions when you can achieve professional results 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>&nbsp; eliminates all the technical complexity while delivering superior mapping functionality:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ud83d\udccc One-Click Pin Creation &#8211; Add locations visually or import from spreadsheet&nbsp;&nbsp;<\/li>\n\n\n\n<li>\ud83c\udfaf Smart Address Recognition &#8211; Automatic geocoding with high accuracy&nbsp;&nbsp;<\/li>\n\n\n\n<li>\ud83d\ude80 Instant Deployment &#8211; No coding, API keys, or technical setup required&nbsp;&nbsp;<\/li>\n\n\n\n<li>\ud83d\udcf1 Automatically Responsive &#8211; Perfect on all devices and browsers&nbsp;&nbsp;<\/li>\n\n\n\n<li>\ud83c\udfa8 Professional Templates &#8211; Beautiful designs optimized for conversion&nbsp;&nbsp;<\/li>\n\n\n\n<li>\ud83d\udee1\ufe0f Secure &amp; Reliable &#8211; Enterprise-grade infrastructure with no usage limits&nbsp;&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>Stop wrestling with complex APIs and fragile code. Create beautiful, interactive multi-pin maps in minutes at <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a> &#8211; the modern solution for business mapping needs.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"How to Pin Multiple Locations on Google Maps: Complete Technical Guide Need to display multiple business locations, event venues, or service areas on your website? While Google Maps provides the tools to create custom maps with multiple pins, the process involves significant technical complexity. Here&#8217;s your comprehensive guide to implementing this functionality. Method 1: Manual [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71,1],"tags":[],"class_list":["post-686","post","type-post","status-publish","format-standard","hentry","category-pin-multiple-locations-on-google-maps","category-1"],"_links":{"self":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/686","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=686"}],"version-history":[{"count":1,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/686\/revisions"}],"predecessor-version":[{"id":689,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/686\/revisions\/689"}],"wp:attachment":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=686"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=686"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=686"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}