{"id":836,"date":"2025-12-22T11:20:29","date_gmt":"2025-12-22T08:20:29","guid":{"rendered":"https:\/\/mapsfun.com\/?p=836"},"modified":"2025-12-22T11:20:30","modified_gmt":"2025-12-22T08:20:30","slug":"map-where-i-can-pin-multiple-locations-2025-guide","status":"publish","type":"post","link":"https:\/\/mapsfun.com\/?p=836","title":{"rendered":"Map Where I Can Pin Multiple Locations (2025 Guide)"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">How to Create a Map Where You Can Pin Multiple Locations: A Complete Technical Guide<\/h2>\n\n\n\n<p>Looking to build an interactive map where you can drop multiple location pins for your business, travel plans, or project visualization? While the concept seems simple, creating a fully functional multi-pin map requires technical expertise. This guide will walk you through the professional development approach.<\/p>\n\n\n\n<p> This method requires knowledge of web development, API management, and basic programming.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>Method: Custom JavaScript Implementation with Google Maps API<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-center\"> Step 1: Google Cloud Platform Setup<\/p>\n\n\n\n<p>First, you need to configure the Google Maps Platform with proper authentication.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1. Create a 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 a new project or select an existing one<\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Enable billing (the $200 monthly credit covers most basic usage)<\/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><strong>\u00a0\u00a0\u00a0&#8211; Maps JavaScript API<\/strong> (core mapping functionality)<\/li>\n\n\n\n<li><strong>\u00a0\u00a0\u00a0&#8211; Geocoding API<\/strong> (address to coordinates conversion)<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"459\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-210-1024x459.png\" alt=\"\" class=\"wp-image-837\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-210-1024x459.png 1024w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-210-300x135.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-210-768x344.png 768w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-210.png 1182w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>3. Generate and Secure API Key<\/strong><\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Go to &#8220;Credentials&#8221;<\/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 key to your domain and the Maps JavaScript API<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"> Step 2: Building the Interactive Pinning Interface<\/p>\n\n\n\n<p>Create an HTML file with the following complete implementation:<\/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>Advanced Multi-Location Pinning Map<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\">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;libraries=geometry&amp;callback=initMap\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\">\n        <span class=\"hljs-selector-id\">#map-container<\/span> {\n            <span class=\"hljs-attribute\">position<\/span>: relative;\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n            <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">70vh<\/span>;\n            <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">2px<\/span> solid <span class=\"hljs-number\">#e0e0e0<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">8px<\/span>;\n            <span class=\"hljs-attribute\">overflow<\/span>: hidden;\n        }\n        <span class=\"hljs-selector-id\">#map<\/span> {\n            <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100%<\/span>;\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n        }\n        <span class=\"hljs-selector-id\">#controls<\/span> {\n            <span class=\"hljs-attribute\">position<\/span>: absolute;\n            <span class=\"hljs-attribute\">top<\/span>: <span class=\"hljs-number\">10px<\/span>;\n            <span class=\"hljs-attribute\">left<\/span>: <span class=\"hljs-number\">10px<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: white;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">15px<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">5px<\/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\">6px<\/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.3<\/span>);\n            <span class=\"hljs-attribute\">z-index<\/span>: <span class=\"hljs-number\">1000<\/span>;\n        }\n        <span class=\"hljs-selector-id\">#location-list<\/span> {\n            <span class=\"hljs-attribute\">margin-top<\/span>: <span class=\"hljs-number\">20px<\/span>;\n            <span class=\"hljs-attribute\">max-height<\/span>: <span class=\"hljs-number\">200px<\/span>;\n            <span class=\"hljs-attribute\">overflow-y<\/span>: auto;\n        }\n        <span class=\"hljs-selector-class\">.location-item<\/span> {\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">8px<\/span>;\n            <span class=\"hljs-attribute\">border-bottom<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#eee<\/span>;\n            <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n        }\n        <span class=\"hljs-selector-class\">.location-item<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#f5f5f5<\/span>;\n        }\n        <span class=\"hljs-selector-class\">.btn<\/span> {\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">8px<\/span> <span class=\"hljs-number\">16px<\/span>;\n            <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">5px<\/span>;\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        }\n        <span class=\"hljs-selector-class\">.btn-primary<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#4285f4<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: white;\n        }\n        <span class=\"hljs-selector-class\">.btn-danger<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#ea4335<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: white;\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\">h1<\/span>&gt;<\/span>Multi-Location Pinning Map<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Click anywhere on the map to add pins. Manage your locations using the controls.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"map-container\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"controls\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"btn btn-primary\"<\/span> <span class=\"hljs-attr\">onclick<\/span>=<span class=\"hljs-string\">\"clearAllPins()\"<\/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\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"btn btn-primary\"<\/span> <span class=\"hljs-attr\">onclick<\/span>=<span class=\"hljs-string\">\"exportLocations()\"<\/span>&gt;<\/span>Export Locations<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\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"search-box\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Search location...\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"margin: 10px 0; padding: 5px; width: 200px;\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"btn btn-primary\"<\/span> <span class=\"hljs-attr\">onclick<\/span>=<span class=\"hljs-string\">\"searchLocation()\"<\/span>&gt;<\/span>Search<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>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"map\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"location-list\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span>&gt;<\/span>Pinned Locations:<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\">\"locations-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\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> infoWindow;\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">initMap<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-comment\">\/\/ Initialize the map<\/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> },\n                <span class=\"hljs-attr\">zoom<\/span>: <span class=\"hljs-number\">4<\/span>,\n                <span class=\"hljs-attr\">mapTypeControl<\/span>: <span class=\"hljs-literal\">true<\/span>,\n                <span class=\"hljs-attr\">streetViewControl<\/span>: <span class=\"hljs-literal\">true<\/span>\n            });\n\n            infoWindow = <span class=\"hljs-keyword\">new<\/span> google.maps.InfoWindow();\n\n            <span class=\"hljs-comment\">\/\/ Add click listener for pinning locations<\/span>\n            map.addListener(<span class=\"hljs-string\">'click'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">event<\/span>) <\/span>{\n                addMarker(event.latLng);\n            });\n\n            <span class=\"hljs-comment\">\/\/ Initialize search box<\/span>\n            initSearchBox();\n        }\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">initSearchBox<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> input = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'search-box'<\/span>);\n            <span class=\"hljs-keyword\">const<\/span> searchBox = <span class=\"hljs-keyword\">new<\/span> google.maps.places.SearchBox(input);\n\n            map.controls&#91;google.maps.ControlPosition.TOP_LEFT].push(input);\n\n            searchBox.addListener(<span class=\"hljs-string\">'places_changed'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n                <span class=\"hljs-keyword\">const<\/span> places = searchBox.getPlaces();\n                <span class=\"hljs-keyword\">if<\/span> (places.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                places.forEach(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">place<\/span>) <\/span>{\n                    <span class=\"hljs-keyword\">if<\/span> (!place.geometry) <span class=\"hljs-keyword\">return<\/span>;\n                    \n                    addMarker(place.geometry.location, place.name);\n                    \n                    <span class=\"hljs-keyword\">if<\/span> (place.geometry.viewport) {\n                        bounds.union(place.geometry.viewport);\n                    } <span class=\"hljs-keyword\">else<\/span> {\n                        bounds.extend(place.geometry.location);\n                    }\n                });\n                map.fitBounds(bounds);\n            });\n        }\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">addMarker<\/span>(<span class=\"hljs-params\">location, title = <span class=\"hljs-string\">'Custom Location'<\/span><\/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>: location,\n                <span class=\"hljs-attr\">map<\/span>: map,\n                <span class=\"hljs-attr\">title<\/span>: title,\n                <span class=\"hljs-attr\">draggable<\/span>: <span class=\"hljs-literal\">true<\/span>,\n                <span class=\"hljs-attr\">animation<\/span>: google.maps.Animation.DROP\n            });\n\n            <span class=\"hljs-comment\">\/\/ Create info window content<\/span>\n            <span class=\"hljs-keyword\">const<\/span> contentString = <span class=\"hljs-string\">`\n                &lt;div style=\"padding: 10px;\"&gt;\n                    &lt;h3 style=\"margin: 0 0 10px 0;\"&gt;<span class=\"hljs-subst\">${title}<\/span>&lt;\/h3&gt;\n                    &lt;p&gt;Lat: <span class=\"hljs-subst\">${location.lat().toFixed(<span class=\"hljs-number\">6<\/span>)}<\/span>&lt;\/p&gt;\n                    &lt;p&gt;Lng: <span class=\"hljs-subst\">${location.lng().toFixed(<span class=\"hljs-number\">6<\/span>)}<\/span>&lt;\/p&gt;\n                    &lt;button onclick=\"removeMarker(<span class=\"hljs-subst\">${markers.length}<\/span>)\" style=\"padding: 5px 10px; margin-top: 5px; background: #ea4335; color: white; border: none; border-radius: 3px; cursor: pointer;\"&gt;Remove&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>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n                infoWindow.setContent(contentString);\n                infoWindow.open(map, marker);\n            });\n\n            <span class=\"hljs-comment\">\/\/ Add dragend listener<\/span>\n            marker.addListener(<span class=\"hljs-string\">'dragend'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n                updateLocationList();\n            });\n\n            markers.push({\n                <span class=\"hljs-attr\">marker<\/span>: marker,\n                <span class=\"hljs-attr\">title<\/span>: title,\n                <span class=\"hljs-attr\">position<\/span>: marker.getPosition()\n            });\n\n            updateLocationList();\n        }\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">removeMarker<\/span>(<span class=\"hljs-params\">index<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">if<\/span> (markers&#91;index]) {\n                markers&#91;index].marker.setMap(<span class=\"hljs-literal\">null<\/span>);\n                markers.splice(index, <span class=\"hljs-number\">1<\/span>);\n                updateLocationList();\n                infoWindow.close();\n            }\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 pins?'<\/span>)) {\n                markers.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">markerObj<\/span> =&gt;<\/span> {\n                    markerObj.marker.setMap(<span class=\"hljs-literal\">null<\/span>);\n                });\n                markers = &#91;];\n                updateLocationList();\n                infoWindow.close();\n            }\n        }\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">updateLocationList<\/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\">'locations-container'<\/span>);\n            container.innerHTML = <span class=\"hljs-string\">''<\/span>;\n\n            markers.forEach(<span class=\"hljs-function\">(<span class=\"hljs-params\">markerObj, index<\/span>) =&gt;<\/span> {\n                <span class=\"hljs-keyword\">const<\/span> position = markerObj.marker.getPosition();\n                <span class=\"hljs-keyword\">const<\/span> item = <span class=\"hljs-built_in\">document<\/span>.createElement(<span class=\"hljs-string\">'div'<\/span>);\n                item.className = <span class=\"hljs-string\">'location-item'<\/span>;\n                item.innerHTML = <span class=\"hljs-string\">`\n                    &lt;strong&gt;<span class=\"hljs-subst\">${markerObj.title}<\/span>&lt;\/strong&gt;&lt;br&gt;\n                    Lat: <span class=\"hljs-subst\">${position.lat().toFixed(<span class=\"hljs-number\">6<\/span>)}<\/span>, Lng: <span class=\"hljs-subst\">${position.lng().toFixed(<span class=\"hljs-number\">6<\/span>)}<\/span>\n                    &lt;button onclick=\"removeMarker(<span class=\"hljs-subst\">${index}<\/span>)\" style=\"float: right; background: #ea4335; color: white; border: none; padding: 2px 8px; border-radius: 3px; cursor: pointer;\"&gt;\u00d7&lt;\/button&gt;\n                `<\/span>;\n                container.appendChild(item);\n            });\n        }\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">exportLocations<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> data = markers.map(<span class=\"hljs-function\"><span class=\"hljs-params\">markerObj<\/span> =&gt;<\/span> {\n                <span class=\"hljs-keyword\">const<\/span> pos = markerObj.marker.getPosition();\n                <span class=\"hljs-keyword\">return<\/span> {\n                    <span class=\"hljs-attr\">title<\/span>: markerObj.title,\n                    <span class=\"hljs-attr\">lat<\/span>: pos.lat(),\n                    <span class=\"hljs-attr\">lng<\/span>: pos.lng()\n                };\n            });\n            \n            <span class=\"hljs-keyword\">const<\/span> dataStr = <span class=\"hljs-string\">\"data:text\/json;charset=utf-8,\"<\/span> + <span class=\"hljs-built_in\">encodeURIComponent<\/span>(<span class=\"hljs-built_in\">JSON<\/span>.stringify(data, <span class=\"hljs-literal\">null<\/span>, <span class=\"hljs-number\">2<\/span>));\n            <span class=\"hljs-keyword\">const<\/span> downloadAnchor = <span class=\"hljs-built_in\">document<\/span>.createElement(<span class=\"hljs-string\">'a'<\/span>);\n            downloadAnchor.setAttribute(<span class=\"hljs-string\">\"href\"<\/span>, dataStr);\n            downloadAnchor.setAttribute(<span class=\"hljs-string\">\"download\"<\/span>, <span class=\"hljs-string\">\"pinned_locations.json\"<\/span>);\n            <span class=\"hljs-built_in\">document<\/span>.body.appendChild(downloadAnchor);\n            downloadAnchor.click();\n            downloadAnchor.remove();\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 class=\"has-text-align-center\"><strong>Implementation Notes:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&#8211; Replace `<strong>YOUR_API_KEY_HERE<\/strong>` with your actual Google Maps API key<\/li>\n\n\n\n<li>&#8211; The code includes search functionality using Google Places API<\/li>\n\n\n\n<li>&#8211; Locations can be exported as JSON for data persistence<\/li>\n\n\n\n<li>&#8211; Fully responsive design works on desktop and mobile<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"> Step 3: Advanced Features and Customization<\/p>\n\n\n\n<p>To enhance your map further, consider implementing:<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>Data Persistence:<\/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\"><span class=\"hljs-comment\">\/\/ Save to localStorage<\/span>\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">saveToLocalStorage<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n    <span class=\"hljs-keyword\">const<\/span> data = markers.map(<span class=\"hljs-function\"><span class=\"hljs-params\">markerObj<\/span> =&gt;<\/span> {\n        <span class=\"hljs-keyword\">const<\/span> pos = markerObj.marker.getPosition();\n        <span class=\"hljs-keyword\">return<\/span> {\n            <span class=\"hljs-attr\">title<\/span>: markerObj.title,\n            <span class=\"hljs-attr\">lat<\/span>: pos.lat(),\n            <span class=\"hljs-attr\">lng<\/span>: pos.lng()\n        };\n    });\n    localStorage.setItem(<span class=\"hljs-string\">'pinnedLocations'<\/span>, <span class=\"hljs-built_in\">JSON<\/span>.stringify(data));\n}\n\n<span class=\"hljs-comment\">\/\/ Load from localStorage<\/span>\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">loadFromLocalStorage<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n    <span class=\"hljs-keyword\">const<\/span> saved = localStorage.getItem(<span class=\"hljs-string\">'pinnedLocations'<\/span>);\n    <span class=\"hljs-keyword\">if<\/span> (saved) {\n        <span class=\"hljs-built_in\">JSON<\/span>.parse(saved).forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">location<\/span> =&gt;<\/span> {\n            addMarker(<span class=\"hljs-keyword\">new<\/span> google.maps.LatLng(location.lat, location.lng), location.title);\n        });\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>Custom Marker Icons:<\/p>\n\n\n\n<p><strong>javascript<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">const<\/span> customIcon = {\n    <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">'path\/to\/custom-pin.png'<\/span>,\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\">origin<\/span>: <span class=\"hljs-keyword\">new<\/span> google.maps.Point(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/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\n<span class=\"hljs-comment\">\/\/ Use in addMarker function:<\/span>\n<span class=\"hljs-comment\">\/\/ icon: customIcon<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><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\"><strong>The Development Reality: Why This Approach is Challenging<\/strong><\/p>\n\n\n\n<p>While the code above provides a functional multi-pin map, it comes with significant challenges:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>&#8211; API Management Complexity:<\/strong> Ongoing maintenance of Google Cloud projects, quota monitoring, and billing management<\/li>\n\n\n\n<li><strong>&#8211; Cross-Browser Compatibility:<\/strong> Ensuring consistent performance across all browsers and devices<\/li>\n\n\n\n<li><strong>&#8211; Performance Optimization:<\/strong> Handling large numbers of markers efficiently<\/li>\n\n\n\n<li><strong>&#8211; Mobile Experience:<\/strong> Creating touch-friendly interfaces for mobile users<\/li>\n\n\n\n<li><strong>&#8211; Data Security: <\/strong>Protecting API keys and user data<\/li>\n\n\n\n<li><strong>&#8211; Feature Expansion:<\/strong> Adding clustering, heat maps, or custom overlays requires extensive additional coding<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>The Professional Alternative: <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a><\/strong><\/p>\n\n\n\n<p>What if you could create advanced, fully-featured multi-pin maps without writing a single line of code or managing API infrastructure?<\/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> provides an enterprise-grade mapping solution that eliminates these technical hurdles:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>&#8211; Zero-Code Visual Builder:<\/strong> Create complex, interactive maps through an intuitive drag-and-drop interface<\/li>\n\n\n\n<li><strong>&#8211; Built-in Data Management: <\/strong>Import, export, and manage location data with spreadsheet-like simplicity<\/li>\n\n\n\n<li><strong>&#8211; Automatic Optimization: <\/strong>Professional-grade performance and mobile responsiveness out of the box<\/li>\n\n\n\n<li><strong>&#8211; Advanced Features: <\/strong>Built-in clustering, heat maps, custom styling, and collaboration tools<\/li>\n\n\n\n<li><strong>&#8211; No API Management:<\/strong> We handle all the technical infrastructure so you can focus on your content<\/li>\n<\/ul>\n\n\n\n<p>Stop spending days coding and debugging mapping functionality. **Create professional multi-location maps in minutes with <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"How to Create a Map Where You Can Pin Multiple Locations: A Complete Technical Guide Looking to build an interactive map where you can drop multiple location pins for your business, travel plans, or project visualization? While the concept seems simple, creating a fully functional multi-pin map requires technical expertise. This guide will walk you [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[115,1],"tags":[],"class_list":["post-836","post","type-post","status-publish","format-standard","hentry","category-map-where-i-can-pin-multiple-locations","category-1"],"_links":{"self":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/836","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=836"}],"version-history":[{"count":1,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/836\/revisions"}],"predecessor-version":[{"id":838,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/836\/revisions\/838"}],"wp:attachment":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=836"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=836"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=836"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}