Implementing a basic marker clustering feature in the Google Maps application

Question

Implementing a basic marker clustering feature in the Google Maps application

I'm currently experiencing issues with implementing marker clusterer functionality on my map. I am trying to use a custom icon for each marker and have individual info windows that are editable.

I was able to achieve this, but now I am facing difficulties in adding the marker clusterer library functionality. I came across information about adding markers to an array, but I am unsure about the exact implications of that. Additionally, I have not found any examples with arrays that include info windows, and upon examining the code, I couldn't identify a suitable method to incorporate them.

Below is the code snippet I am working with (mostly sourced from Geocodezip.com):

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
    <style type="text/css">
    html, body { height: 100%; } 
    </style>
<script type="text/javascript"> 
//<![CDATA[
var map = null;
function initialize() {
  var myOptions = {
    zoom: 8,
    center: new google.maps.LatLng(43.907787,-79.359741),
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

var mcOptions = {gridSize: 50, maxZoom: 15};
var mc = new MarkerClusterer(map, [], mcOptions);

      google.maps.event.addListener(map, 'click', function() {
            infowindow.close();
            });

      // Add markers to the map
      // Set up three markers with info windows 

          var point = new google.maps.LatLng(43.65654,-79.90138); 
          var marker1 = createMarker(point,'Abc');

          var point = new google.maps.LatLng(43.91892,-78.89231);
          var marker2 = createMarker(point,'Abc');

          var point = new google.maps.LatLng(43.82589,-79.10040);
          var marker3 = createMarker(point,'Abc');

          var markerArray = new Array(marker1, marker2, marker3);
          mc.addMarkers(markerArray, true);


}

var infowindow = new google.maps.InfoWindow(
  { 
    size: new google.maps.Size(150,50)
  });

function createMarker(latlng, html) {
    var image = '/321.png';
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: image,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });
}

//]]>
</script>

javascript google-maps google-maps-api-3 markerclusterer

Answer 1

Answer №1

Check out the operational jsfiddle demo

If you want to add markers to a marker cluster, MarkerClusterer offers support through the addMarker() and addMarkers() methods. Alternatively, you can provide an array of markers directly to the constructor:

Adding markers to the constructor using an array of markers can be done as shown below:

var markers = [];  //initialize a global array to store markers
for (var i = 0; i < 100; i++) {
  var latLng = new google.maps.LatLng(data.photos[i].latitude,
      data.photos[i].longitude);
  var marker = new google.maps.Marker({'position': latLng});
  markers.push(marker);  //add each marker to the global array
}
var markerCluster = new MarkerClusterer(map, markers);  //create clusterer and add the global array of markers

To add a marker using addMarker(), you can do so by following this pattern:

var markerCluster //cluster object created on global scope

//create your marker and add it like this:
markerCluster.addMarker(newMarker, true); //specifying true will redraw the map

Alternatively, if you prefer adding an array of markers:

var markerCluster //cluster object created on global scope

//create your markers and push them onto the array of markers:
markerCluster.addMarkers(newMarkers, true); //specifying true will redraw the map

For more information, refer to MarkerClusterer and Simple Examples

Based on the snippet of your code, you may need to modify it as follows:

var mcOptions = {gridSize: 50, maxZoom: 15};
var mc = new MarkerClusterer(map, [], mcOptions);

google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
});

// Add markers to the map
// Set up three markers with info windows 

var point = new google.maps.LatLng(43.65654,-79.90138); 
var marker1 = createMarker(point,'Abc');

var point = new google.maps.LatLng(43.91892,-78.89231);
var marker2 = createMarker(point,'Def');

var point = new google.maps.LatLng(43.82589,-79.10040);
var marker3 = createMarker(point,'Ghi');

var markerArray = new Array(marker1, marker2, marker3);
mc.addMarkers(markerArray, true);

Make sure to correct the naming of your markers in the createMarker function to avoid overwriting them. Also, ensure that the function returns the marker for clustering purposes:

function createMarker(latlng, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat() * -100000) << 5
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString);
        infowindow.open(map, marker);
    });

    return marker;
}

Answer 2

Check out the operational jsfiddle demo

If you want to add markers to a marker cluster, MarkerClusterer offers support through the addMarker() and addMarkers() methods. Alternatively, you can provide an array of markers directly to the constructor:

Adding markers to the constructor using an array of markers can be done as shown below:

var markers = [];  //initialize a global array to store markers
for (var i = 0; i < 100; i++) {
  var latLng = new google.maps.LatLng(data.photos[i].latitude,
      data.photos[i].longitude);
  var marker = new google.maps.Marker({'position': latLng});
  markers.push(marker);  //add each marker to the global array
}
var markerCluster = new MarkerClusterer(map, markers);  //create clusterer and add the global array of markers

To add a marker using addMarker(), you can do so by following this pattern:

var markerCluster //cluster object created on global scope

//create your marker and add it like this:
markerCluster.addMarker(newMarker, true); //specifying true will redraw the map

Alternatively, if you prefer adding an array of markers:

var markerCluster //cluster object created on global scope

//create your markers and push them onto the array of markers:
markerCluster.addMarkers(newMarkers, true); //specifying true will redraw the map

For more information, refer to MarkerClusterer and Simple Examples

Based on the snippet of your code, you may need to modify it as follows:

var mcOptions = {gridSize: 50, maxZoom: 15};
var mc = new MarkerClusterer(map, [], mcOptions);

google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
});

// Add markers to the map
// Set up three markers with info windows 

var point = new google.maps.LatLng(43.65654,-79.90138); 
var marker1 = createMarker(point,'Abc');

var point = new google.maps.LatLng(43.91892,-78.89231);
var marker2 = createMarker(point,'Def');

var point = new google.maps.LatLng(43.82589,-79.10040);
var marker3 = createMarker(point,'Ghi');

var markerArray = new Array(marker1, marker2, marker3);
mc.addMarkers(markerArray, true);

Make sure to correct the naming of your markers in the createMarker function to avoid overwriting them. Also, ensure that the function returns the marker for clustering purposes:

function createMarker(latlng, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat() * -100000) << 5
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString);
        infowindow.open(map, marker);
    });

    return marker;
}

Implementing a basic marker clustering feature in the Google Maps application

Answer №1

Similar questions

How to create a CSS animation that gradually darkens a background image during a

Introduce a pause interval between successive ajax get calls

Ways to customize the TextInput component in React-Admin

Using the onMessage event in React Native WebView does not seem to have any functionality

Attach an event listener to a class, then use the removeEventListener method to detach the listener and eliminate any remaining references, ensuring proper functionality of the

Save and retrieve documents within an electron application

Adding items dynamically to a React-Bootstrap accordion component can enhance the user experience and provide a

Customize React JS Material UI's InputBase to be responsive

Insert an element into a JSON collection

I can't seem to figure out why I constantly struggle with adding a check mark to a checkbox using

Unable to access a value from an object in Node.JS/MongoDB platform

What methods can I use to ensure this car rotates smoothly, whether or not I combine meshes in Three.js?

Inserting an item into ng-model within a dropdown menu

When utilizing npm install buefy and npm install font-awesome, there may be an unnecessary display of [email protected] and [email protected] extraneous errors

Verify Session Cookies through JSONP requests

Issue with host header detected in MERN stack configuration

Express application receiving repetitive post requests

Guide on adjusting the resolution/density of images in JPEG/PNG using JavaScript

Count up with HTML like a progressive jackpot's increasing value

Using a variable to store the value of the id attribute in HTML code