I have a map with lots of markers. All these markers have a InfoWindow.
With the Markers Cluster Lib, (http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js) I get clusters that zoom in when clicked.
Some Markers have the exact same coordinates, so they turn into a cluster even when I reach the maximum zoom. This is all fine so far, except that I want to also open a InfoWindow when clicking in the cluster that never splits into markers when zoomed. In this InfoWindow I want to display information based on the markers it includes.
This is my code so far. It works fine with InfoWindow on Markers, except it does not display InfoWindow when clicking on on Clusters.
function initialize(lat, lng) {
var myLatlng = new google.maps.LatLng(lat,lng);
var mapOptions = {
mapTypeControl: false,
center: myLatlng,
zoom: 14,
maxZonn:15
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
google.maps.event.addListener(map, 'idle', function() {
getMarkers(map.getBounds());
});
};
function getMarkers(bounds){
var filter = build_filter();
var bounds = {
'swlat':bounds.getSouthWest().lat(),
'swlng':bounds.getSouthWest().lng(),
'nelat':bounds.getNorthEast().lat(),
'nelng':bounds.getNorthEast().lng()
};
data = {
'bounds': bounds
}
$.ajax({
type: "POST",
dataType: 'json',
async: false,
url: "<?=$x_url;?>",
data: data,
cache: true,
success: function (json) {
addMarkers2Map(json);
}
});
}
function addMarkers2Map(data){
$('#properties_counter').html(data.length);
var markers = [];
for (var i = 0; i < data.length; ++i) {
// set the marker position
var latLng = new google.maps.LatLng(data[i].lat, data[i].lng);
console.log(data[i].lat);
// drop the marker
var marker = new MarkerWithLabel({
position: latLng,
map: map,
labelContent: data[i].price,
labelAnchor: new google.maps.Point(27, 35),
title: data[i].title,
labelClass: "map-markers",
zIndex: i
// icon: ' '
});
markers.push(marker);
var infowindow = null;
buildInfoWindow(marker,map,data[i], i);
}
var markerCluster = new MarkerClusterer(map, markers);
google.maps.event.addListener(markerCluster, 'click', function() {
infowindow.open(map,markerCluster);
});
}
function buildInfoWindow(marker, map, data, index){
var strVar="";
strVar += "<img src=\""+data.main_photo+"\"><br>";
strVar += data.name+"<\/i> | "+data.age+" <i class=\"fa fa-prp\"><\/i> | "+data.gender+" <i class=\"fa fa-check\"><\/i>";
strVar += "<div class=\"avatar-list\">";
strVar += "<a href=\""+data.link+"\"><img class=\"avatar-photo-list\" src=\""+data.picture+"\"><\/a>";
strVar += "<\/div>";
strVar += "<div class=\"adress2\">"+data.city+"<\/div>";
strVar += "<\/a>";
var infowindow = new google.maps.InfoWindow({
content: strVar
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
How can I achieve this?
To navigate, press the arrow keys. The number on a cluster indicates how many markers it contains. Notice that as you zoom into any of the cluster locations, the number on the cluster decreases, and you begin to see the individual markers on the map. Zooming out of the map consolidates the markers into clusters again.
You can use marker clusters so that Google map automatically clusters the markers into groups based on the location of the marker. When you click on a particular marker, it will zoom in and show sub-clusters for markers in a selected location. In this post, I will show you how to add marker clusters to Google Maps.
An InfoWindow displays content (usually text or images) in a popup window above the map, at a given location. The info window has a content area and a tapered stem. The tip of the stem is attached to a specified location on the map. Info windows appear as a Dialog to screen readers.
Info Window is used to add any kind of information to the map. For instance, if you want to provide information about a location on the map, you can use an info window. Usually the info window is attached to a marker. You can attach an info window by instantiating the google.maps.InfoWindow class. It has the following properties −
Broadly speaking, info windows are a type of overlay. For information on other types of overlay, see Drawing on the map. Hint: If you want to display a single textual character on a marker, you can use a marker label. Tip: Check out the Store Locator solutions for more examples of using info windows.
You can use the MarkerClusterer library in combination with the Maps JavaScript API to combine markers of close proximity into clusters, and simplify the display of markers on the map. To see how marker clustering works, view the map below. The number on a cluster indicates how many markers it contains.
An InfoWindow displays content (usually text or images) in a popup window above the map, at a given location. The info window has a content area and a tapered stem. The tip of the stem is attached to a specified location on the map. Info windows appear as a Dialog to screen readers.
I ended up solving this problem this way, adding the following code:
var clusterOptions = {
zoomOnClick: false
}
markerCluster = new MarkerClusterer(map, markers, clusterOptions);
google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
if (map.getZoom() < map.maxZoom ){
map.setCenter(cluster.center_);
map.setZoom(map.getZoom() + 2);
} else {
var content = '';
// Convert the coordinates to an MVCObject
var info = new google.maps.MVCObject;
info.set('position', cluster.center_);
//Get markers
var marks_in_cluster = cluster.getMarkers();
console.log(marks_in_cluster);
for (var z = 0; z < marks_in_cluster.length; z++) {
content = makeClusterInfo(marks_in_cluster,z);
}
infowindow.close(); // closes previous open ifowindows
infowindow.setContent(content);
infowindow.open(map, info);
google.maps.event.addListener(map, 'zoom_changed', function() {
infowindow.close()
});
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With