markerclusterer info windows

Permettez-moi de dire que je suis encore assez nouveau pour google maps et javascript. j'ai été mélangeant le google store locator tutoriel avec quelques autres trucs. Jusqu'à présent, je suis à l'aide du marqueur clusterer plus (lien), essentiellement la même que marqueur clusterer pour l'api google maps v3, mais avec quelques fonctionnalités supplémentaires, comme les souris de contrôle et des trucs comme ça. Je vais essayer d'obtenir une fenêtre d'informations à venir lorsque vous passez la souris sur un cluster.

de travail démo ici. voici mon index complet code:

    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Google Maps AJAX + mySQL/PHP Example</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="markerclusterer.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var markers = [];
var infoWindow;
var locationSelect; 
var markerCluster = null;
var m;
var p = [];
var contentString;
function load() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(40, -100),
zoom: 4,
mapTypeId: 'roadmap',
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
});
infoWindow = new google.maps.InfoWindow();
locationSelect = document.getElementById("locationSelect");
locationSelect.onchange = function() {
var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
if (markerNum != "none"){
google.maps.event.trigger(markers[markerNum], 'click');
}
};
}
function searchLocations() {
var address = document.getElementById("addressInput").value;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({address: address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
searchLocationsNear(results[0].geometry.location);
} else {
alert(address + ' not found');
}
});
}
function clearLocations() {
infoWindow.close();
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers.length = 0;
locationSelect.innerHTML = "";
var option = document.createElement("option");
option.value = "none";
option.innerHTML = "See all results:";
locationSelect.appendChild(option);
}
function searchLocationsNear(center) {
clearLocations(); 
var radius = document.getElementById('radiusSelect').value;
var searchUrl = 'genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
downloadUrl(searchUrl, function(data) {
var xml = parseXml(data);
var markerNodes = xml.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markerNodes.length; i++) {
var name = markerNodes[i].getAttribute("name");
var address = markerNodes[i].getAttribute("address");
var distance = parseFloat(markerNodes[i].getAttribute("distance"));
var foodID = markerNodes[i].getAttribute("foodID");
var restaurantName = markerNodes[i].getAttribute("restaurantName");
var latlng = new google.maps.LatLng(
parseFloat(markerNodes[i].getAttribute("lat")),
parseFloat(markerNodes[i].getAttribute("lng")));
createOption(name, distance, i);
createMarker(latlng, name, address, distance, foodID, restaurantName);
bounds.extend(latlng);
}
map.fitBounds(bounds);
locationSelect.style.visibility = "visible";
locationSelect.onchange = function() {
var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
google.maps.event.trigger(markers[markerNum], 'click');
};
var clusterOptions = { zoomOnClick: false }
var markerCluster = new MarkerClusterer(map, markers, clusterOptions);
var contentString = 'This is an example';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(markerCluster, "mouseover", function (c) {
infowindow.open(map,marker);
//alert(contentString);
//log("mouseover: ");
//log("&mdash;Center of cluster: " + c.getCenter());
//log("&mdash;Number of managed markers in cluster: " + c.getSize());
});
//google.maps.event.addListener(markerCluster, "mouseout", function (c) {
//log("mouseout: ");
//log("&mdash;Center of cluster: " + c.getCenter());
//log("&mdash;Number of managed markers in cluster: " + c.getSize());
//});
});
}
function createMarker(latlng, name, address, distance, foodID, restaurantName) {
var html = "<b>" + name + "</b> <br/>" + address + "<br/>" + distance + "<br/>" + foodID + ": the food id" + "<br/>" + restaurantName;
var marker = new google.maps.Marker({
map: map,
position: latlng
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
markers.push(marker);
}
function createOption(name, distance, num) {
var option = document.createElement("option");
option.value = num;
option.innerHTML = name + "(" + distance.toFixed(1) + ")";
locationSelect.appendChild(option);
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request.responseText, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function parseXml(str) {
if (window.ActiveXObject) {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
} else if (window.DOMParser) {
return (new DOMParser).parseFromString(str, 'text/xml');
}
}
function doNothing() {}
//]]>
function log(h) {
document.getElementById("log").innerHTML += h + "<br />";
}
</script>
</head>
<body style="margin:0px; padding:0px;" onLoad="load()"> 
<div>
<input type="text" id="addressInput" size="10"/>
<select id="radiusSelect">
<option value="25" selected>25mi</option>
<option value="100">100mi</option>
<option value="200">200mi</option>
</select>
<input type="button" onClick="searchLocations()" value="Search"/>
</div>
<div><select id="locationSelect" style="width:100%;visibility:hidden"></select></div>
<div id="map" style="width: 100%; height: 80%"></div>
<div id="log"></div>
</body>
</html>

Fondamentalement, il revient à cette partie, j'ai peut-être juste de la mettre dans le mauvais endroit:

var contentString = 'This is an example';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(markerCluster, "mouseover", function (c) {
infowindow.open(map,marker);

Je pensais que je faisais la fenêtre d'informations correctement, mais il n'est pas à venir. Je sais que le passage de la souris fonctionne parce que le commentaire d'alerte fonctionne quand je l'ai tester. les idées de ce que je fais de mal?

OriginalL'auteur thindery | 2011-10-04

10

infoWindow.Ouvert a deux surcharges
```
 infoWindow.Open(map, marker)
infoWindow.Open(map)
```
Depuis que vous souhaitez ouvrir pour l'ajouter à un cluster (pas un marqueur de), vous devez utiliser le second

Vous devez définir la position d'obtenir le centre de l'amas
```
google.maps.event.addListener(markerCluster, "mouseover", function (mCluster) {    
infowindow.content += "<div>Something<\/div>";
infowindow.setPosition(mCluster.getCenter());
infowindow.open(map);
});
```
Je sais que ça fonctionne car je l'ai juste fait

l'api google maps v3 + infoBubble dans markerClusterer

OriginalL'auteur Raphael Isidro
0

vous avez infowindow.open(map,marker); mais je ne vois pas où vous créez marqueur (à l'exception de la variable locale dans votre createMarkers fonction, vous ne pouvez pas vraiment accès à ce point). Ne pourrait-il pas être infowindow.open(map,markerCluster);

Une autre suggestion. Le deuxième paramètre est l'endroit où l'infowindow obtient ancré. Toutefois, vous n'en avez pas besoin. Lorsque vous créez votre bulle informative, vous pouvez définir un position de la propriété (c'est à dire utiliser le même lat/lng comme le marqueur a). Ensuite, vous pouvez simplement appeler infowindow.open(map);

Merci pour la suggestion. J'ai essayé et il n'a toujours pas de faire une différence.
Et la deuxième suggestion?

OriginalL'auteur duncan

Ci-dessous comment j'ai résolu avec l'API Google Maps v3 et le Marqueur Clusterer. J'ai aussi addes certains offset pour l'infoWindow, afin de ne pas ouvrir dans le centre de l'amas, mais peu au-dessus de lui.

//Define map variables
var map = new google.maps.Map(document.getElementById('mymap', {
zoom: 9,
center: {lat: 50, lng: 10}
});
var infoWindow = new google.maps.InfoWindow();
var markerCluster = new MarkerClusterer(map, markers, {zoomOnClick: false});
//Add listener for clusterclick event
markerCluster.addListener('clusterclick', function(cluster) {
//Optional: Set some offset for latitude,
//so that the InfoWindow opens a bit above the cluster
var offset = 0.1 / Math.pow(2, map.getZoom());
infoWindow.setContent('<div>Some content</div>');
infoWindow.setPosition({
lat: cluster.center_.lat() * (1 + offset),
lng: cluster.center_.lng()
});
infoWindow.open(map);
});

OriginalL'auteur Елин Й.

Raphaël Isidro de solution ne fonctionne pas pour moi. Curieusement, le texte du marqueur était vide et il a été positionnés dans la grille (0,0) de mon écran.

Cela a fonctionné parfaitement pour moi:

var markerCluster = new MarkerClusterer(map, my_markers ,{zoomOnClick: false});
google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
var content = '';
//Convert lat/long from cluster object to a usable MVCObject
var info = new google.maps.MVCObject;
info.set('position', cluster.center_);
iw.close();
iw.setContent('<h1>Hi this is my Info Window</h1>');
iw.open(map, info);
});

Exemple ici:
Voir http://krisarnold.com/2010/10/15/adding-info-windows-to-map-clusters-with-google-maps-api-v3/

OriginalL'auteur Agey

Vous devez vous connecter pour publier un commentaire.