how to add marker cluster in google maps v3 for the same lat/long without influenting another element?

I made traceroute map. And I have problem with some markers that should be in the same lat/long but only one marker show on the map. I read that there's a way to do. It is marker cluster. but I don't know how to add in javascript. Also I'm afraid if that would be influent another element of markers which I've add like custom marker with label, infowindow and polyline.
here is my code :


var pinImage = new google.maps.MarkerImage ("http://chart.apis.google.com/chart?chst=d_map_xpin_letter_withshadow&chld=pin_star|%E2%80%A2|CC3300|000000|FF9900",
new google.maps.Size (70, 83),
new google.maps.Point (0,0),
new google.maps.Point (10,34));
var pinShadow = new google.maps.MarkerImage ("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
new google.maps.Size (89, 85),
new google.maps.Point (0, 0),
new google.maps.Point (12, 35));

function initialize() {
var myLatlng = new google.maps.LatLng(38.822591, 150.46875);
var myOptions = {
zoom: 2,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var infoWindow = new google.maps.InfoWindow({});
var point = [];
var lokasi = [];
var icon = pinImage;
for (var i = 0; i " + lokasi[i] + "
" + point[i];
var marker = new MarkerWithLabel({
map: map,
position: point[i],
icon: pinImage,
shadow: pinShadow,
labelContent: i,
labelAnchor: new google.maps.Point(12, -5),
labelClass: "labels"
});
bindInfoWindow(marker, map, infoWindow, html);
var jalur = new google.maps.Polyline({
path: point,
strokeColor: "#000000",
strokeOpacity: 0.8,
strokeWeight: 2.25
});
jalur.setMap(map);
}
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}



Also I give you the sample of positions which have the same lat/long :

[
new google.maps.LatLng(1.3667, 103.8000),
new google.maps.LatLng(1.3667, 103.8000),
new google.maps.LatLng(1.3667, 103.8000),
new google.maps.LatLng(1.3667, 103.8000),
new google.maps.LatLng(51.0000, 9.0000),
new google.maps.LatLng(51.0000, 9.0000),
new google.maps.LatLng(51.5142, -0.0931),
new google.maps.LatLng(51.5142, -0.0931),
new google.maps.LatLng(54.0000, -2.0000),
new google.maps.LatLng(51.6000, -1.2500),
new google.maps.LatLng(51.7500, -1.2500)
];


I need the help to make the marker cluster for same lat/long but that would not influent another element like marker with label, infowindow and polyline. Please Help. Thank You.

1 Answer
1

You can use this library.

MarkerClusterer for Google Maps v3

The library creates and manages per-zoom-level clusters for large
amounts of markers.

Example

When you zoom in on a cluster you can see multiple markers in one location.

EDIT:

// GET AN EMPTY ARRAY
var markerArray = ;
for (var i = 0; i < point.length; i++) {

// CODE AT THE BEGINNING OF LOOP

var marker = new MarkerWithLabel({
// MARKER CONFIGS
});
markerArray.push(marker);

// REST OF THE CODE IN LOOP
}

// TIME FOR ACTION
var markerCluster = new MarkerClusterer(map, markerArray);


for

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.