{"id":14988,"date":"2025-09-22T18:01:36","date_gmt":"2025-09-22T18:01:36","guid":{"rendered":"https:\/\/www.kadencewp.com\/help-center\/?post_type=docs&#038;p=14988"},"modified":"2026-04-22T16:28:34","modified_gmt":"2026-04-22T16:28:34","password":"","slug":"multiple-markers-google-maps-block","status":"publish","type":"docs","link":"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-blocks\/multiple-markers-google-maps-block\/","title":{"rendered":"How to add Multiple Markers in the Kadence Google Maps Block"},"content":{"rendered":"\n<p>The <strong>free Kadence Blocks<\/strong> plugin includes the <strong><a href=\"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-blocks\/google-maps-block\/\">Google Maps Block<\/a><\/strong>, which allows you to display a single location on a Google Map. However, you may want to expand on this by adding additional markers.<br><br>This is an advanced guide that walks you through the process. Some technical skills are required, including the ability to modify JavaScript code.<\/p>\n\n\n<style>.kb-image14988_492450-9f .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image14988_492450-9f size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"622\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Google-Maps-block-result-scaled.jpg\" alt=\"Google Maps block result\" class=\"kb-img wp-image-15006\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Google-Maps-block-result-scaled.jpg 2560w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Google-Maps-block-result-300x73.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Google-Maps-block-result-1024x249.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Google-Maps-block-result-768x186.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Google-Maps-block-result-1536x373.jpg 1536w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Google-Maps-block-result-2048x497.jpg 2048w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Google-Maps-block-result-360x87.jpg 360w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/figure>\n\n\n<style>.kb-table-of-content-nav.kb-table-of-content-id14988_1cdbd6-cd .kb-table-of-content-wrap{padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);}.kb-table-of-content-nav.kb-table-of-content-id14988_1cdbd6-cd .kb-table-of-contents-title-wrap{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.kb-table-of-content-nav.kb-table-of-content-id14988_1cdbd6-cd .kb-table-of-contents-title{font-weight:regular;font-style:normal;}.kb-table-of-content-nav.kb-table-of-content-id14988_1cdbd6-cd .kb-table-of-content-wrap .kb-table-of-content-list{font-weight:regular;font-style:normal;margin-top:var(--global-kb-spacing-sm, 1.5rem);margin-right:0px;margin-bottom:0px;margin-left:0px;}<\/style>\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading14988_d467db-de, .wp-block-kadence-advancedheading.kt-adv-heading14988_d467db-de[data-kb-block=\"kb-adv-heading14988_d467db-de\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading14988_d467db-de mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading14988_d467db-de[data-kb-block=\"kb-adv-heading14988_d467db-de\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading14988_d467db-de img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading14988_d467db-de[data-kb-block=\"kb-adv-heading14988_d467db-de\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 id=\"Obtaining-an-API-Key\" class=\"kt-adv-heading14988_d467db-de wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading14988_d467db-de\">Obtaining an API Key<\/h2>\n\n\n\n<p>Our block automatically includes an API key. However, to use the JavaScript API for this method, you must use a <strong>Custom API Key<\/strong>.<br><br>To get started, head over to the <a href=\"https:\/\/console.cloud.google.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Google Cloud Console<\/strong><\/a> and create a New Project.<\/p>\n\n\n<style>.kb-image14988_10ff6d-57 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image14988_10ff6d-57\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1648\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Create-aa-new-Project-scaled.jpg\" alt=\"Create a new Project\" class=\"kb-img wp-image-14996\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Create-aa-new-Project-scaled.jpg 2560w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Create-aa-new-Project-300x193.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Create-aa-new-Project-1024x659.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Create-aa-new-Project-768x494.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Create-aa-new-Project-1536x989.jpg 1536w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Create-aa-new-Project-2048x1318.jpg 2048w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Create-aa-new-Project-360x232.jpg 360w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/figure><\/div>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading14988_0e44de-b7, .wp-block-kadence-advancedheading.kt-adv-heading14988_0e44de-b7[data-kb-block=\"kb-adv-heading14988_0e44de-b7\"]{margin-bottom:var(--global-kb-spacing-xxs, 0.5rem);font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading14988_0e44de-b7 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading14988_0e44de-b7[data-kb-block=\"kb-adv-heading14988_0e44de-b7\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading14988_0e44de-b7 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading14988_0e44de-b7[data-kb-block=\"kb-adv-heading14988_0e44de-b7\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading14988_0e44de-b7 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading14988_0e44de-b7\">Afterward, head over to the <strong><a href=\"https:\/\/console.cloud.google.com\/apis\/library\" target=\"_blank\" rel=\"noreferrer noopener\">APIs &amp; Services \/ API Library<\/a><\/strong> page. This can be found from the <strong>API &amp; Services -&gt; Library<\/strong> page within the Google Cloud Console main navigation.<br><br>From here, you must enable the following API options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Maps JavaScript API<\/li>\n\n\n\n<li>Maps Embed API<\/li>\n<\/ul>\n\n\n<style>.kb-image14988_f6ffe0-58.kb-image-is-ratio-size, .kb-image14988_f6ffe0-58 .kb-image-is-ratio-size{max-width:800px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image14988_f6ffe0-58.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image14988_f6ffe0-58 .kb-image-is-ratio-size{align-self:unset;}.kb-image14988_f6ffe0-58 figure{max-width:800px;}.kb-image14988_f6ffe0-58 .image-is-svg, .kb-image14988_f6ffe0-58 .image-is-svg img{width:100%;}.kb-image14988_f6ffe0-58 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image14988_f6ffe0-58\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2056\" height=\"1099\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Enabling-APIs.gif\" alt=\"Enabling APIs\" class=\"kb-img wp-image-14998\" \/><\/figure><\/div>\n\n\n\n<p>Once the proper APIs are enabled, navigate to the <strong>Google Maps Platform -&gt; Keys &amp; Credentials<\/strong> page.<\/p>\n\n\n<style>.kb-image14988_b8bae3-f2.kb-image-is-ratio-size, .kb-image14988_b8bae3-f2 .kb-image-is-ratio-size{max-width:500px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image14988_b8bae3-f2.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image14988_b8bae3-f2 .kb-image-is-ratio-size{align-self:unset;}.kb-image14988_b8bae3-f2 figure{max-width:500px;}.kb-image14988_b8bae3-f2 .image-is-svg, .kb-image14988_b8bae3-f2 .image-is-svg img{width:100%;}.kb-image14988_b8bae3-f2 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image14988_b8bae3-f2\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1840\" height=\"2122\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/API-Key.jpg\" alt=\"API Key\" class=\"kb-img wp-image-14999\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/API-Key.jpg 1840w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/API-Key-260x300.jpg 260w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/API-Key-888x1024.jpg 888w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/API-Key-768x886.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/API-Key-1332x1536.jpg 1332w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/API-Key-1776x2048.jpg 1776w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/API-Key-360x415.jpg 360w\" sizes=\"auto, (max-width: 1840px) 100vw, 1840px\" \/><\/figure><\/div>\n\n\n\n<p>This will bring you to your <strong>Google Map API Keys<\/strong>. You can create one if you haven&#8217;t already. Then, you should save your API key for later use in this guide.<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading14988_c7263c-08, .wp-block-kadence-advancedheading.kt-adv-heading14988_c7263c-08[data-kb-block=\"kb-adv-heading14988_c7263c-08\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading14988_c7263c-08 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading14988_c7263c-08[data-kb-block=\"kb-adv-heading14988_c7263c-08\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading14988_c7263c-08 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading14988_c7263c-08[data-kb-block=\"kb-adv-heading14988_c7263c-08\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading14988_c7263c-08 wp-block-kadence-advancedheading has-theme-palette-8-background-color has-background\" data-kb-block=\"kb-adv-heading14988_c7263c-08\">You can also refer to <strong><a href=\"https:\/\/developers.google.com\/maps\/documentation\/embed\/get-api-key\" target=\"_blank\" rel=\"noreferrer noopener\">This Guide<\/a><\/strong> by Google on creating an API key.<\/p>\n\n\n\n<p>The next step is to obtain a Google Map ID, which you can learn about in the next section of this guide.<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading14988_9060ee-d5, .wp-block-kadence-advancedheading.kt-adv-heading14988_9060ee-d5[data-kb-block=\"kb-adv-heading14988_9060ee-d5\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading14988_9060ee-d5 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading14988_9060ee-d5[data-kb-block=\"kb-adv-heading14988_9060ee-d5\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading14988_9060ee-d5 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading14988_9060ee-d5[data-kb-block=\"kb-adv-heading14988_9060ee-d5\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 id=\"Creating-a-Google-Map-in-Google\" class=\"kt-adv-heading14988_9060ee-d5 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading14988_9060ee-d5\">Creating a Google Map in Google<\/h2>\n\n\n\n<p>From the <a href=\"https:\/\/console.cloud.google.com\/google\/maps-apis\/\" target=\"_blank\" rel=\"noreferrer noopener\">Google Cloud Console Maps API<\/a> page, locate <strong>Map<\/strong> <strong>Management<\/strong>. Then, click on <strong>Create<\/strong> <strong>map<\/strong>. This will allow you to create a new map instance, where you will be given a unique <span style=\"text-decoration: underline\">Map ID<\/span>. Create a new map and save the Map ID for the next step of this guide.<\/p>\n\n\n<style>.kb-image14988_8ed3bb-f9.kb-image-is-ratio-size, .kb-image14988_8ed3bb-f9 .kb-image-is-ratio-size{max-width:800px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image14988_8ed3bb-f9.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image14988_8ed3bb-f9 .kb-image-is-ratio-size{align-self:unset;}.kb-image14988_8ed3bb-f9 figure{max-width:800px;}.kb-image14988_8ed3bb-f9 .image-is-svg, .kb-image14988_8ed3bb-f9 .image-is-svg img{width:100%;}.kb-image14988_8ed3bb-f9 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image14988_8ed3bb-f9\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1263\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Map-Management-scaled.jpg\" alt=\"Map Management\" class=\"kb-img wp-image-14991\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Map-Management-scaled.jpg 2560w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Map-Management-300x148.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Map-Management-1024x505.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Map-Management-768x379.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Map-Management-1536x758.jpg 1536w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Map-Management-2048x1010.jpg 2048w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Map-Management-360x178.jpg 360w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/figure><\/div>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading14988_b82881-63, .wp-block-kadence-advancedheading.kt-adv-heading14988_b82881-63[data-kb-block=\"kb-adv-heading14988_b82881-63\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading14988_b82881-63 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading14988_b82881-63[data-kb-block=\"kb-adv-heading14988_b82881-63\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading14988_b82881-63 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading14988_b82881-63[data-kb-block=\"kb-adv-heading14988_b82881-63\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 id=\"Customizing-your-Google-Maps-Block\" class=\"kt-adv-heading14988_b82881-63 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading14988_b82881-63\">Customizing your Google Maps Block<\/h2>\n\n\n\n<p>Begin by adding a Google Maps Block to the page. You must <strong>set an initial location through the Google Maps block<\/strong>. You also do not need to fill out the API settings when using this method of implementation. <br><br>Your Block Settings should look similar to the image below.<\/p>\n\n\n<style>.kb-image14988_ff1d46-a7.kb-image-is-ratio-size, .kb-image14988_ff1d46-a7 .kb-image-is-ratio-size{max-width:800px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image14988_ff1d46-a7.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image14988_ff1d46-a7 .kb-image-is-ratio-size{align-self:unset;}.kb-image14988_ff1d46-a7 figure{max-width:800px;}.kb-image14988_ff1d46-a7 .image-is-svg, .kb-image14988_ff1d46-a7 .image-is-svg img{width:100%;}.kb-image14988_ff1d46-a7 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image14988_ff1d46-a7\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1982\" height=\"1356\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Google-Maps-Block-Settings.jpg\" alt=\"Google Maps Block Settings\" class=\"kb-img wp-image-15000\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Google-Maps-Block-Settings.jpg 1982w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Google-Maps-Block-Settings-300x205.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Google-Maps-Block-Settings-1024x701.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Google-Maps-Block-Settings-768x525.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Google-Maps-Block-Settings-1536x1051.jpg 1536w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Google-Maps-Block-Settings-360x246.jpg 360w\" sizes=\"auto, (max-width: 1982px) 100vw, 1982px\" \/><\/figure><\/div>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading14988_8f0ba6-2f, .wp-block-kadence-advancedheading.kt-adv-heading14988_8f0ba6-2f[data-kb-block=\"kb-adv-heading14988_8f0ba6-2f\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading14988_8f0ba6-2f mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading14988_8f0ba6-2f[data-kb-block=\"kb-adv-heading14988_8f0ba6-2f\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading14988_8f0ba6-2f img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading14988_8f0ba6-2f[data-kb-block=\"kb-adv-heading14988_8f0ba6-2f\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h3 id=\"Custom-Code-Snippet\" class=\"kt-adv-heading14988_8f0ba6-2f wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading14988_8f0ba6-2f\">Custom Code Snippet<\/h3>\n\n\n\n<p>To add multiple markers, we will use <strong>Custom JavaScript<\/strong>. Kadence provides a few ways to add JavaScript, but for this guide, we will use <strong>Page Scripts<\/strong>, so the JavaScript only runs on the specific page. You can learn about how to add Custom JavaScript to Kadence <a href=\"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-guides\/how-to-use-custom-css-and-scripts-using-kadence\/\">here<\/a>.<br><br>Earlier, you grabbed an <strong>API<\/strong> <strong>Key<\/strong> and a <strong>Google<\/strong> <strong>Map<\/strong> <strong>ID<\/strong>. This is where they become useful. Below is a Custom Code where you can implement both of these values.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Replace <code>YOUR_API_KEY<\/code> with your Google Maps API Key<\/li>\n\n\n\n<li>Replace <code>YOUR_MAP_ID<\/code> with your Google Map ID.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">&lt;script&gt;\nconst API_KEY = \"YOUR_API_KEY\";\nconst MAP_ID = \"YOUR_MAP_ID\";\n\nconst markerLocations = [\n  { lat: 37.8303, lng: -122.4851, title: \"Golden Gate National Recreation Area\" },\n  { lat: 37.7936, lng: -122.4070, title: \"Chinatown \/ Union Square\" }\n];\n\nfunction loadGoogleMapsScript() {\n  const script = document.createElement('script');\n  script.src = `https:\/\/maps.googleapis.com\/maps\/api\/js?key=${API_KEY}&amp;callback=initMap&amp;map_ids=${MAP_ID}&amp;libraries=marker`;\n  script.async = true;\n  document.head.appendChild(script);\n}\n\nwindow.initMap = async () =&gt; {\n  const { Map } = await google.maps.importLibrary(\"maps\");\n  const { AdvancedMarkerElement } = await google.maps.importLibrary(\"marker\");\n  \n  const mapEl = document.querySelector('.wp-block-kadence-googlemaps');\n\n  if (!mapEl) {\n    console.error(\"Kadence map element not found.\");\n    return;\n  }\n  \n  \/\/ Use a hardcoded position to avoid Geocoding errors\n  const kadencePosition = { lat: 37.8199, lng: -122.4783 };\n\n  const map = new Map(mapEl, {\n    center: kadencePosition,\n    zoom: 12,\n    mapId: MAP_ID\n  });\n\n  const bounds = new google.maps.LatLngBounds();\n  bounds.extend(kadencePosition);\n\n  \/\/ Add the main marker\n  new AdvancedMarkerElement({\n    map: map,\n    position: kadencePosition,\n    title: \"Golden Gate Bridge\" \/\/ A hardcoded title\n  });\n\n  \/\/ Add the extra markers\n  markerLocations.forEach(location =&gt; {\n    new AdvancedMarkerElement({\n      map: map,\n      position: { lat: location.lat, lng: location.lng },\n      title: location.title\n    });\n    bounds.extend({ lat: location.lat, lng: location.lng });\n  });\n\n  map.fitBounds(bounds);\n};\n\ndocument.addEventListener(\"DOMContentLoaded\", loadGoogleMapsScript);\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Within the Custom Code, notice the <code>markerLocations<\/code> array. This is where you can manually add custom, additional marker locations to the Google Map. This example provides two custom locations, which you can remove, modify, or add to. You must follow the same format already specified in the Custom Code.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">const markerLocations = [\n  { lat: 37.8303, lng: -122.4851, title: \"Golden Gate National Recreation Area\" },\n  { lat: 37.7936, lng: -122.4070, title: \"Chinatown \/ Union Square\" }\n];<\/code><\/pre>\n\n\n\n<p>Generally, you should keep the <code>markerLocations<\/code> small or lazy-load the script for pages with many markers to avoid performance issues.<br><br>Once you have coded in your locations, you can apply this code to the page where the Google Map runs.<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading14988_f14d80-f1, .wp-block-kadence-advancedheading.kt-adv-heading14988_f14d80-f1[data-kb-block=\"kb-adv-heading14988_f14d80-f1\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading14988_f14d80-f1 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading14988_f14d80-f1[data-kb-block=\"kb-adv-heading14988_f14d80-f1\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading14988_f14d80-f1 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading14988_f14d80-f1[data-kb-block=\"kb-adv-heading14988_f14d80-f1\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h3 id=\"Adding-the-Custom-Code\" class=\"kt-adv-heading14988_f14d80-f1 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading14988_f14d80-f1\">Adding the Custom Code<\/h3>\n\n\n\n<p>Kadence offers the <strong>Page<\/strong> <strong>Scripts<\/strong> feature for adding code to specific pages. You can learn about adding Custom Code to Kadence <a href=\"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-guides\/how-to-use-custom-css-and-scripts-using-kadence\/\">here<\/a>. <br><br>For <strong>Page<\/strong> <strong>Scripts<\/strong>, add the <strong>JavaScript<\/strong> in the <strong>Footer<\/strong> section so it loads after the Kadence Google Maps block. This ensures the map element exists before the script runs.<\/p>\n\n\n<style>.kb-image14988_47257b-a8.kb-image-is-ratio-size, .kb-image14988_47257b-a8 .kb-image-is-ratio-size{max-width:500px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image14988_47257b-a8.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image14988_47257b-a8 .kb-image-is-ratio-size{align-self:unset;}.kb-image14988_47257b-a8 figure{max-width:500px;}.kb-image14988_47257b-a8 .image-is-svg, .kb-image14988_47257b-a8 .image-is-svg img{width:100%;}.kb-image14988_47257b-a8 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image14988_47257b-a8\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1822\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Adding-Page-Scripts-scaled.jpg\" alt=\"Adding Page Scripts\" class=\"kb-img wp-image-15001\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Adding-Page-Scripts-scaled.jpg 2560w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Adding-Page-Scripts-300x213.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Adding-Page-Scripts-1024x729.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Adding-Page-Scripts-768x547.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Adding-Page-Scripts-1536x1093.jpg 1536w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Adding-Page-Scripts-2048x1457.jpg 2048w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Adding-Page-Scripts-360x256.jpg 360w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/figure><\/div>\n\n\n\n<p>Additionally, if you do not have access to <a href=\"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-blocks\/kadence-blocks-pro-plugin\/\"><strong>Kadence<\/strong> <strong>Blocks<\/strong> <strong>Pro<\/strong><\/a> or <a href=\"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-theme\/kadence-theme-pro-addon\/\"><strong>Kadence<\/strong> <strong>Theme<\/strong> <strong>Kit<\/strong> <strong>Pro<\/strong><\/a> to enable <strong>Custom<\/strong> <strong>Scripts<\/strong>, consider using a <strong>Custom HTML Block<\/strong> on the same page as the Google Maps block. This is a good workaround for free users.<\/p>\n\n\n<style>.kb-image14988_203573-78.kb-image-is-ratio-size, .kb-image14988_203573-78 .kb-image-is-ratio-size{max-width:750px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image14988_203573-78.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image14988_203573-78 .kb-image-is-ratio-size{align-self:unset;}.kb-image14988_203573-78 figure{max-width:750px;}.kb-image14988_203573-78 .image-is-svg, .kb-image14988_203573-78 .image-is-svg img{width:100%;}.kb-image14988_203573-78 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image14988_203573-78\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1522\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Custom-HTML-Block-scaled.jpg\" alt=\"Custom HTML Block\" class=\"kb-img wp-image-15002\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Custom-HTML-Block-scaled.jpg 2560w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Custom-HTML-Block-300x178.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Custom-HTML-Block-1024x609.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Custom-HTML-Block-768x457.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Custom-HTML-Block-1536x913.jpg 1536w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Custom-HTML-Block-2048x1218.jpg 2048w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Custom-HTML-Block-360x214.jpg 360w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/figure><\/div>\n\n\n\n<p>In return, if the code is modified properly, you should see multiple markers on the Google Maps block.<\/p>\n\n\n<style>.kb-image14988_a7f337-a9 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image14988_a7f337-a9 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"622\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Google-Maps-block-result-scaled.jpg\" alt=\"Google Maps block result\" class=\"kb-img wp-image-15006\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Google-Maps-block-result-scaled.jpg 2560w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Google-Maps-block-result-300x73.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Google-Maps-block-result-1024x249.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Google-Maps-block-result-768x186.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Google-Maps-block-result-1536x373.jpg 1536w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Google-Maps-block-result-2048x497.jpg 2048w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/09\/Google-Maps-block-result-360x87.jpg 360w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>The free Kadence Blocks plugin includes the Google Maps Block, which allows you to display a single location on a Google Map. However, you may want to expand on this by adding additional markers. This is an advanced guide that walks you through the process. Some technical skills are required, including the ability to modify&#8230;<\/p>\n","protected":false},"author":148263,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"doc_category":[420],"doc_tag":[],"knowledge_base":[7],"class_list":["post-14988","docs","type-docs","status-publish","hentry","doc_category-blocks-advanced","knowledge_base-kadence-blocks"],"year_month":"2026-04","word_count":856,"total_views":"1545","reactions":{"happy":"2","normal":"0","sad":"0"},"author_info":{"display_name":"victormonk","author_link":"https:\/\/www.kadencewp.com\/help-center\/author\/victormonk\/"},"doc_category_info":[{"term_name":"Advanced","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-blocks\/blocks-advanced\/"}],"doc_tag_info":[],"knowledge_base_info":[{"term_name":"Kadence Blocks","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-blocks\/","term_slug":"kadence-blocks"}],"knowledge_base_slug":["kadence-blocks"],"taxonomy_info":{"doc_category":[{"value":420,"label":"Advanced"}],"knowledge_base":[{"value":7,"label":"Kadence Blocks"}]},"featured_image_src_large":false,"comment_info":0,"_links":{"self":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/14988","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/users\/148263"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/comments?post=14988"}],"version-history":[{"count":9,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/14988\/revisions"}],"predecessor-version":[{"id":15013,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/14988\/revisions\/15013"}],"wp:attachment":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/media?parent=14988"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_category?post=14988"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_tag?post=14988"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/knowledge_base?post=14988"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}