I have done enough work on the cluster. The present requirement for me is that…
I have made a group of markers with some latitude and longitude(position) , if all are distinct then there will be no problem but if you have any points having the same position then the points with same position will be in clustered form only irrespective of Zoom level.
So for instance I have differentiated them with two different infowindows based on Zoom level i.e., if we achieve a particular Zoom level that we define if there is cluster at that Zoom level then one of the infowindow is displayed else the other will be displayed. This is what I have done till now.
But what I want is that
“I will have different cluster groups while unclustering if any of the cluster groups have the points at same locations then the icon of that particular cluster group must be different “
Here is my code:
<script type ="text/javascript">
$(document).ready(function () {
function changeMarker(marker) {
marker.setIcon("images/bluemarker.png"); // this function is useful for div mouseover events
}
var map;
var infowindow;
var info1;
// this function is to evaluate the same latitude and longitude
function sameLatLng(mc) {
var cluster = mc.clusters_;
// if more than 1 point shares the same lat/long
// the size of the cluster array will be 1 AND
// the number of markers in the cluster will be > 1
// REMEMBER: maxZoom was already reached and we can't zoom in anymore
if (cluster.length == 1 && cluster[0].markers_.length > 1) {
var markers = cluster[0].markers_;
var html = '';
html += '<div id="infoWin">';
html += '<h3>' + markers.length + ' properties at this location of same latitude and longitude:</h3>';
html += '<div class="tab_content">';
html += '<ul class="addrlist">';
for (var i = 0; i < markers.length; i++) {
html += '<li><a id="p' + markers[i].title + '" href="javascript:;" rel="' + i + '">' + markers[i].title + '</a></li>';
}
html += '</ul>';
html += '</div>';
html += '</div>';
// I'm re-using the same global InfoWindow object here
infowindow.close(map);
$(html).appendTo('body');
infowindow = new google.maps.InfoWindow();
infowindow.setContent(document.getElementById('infoWin'));
infowindow.open(map, markers[0]);
// bind a click event to the list items to popup an InfoWindow
$('ul.addrlist li').click(function () {
alert("you clicked ")
});
}
}
function InitializeMap() {
// this function is for basic functionalities of the map
var myOptions =
{
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
}
function markicons() {
// this function is to create markers
InitializeMap();
var ltlng = [];
var markers = [];
var contentString = '<div id="maincontent" >' +
'<a href="http://www.google.com" target="_blank">'
+ '<img src="images/1.jpg" >'
+ '<span>'
+ 'Description for img01'
+ '</span>'
+ '</a>'
+ '<a href="http://www.edaboard.com" target="_blank">'
+ '<img src="images/2.jpg" >'
+ '<span>'
+ 'Description for img02'
+ '</span>'
+ '</a>'
+ '<a href="http://www.allaboutcircuits.com" target="_blank">'
+ '<img src="images/3.jpg" >'
+ '<span>'
+ 'Description for img03'
+ '</span>'
+ '</a>'
+ '<a href="http://www.hiddenbrains.org" target="_blank">'
+ '<img src="images/4.jpg" >'
+ '<span>'
+ 'Description for img04'
+ '</span>'
+ '</a>'
+ '<a href="http://www.hiddenbrains.com" target="_blank">'
+ '<img src="images/5.jpg" >'
+ '<span>'
+ 'Description for img05'
+ '</span>'
+ '</a>'
+ '<a href="http://www.google.com" target="_blank">'
+ '<img src="images/6.jpg" >'
+ '<span>'
+ 'Description for img06'
+ '</span>'
+ '</a>'
+ '</div>'
// fixed positioned markers
ltlng.push(new google.maps.LatLng(18.76, 83.28));
ltlng.push(new google.maps.LatLng(17.75, 83.29));
ltlng.push(new google.maps.LatLng(17.76, 83.30));
ltlng.push(new google.maps.LatLng(18.76, 83.30));
ltlng.push(new google.maps.LatLng(19.76, 83.30));
ltlng.push(new google.maps.LatLng(20.76, 83.30));
ltlng.push(new google.maps.LatLng(18.76, 83.30));
ltlng.push(new google.maps.LatLng(22.76, 83.30));
ltlng.push(new google.maps.LatLng(23.76, 83.30));
ltlng.push(new google.maps.LatLng(26.76, 83.30));
ltlng.push(new google.maps.LatLng(26.76, 83.30));
ltlng.push(new google.maps.LatLng(26.76, 83.30));
ltlng.push(new google.maps.LatLng(26.76, 83.30));
map.setCenter(ltlng[0]);
for (var i = 0; i <= ltlng.length; i++) {
marker = new google.maps.Marker({
map: map,
position: ltlng[i],
draggable: true,
icon: "images/greymarker.png",
animation: google.maps.Animation.DROP,
title: "this is " + i + "marker"
});
(function (i, marker) { // actually this is the call back function after creation of one marker this will be called
if (!infowindow) { // initialiazation of window
infowindow = new google.maps.InfoWindow();
}
google.maps.event.addListener(marker, 'click', function () {
if (!infowindow) {
infowindow = new google.maps.InfoWindow();
}
infowindow.setContent(contentString);
infowindow.open(map, marker);
marker.setIcon("images/bluemarker.png");
});
google.maps.event.addListener(marker, 'mouseout', function () {
if (!infowindow) {
infowindow = new google.maps.InfoWindow();
}
// infowindow.close(map, marker);
marker.setIcon("images/greymarker.png");
});
})(i, marker);
markers.push(marker); // to store the present marker in the markers array
}
var markerCluster = new MarkerClusterer(map, markers, { minimumClusterSize: 2, maxZoom: null, zoomOnClick: false, gridSize: 100 });
// we can use the maximum zoom option for the same location of latitude and longitude conflict where if zoom > maxZoom then the differen popups with the same location points are highlighted
// this is triggered when the content of the infowindow that is if the content in the infowindow string is ready it is fired
markerCluster.onClick = function () { return sameLatLng(markerCluster); }
google.maps.event.addListener(infowindow, 'domready', function () {
// this is the jquery plugin to have a slide show in the infowindow according to the content string
$("#maincontent").coinslider({
width: 500, // width of slider panel
height: 290, // height of slider panel
spw: 10, // squares per width
sph: 10, // squares per height
delay: 3000, // delay between images in ms
sDelay: 30, // delay beetwen squares in ms
opacity: 0.7, // opacity of title and navigation
titleSpeed: 500, // speed of title appereance in ms
effect: 'random', // random, swirl, rain, straight
navigation: true, // prev next and buttons
links: true, // show images as links
hoverPause: true // pause on hover
});
});
google.maps.event.addListener(markerCluster, "mouseover", function (c) {
alert("mouseover: ");
});
google.maps.event.addListener(markerCluster, "click", function (c) {
alert("hello cluster");
var info = new google.maps.MVCObject;
info.set('position', c.center_);
var markers_res = c.getMarkers();
var titles = "";
//Get all the titles
for (var i = 0; i < markers_res.length; i++) {
titles = titles + markers_res[i].getTitle() + "\n" + ",";
}
var infowindow = new google.maps.InfoWindow();
infowindow.close();
infowindow.setContent(titles);
infowindow.open(map, info);
})
}
window.onload = markicons;
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server" >
<div id="map-container"><div id="map"></div></div>
</asp:Content>
Any suggestions are greatly appreciated…….
Thanks in advance
At last got the answer my self the only solution for the above problem is to change the js file and use your own logic using the existing functions……… 😀