React Google maps/ Markerclusterer multiple markers at same location

Question

I m using markerclusterer in my React-redux project to draw markers for all the companies. I have 3 companies having the same address. When I zoom in to the Map, I can see the number 3 (marker cluster) and when further zoomed i could see only 1 marker (for all the 3 companies). I need to display a single marker (filter companies from markerClusterer that have same address) and when marker is clicked, open dialog box to show company details. Initially when map is loaded, the markers are rendered (code below:)

      companies.map((company) => {
      this.marker = new google.maps.Marker({
      map: map,
      position: {lat: parseFloat(company.latitude),
                 lng: parseFloat(company.longitude)},
      icon: {url:'/src/images/blue_marker.png',
             size: new google.maps.Size(30, 30)},
      title: company.name + ' ' + company.vacancy.vacancy                  
      }); 
      options = {
        imagePath: '/src/images/m',
        maxZoom: 15,
        zoomOnClick: false
       };
       var markerCluster = new MarkerClusterer(map, markers, options);
       markerCluster.setMaxZoom(15);

did you find a solution for this?

Syntax Hacker
– Syntax Hacker

2021-12-15 11:22:40 +00:00
Commented Dec 15, 2021 at 11:22 — Syntax Hacker
– Syntax Hacker, Commented Dec 15, 2021 at 11:22

Muhammad Bilal Bacha · Accepted Answer · 2024-01-18 11:41:37Z

0

https://medium.com/@robinttt333/google-maps-marker-clustering-part-2-a08f2789bc26

The above link will be help you. Issue is that when more than activities etc are coming on same location then we want to show cluster when you user click on cluster then map getting zooms to view the all activities or etc markers.

So the above blog is very helpfull you can check that.

answered Jan 18, 2024 at 11:41

Muhammad Bilal Bacha

1

Sign up to request clarification or add additional context in comments.

2 Comments

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Ro.oT Over a year ago

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review

Collectives™ on Stack Overflow

React Google maps/ Markerclusterer multiple markers at same location

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related