{"id":19386,"date":"2022-11-06T13:12:53","date_gmt":"2022-11-06T07:42:53","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-how-can-i-update-the-marker-cluster-from-the-map-based-on-the-list-of-locations\/"},"modified":"2022-11-06T13:12:53","modified_gmt":"2022-11-06T07:42:53","slug":"solved-how-can-i-update-the-marker-cluster-from-the-map-based-on-the-list-of-locations","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-how-can-i-update-the-marker-cluster-from-the-map-based-on-the-list-of-locations\/","title":{"rendered":"[Solved] How can I update the marker cluster from the map based on the list of locations?"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

In the API documentation<\/a> for the Marker Clusterer add-on<\/a>, the methods list contains <\/p>\n

\n

boolean removeMarker<\/strong>(marker:google.maps.Marker)
Removes a marker from the cluster.<\/em><\/p>\n<\/blockquote>\n

In order to use that method within the click handler (i.e. clickHandlerDelegate()<\/em>), the declaration (i.e. with keyword var<\/em>) will need to be moved out of the initialize<\/em> function:<\/p>\n

var map; \/\/set scope here so various functions can use them\nvar markerCluster;\n<\/code><\/pre>\n
Then when instantiating that variable, remove the var<\/em> keyword:<\/p>\n
}\nmarkerCluster = new MarkerClusterer(map, markers, {\n    imagePath: 'https:\/\/developers.google.com\/maps\/documentation\/javascript\/examples\/markerclusterer\/m'\n});\n<\/code><\/pre>\n
Finally, in the clickHandler function, pass the marker (i.e. markers[index]<\/code>) to a call to that removeMarker()<\/em> method:<\/p>\n
function clickHandlerDelegate(clickEvent) {\n  if (clickEvent.target.className.indexOf('deleteMarker') > -1) {\n    var index = clickEvent.target.dataset.id;\n    markers[index].setMap(null);\n    markerCluster.removeMarker(markers[index]);\n  }\n}\n<\/code><\/pre>\n
See this demonstrated in the example below. A third marker was added to demonstrate that the cluster number goes down to 2 with the deletion of the first location.<\/p>\n<\/p>\n
\n
\n
var beaches = [\r\n  [\"Haringhata\", 21.984606, 89.974250],\r\n  [\"West Bengal, India\",\r\n    21.681855, 88.584980\r\n  ],\r\n  [\"New Digha Sea Beach\",\r\n    21.617401, 87.500898\r\n  ]\r\n];\r\nvar markers = [];\r\nvar map; \/\/set scope here so various functions can use them\r\nvar markerCluster;\r\n\r\nfunction clickHandlerDelegate(clickEvent) {\r\n  if (clickEvent.target.className.indexOf('deleteMarker') > -1) {\r\n    var index = clickEvent.target.dataset.id;\r\n    markers[index].setMap(null);\r\n    markerCluster.removeMarker(markers[index]);\r\n  }\r\n}\r\n\r\nfunction initialize() {\r\n  map = new google.maps.Map(document.getElementById('map'), {\r\n    zoom: 8,\r\n    center: new google.maps.LatLng(beaches[0][1], beaches[0][2]),\r\n    mapTypeId: google.maps.MapTypeId.ROADMAP\r\n  });\r\n  var infowindow = new google.maps.InfoWindow();\r\n  var marker, i;\r\n  var shape = {\r\n    coords: [1, 1, 1, 20, 18, 20, 18, 1],\r\n    type: 'poly'\r\n  };\r\n\r\n  for (i = 0; i < beaches.length; i++) {\r\n    marker = new google.maps.Marker({\r\n      position: new google.maps.LatLng(beaches[i][1], beaches[i][2]),\r\n      map: map\r\n    });\r\n    google.maps.event.addListener(marker, 'click', (function(marker, i) {\r\n      return function() {\r\n        infowindow.setContent(beaches[i][0]);\r\n        infowindow.open(map, marker);\r\n      }\r\n    })(marker, i));\r\n    markers.push(marker);\r\n  }\r\n  markerCluster = new MarkerClusterer(map, markers, {\r\n    imagePath: 'https:\/\/developers.google.com\/maps\/documentation\/javascript\/examples\/markerclusterer\/m'\r\n  });\r\n\r\n}\r\ngoogle.maps.event.addDomListener(window, \"load\", initialize);\r\n\/\/set up delegate\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n  document.addEventListener('click', clickHandlerDelegate);\r\n});<\/code><\/pre>\n
html,\r\nbody,\r\n#map {\r\n  height: 100%;\r\n  width: 100%;\r\n  margin: 0px;\r\n  padding: 0px\r\n}<\/code><\/pre>\n
<script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js\"><\/script>\r\n<script src=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/examples\/markerclusterer\/markerclusterer.js\"><\/script>\r\n<table id=\"sum_table\">\r\n  <tr class=\"titlerow\">\r\n    <th>S.N.<\/th>\r\n    <th>Community<\/th>\r\n    <th width=\"18%\">Action<\/th>\r\n  <\/tr>\r\n  <tr>\r\n    <td>1<\/td>\r\n    <td>Haringhata<\/td>\r\n    <td><button class=\"deleteMarker\" data-id=\"0\">Remove<\/button><\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td>2<\/td>\r\n    <td>West Bengal, India<\/td>\r\n    <td><button class=\"deleteMarker\" data-id=\"1\">Remove<\/button><\/td>\r\n  <\/tr>\r\n  \r\n  <tr>\r\n    <td>3<\/td>\r\n    <td>New Digha Sea Beach<\/td>\r\n    <td><button class=\"deleteMarker\" data-id=\"2\">Remove<\/button><\/td>\r\n  <\/tr>\r\n<\/table>\r\n<div id=\"map\"><\/div><\/code><\/pre>\n<\/div>\n<\/div><\/div>\n
<\/div>\n<\/div>\n
            1<\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved How can I update the marker cluster from the map based on the list of locations? <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] In the API documentation for the Marker Clusterer add-on, the methods list contains boolean removeMarker(marker:google.maps.Marker)Removes a marker from the cluster. In order to use that method within the click handler (i.e. clickHandlerDelegate()), the declaration (i.e. with keyword var) will need to be moved out of the initialize function: var map; \/\/set scope here so … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[492,346,388,339],"class_list":["post-19386","post","type-post","status-publish","format-standard","hentry","category-solved","tag-google-maps","tag-html","tag-jquery","tag-php"],"yoast_head":"\n[Solved] How can I update the marker cluster from the map based on the list of locations? - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-how-can-i-update-the-marker-cluster-from-the-map-based-on-the-list-of-locations\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] How can I update the marker cluster from the map based on the list of locations? - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] In the API documentation for the Marker Clusterer add-on, the methods list contains boolean removeMarker(marker:google.maps.Marker)Removes a marker from the cluster. In order to use that method within the click handler (i.e. clickHandlerDelegate()), the declaration (i.e. with keyword var) will need to be moved out of the initialize function: var map; \/\/set scope here so ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-how-can-i-update-the-marker-cluster-from-the-map-based-on-the-list-of-locations\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-06T07:42:53+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-can-i-update-the-marker-cluster-from-the-map-based-on-the-list-of-locations\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-can-i-update-the-marker-cluster-from-the-map-based-on-the-list-of-locations\\\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] How can I update the marker cluster from the map based on the list of locations?\",\"datePublished\":\"2022-11-06T07:42:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-can-i-update-the-marker-cluster-from-the-map-based-on-the-list-of-locations\\\/\"},\"wordCount\":145,\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"keywords\":[\"google-maps\",\"html\",\"jquery\",\"php\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-can-i-update-the-marker-cluster-from-the-map-based-on-the-list-of-locations\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-can-i-update-the-marker-cluster-from-the-map-based-on-the-list-of-locations\\\/\",\"name\":\"[Solved] How can I update the marker cluster from the map based on the list of locations? - JassWeb\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\"},\"datePublished\":\"2022-11-06T07:42:53+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-can-i-update-the-marker-cluster-from-the-map-based-on-the-list-of-locations\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-can-i-update-the-marker-cluster-from-the-map-based-on-the-list-of-locations\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-can-i-update-the-marker-cluster-from-the-map-based-on-the-list-of-locations\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] How can I update the marker cluster from the map based on the list of locations?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/jass-website-logo-1.png\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\\\/\\\/jassweb.com\"],\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/author\\\/jaspritsinghghumangmail-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] How can I update the marker cluster from the map based on the list of locations? - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-how-can-i-update-the-marker-cluster-from-the-map-based-on-the-list-of-locations\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] How can I update the marker cluster from the map based on the list of locations? - JassWeb","og_description":"[ad_1] In the API documentation for the Marker Clusterer add-on, the methods list contains boolean removeMarker(marker:google.maps.Marker)Removes a marker from the cluster. In order to use that method within the click handler (i.e. clickHandlerDelegate()), the declaration (i.e. with keyword var) will need to be moved out of the initialize function: var map; \/\/set scope here so ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-how-can-i-update-the-marker-cluster-from-the-map-based-on-the-list-of-locations\/","og_site_name":"JassWeb","article_published_time":"2022-11-06T07:42:53+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-how-can-i-update-the-marker-cluster-from-the-map-based-on-the-list-of-locations\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-can-i-update-the-marker-cluster-from-the-map-based-on-the-list-of-locations\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] How can I update the marker cluster from the map based on the list of locations?","datePublished":"2022-11-06T07:42:53+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-can-i-update-the-marker-cluster-from-the-map-based-on-the-list-of-locations\/"},"wordCount":145,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["google-maps","html","jquery","php"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-how-can-i-update-the-marker-cluster-from-the-map-based-on-the-list-of-locations\/","url":"https:\/\/jassweb.com\/solved\/solved-how-can-i-update-the-marker-cluster-from-the-map-based-on-the-list-of-locations\/","name":"[Solved] How can I update the marker cluster from the map based on the list of locations? - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-11-06T07:42:53+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-can-i-update-the-marker-cluster-from-the-map-based-on-the-list-of-locations\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-how-can-i-update-the-marker-cluster-from-the-map-based-on-the-list-of-locations\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-how-can-i-update-the-marker-cluster-from-the-map-based-on-the-list-of-locations\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] How can I update the marker cluster from the map based on the list of locations?"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/19386","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=19386"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/19386\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=19386"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=19386"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=19386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}