Let me introduce myself, I am not a developper but I would like to use the functionality of marker clustering. I have tried to do it myself but i dont know how.
The example pages dont look familiar to me. Please can sombody help me?
The page I use now is as follows but where should I place the code for marker clustering?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script
src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAZHe0MoomV_M6OqWo0o2_TxRrxYqa2y9_S5cKsqnV8LCbCpqU9hRvunXe3R1ml7fA0zgjGpOzAs-vRA
"
type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[
var CPIcon = new GIcon();
CPIcon.image = '/europa/markers/imageCP.png';
CPIcon.shadow = '/europa/markers/shadow.png';
CPIcon.iconSize = new GSize(30,30);
CPIcon.shadowSize = new GSize(45,30);
CPIcon.iconAnchor = new GPoint(15,30);
CPIcon.infoWindowAnchor = new GPoint(15,0);
CPIcon.printImage = '/europa/markers/printImageCP.gif';
CPIcon.mozPrintImage = '/europa/markers/mozPrintImageCP.gif';
CPIcon.printShadow = '/europa/markers/printShadow.gif';
CPIcon.transparent = '/europa/markers/transparent.png';
CPIcon.imageMap = [27,0,27,1,27,2,27,3,27,4,27,5,27,6,27,7,27,8,27,9,27,10,27,11,27,12,27,13,27,14,27,15,27,16,27,17,27,18,27,19,27,20,27,21,27,22,27,23,27,24,20,25,16,26,16,27,15,28,15,29,15,29,14,28,14,27,13,26,10,25,3,24,3,23,3,22,3,21,3,20,3,19,3,18,3,17,3,16,3,15,3,14,3,13,3,12,3,11,3,10,3,9,3,8,3,7,3,6,3,5,3,4,3,3,3,2,3,1,3,0];
var CAIcon = new GIcon();
CAIcon.image = '/europa/markers/imageCA.png';
CAIcon.shadow = '/europa/markers/shadow.png';
CAIcon.iconSize = new GSize(30,30);
CAIcon.shadowSize = new GSize(45,30);
CAIcon.iconAnchor = new GPoint(15,30);
CAIcon.infoWindowAnchor = new GPoint(15,0);
CAIcon.printImage = '/europa/markers/printImageCA.gif';
CAIcon.mozPrintImage = '/europa/markers/mozPrintImageCA.gif';
CAIcon.printShadow = '/europa/markers/printShadow.gif';
CAIcon.transparent = '/europa/markers/transparent.png';
CAIcon.imageMap = [27,0,27,1,27,2,27,3,27,4,27,5,27,6,27,7,27,8,27,9,27,10,27,11,27,12,27,13,27,14,27,15,27,16,27,17,27,18,27,19,27,20,27,21,27,22,27,23,27,24,20,25,16,26,16,27,15,28,15,29,15,29,14,28,14,27,13,26,10,25,3,24,3,23,3,22,3,21,3,20,3,19,3,18,3,17,3,16,3,15,3,14,3,13,3,12,3,11,3,10,3,9,3,8,3,7,3,6,3,5,3,4,3,3,3,2,3,1,3,0];
var PRIcon = new GIcon();
PRIcon.image = '/europa/markers/imagePR.png';
PRIcon.shadow = '/europa/markers/shadow.png';
PRIcon.iconSize = new GSize(30,30);
PRIcon.shadowSize = new GSize(45,30);
PRIcon.iconAnchor = new GPoint(15,30);
PRIcon.infoWindowAnchor = new GPoint(15,0);
PRIcon.printImage = '/europa/markers/printImagePR.gif';
PRIcon.mozPrintImage = '/europa/markers/mozPrintImagePR.gif';
PRIcon.printShadow = '/europa/markers/printShadow.gif';
PRIcon.transparent = '/europa/markers/transparent.png';
PRIcon.imageMap = [27,0,27,1,27,2,27,3,27,4,27,5,27,6,27,7,27,8,27,9,27,10,27,11,27,12,27,13,27,14,27,15,27,16,27,17,27,18,27,19,27,20,27,21,27,22,27,23,27,24,20,25,16,26,16,27,15,28,15,29,15,29,14,28,14,27,13,26,10,25,3,24,3,23,3,22,3,21,3,20,3,19,3,18,3,17,3,16,3,15,3,14,3,13,3,12,3,11,3,10,3,9,3,8,3,7,3,6,3,5,3,4,3,3,3,2,3,1,3,0];
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl3D());
map.addControl(new GMenuMapTypeControl());
map.addControl(new GOverviewMapControl());
map.addControl(new GScaleControl());
map.setCenter(new GLatLng(51.100, 9.993), 6);
var mcOptions = {gridSize: 50, maxZoom: 15};
var mc = new MarkerClusterer(map, [], mcOptions);
GDownloadUrl("/europa/Create_XML_DE.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var plaats = markers[i].getAttribute("plaats");
var oms = markers[i].getAttribute("oms");
var aantal_plaatsen = markers[i].getAttribute("aantal_plaatsen");
var cp_soort = markers[i].getAttribute("cp_soort");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lon")));
var marker = createMarker(point, plaats, oms, aantal_plaatsen, cp_soort);
map.addOverlay(marker);
}
});
}
}
function createMarker(point, plaats, oms, aantal_plaatsen, cp_soort) {
var marker = new GMarker(point, customIcons[cp_soort]);
var html = "<b>" + plaats + "</b> <br/>" + oms + "</b> <br/>" + "Aantal plaatsen: " + aantal_plaatsen
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
//]]>
</script>
The web page source that you posted contains a reference to MarkerClusterer but no reference to ClusterMarker so i've modified your page to use ClusterMarker.
(If you want to use MarkerClusterer instead then i'll leave you to find documentation and support for that elsewhere).
Here's the modified page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Title added so page validates</title>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAZHe0MoomV_M6OqWo0o2_TxRrxYqa2y9_S5cKsqnV8LCbCpqU9hRvunXe3R1ml7fA0zgjGpOzAs-vRA"></script>
<!-- added ClusterMarker.js -->
<script type="text/javascript" src="ClusterMarker.js"></script>
<script type="text/javascript">
//<![CDATA[
var CPIcon = new GIcon();
CPIcon.image = '/europa/markers/imageCP.png';
CPIcon.shadow = '/europa/markers/shadow.png';
CPIcon.iconSize = new GSize(30,30);
CPIcon.shadowSize = new GSize(45,30);
CPIcon.iconAnchor = new GPoint(15,30);
CPIcon.infoWindowAnchor = new GPoint(15,0);
CPIcon.printImage = '/europa/markers/printImageCP.gif';
CPIcon.mozPrintImage = '/europa/markers/mozPrintImageCP.gif';
CPIcon.printShadow = '/europa/markers/printShadow.gif';
CPIcon.transparent = '/europa/markers/transparent.png';
CPIcon.imageMap = [27,0,27,1,27,2,27,3,27,4,27,5,27,6,27,7,27,8,27,9,27,10,27,11,27,12,27,13,27,14,27,15,27,16,27,17,27,18,27,19,27,20,27,21,27,22,27,23,27,24,20,25,16,26,16,27,15,28,15,29,15,29,14,28,14,27,13,26,10,25,3,24,3,23,3,22,3,21,3,20,3,19,3,18,3,17,3,16,3,15,3,14,3,13,3,12,3,11,3,10,3,9,3,8,3,7,3,6,3,5,3,4,3,3,3,2,3,1,3,0];
var CAIcon = new GIcon();
CAIcon.image = '/europa/markers/imageCA.png';
CAIcon.shadow = '/europa/markers/shadow.png';
CAIcon.iconSize = new GSize(30,30);
CAIcon.shadowSize = new GSize(45,30);
CAIcon.iconAnchor = new GPoint(15,30);
CAIcon.infoWindowAnchor = new GPoint(15,0);
CAIcon.printImage = '/europa/markers/printImageCA.gif';
CAIcon.mozPrintImage = '/europa/markers/mozPrintImageCA.gif';
CAIcon.printShadow = '/europa/markers/printShadow.gif';
CAIcon.transparent = '/europa/markers/transparent.png';
CAIcon.imageMap = [27,0,27,1,27,2,27,3,27,4,27,5,27,6,27,7,27,8,27,9,27,10,27,11,27,12,27,13,27,14,27,15,27,16,27,17,27,18,27,19,27,20,27,21,27,22,27,23,27,24,20,25,16,26,16,27,15,28,15,29,15,29,14,28,14,27,13,26,10,25,3,24,3,23,3,22,3,21,3,20,3,19,3,18,3,17,3,16,3,15,3,14,3,13,3,12,3,11,3,10,3,9,3,8,3,7,3,6,3,5,3,4,3,3,3,2,3,1,3,0];
var PRIcon = new GIcon();
PRIcon.image = '/europa/markers/imagePR.png';
PRIcon.shadow = '/europa/markers/shadow.png';
PRIcon.iconSize = new GSize(30,30);
PRIcon.shadowSize = new GSize(45,30);
PRIcon.iconAnchor = new GPoint(15,30);
PRIcon.infoWindowAnchor = new GPoint(15,0);
PRIcon.printImage = '/europa/markers/printImagePR.gif';
PRIcon.mozPrintImage = '/europa/markers/mozPrintImagePR.gif';
PRIcon.printShadow = '/europa/markers/printShadow.gif';
PRIcon.transparent = '/europa/markers/transparent.png';
PRIcon.imageMap = [27,0,27,1,27,2,27,3,27,4,27,5,27,6,27,7,27,8,27,9,27,10,27,11,27,12,27,13,27,14,27,15,27,16,27,17,27,18,27,19,27,20,27,21,27,22,27,23,27,24,20,25,16,26,16,27,15,28,15,29,15,29,14,28,14,27,13,26,10,25,3,24,3,23,3,22,3,21,3,20,3,19,3,18,3,17,3,16,3,15,3,14,3,13,3,12,3,11,3,10,3,9,3,8,3,7,3,6,3,5,3,4,3,3,3,2,3,1,3,0];
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl3D());
map.addControl(new GMenuMapTypeControl());
map.addControl(new GOverviewMapControl());
map.addControl(new GScaleControl());
map.setCenter(new GLatLng(51.100, 9.993), 6);
/* commented out lines relating to MarkerClustere
var mcOptions = {gridSize: 50, maxZoom: 15};
var mc = new MarkerClusterer(map, [], mcOptions); */
GDownloadUrl("/europa/Create_XML_DE.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
var allMarkers=[]; // a new array to hold references to all new markers
for (var i = 0; i < markers.length; i++) {
var plaats = markers[i].getAttribute("plaats");
var oms = markers[i].getAttribute("oms");
var aantal_plaatsen = markers[i].getAttribute("aantal_plaatsen");
var cp_soort = markers[i].getAttribute("cp_soort");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lon")));
var marker = createMarker(point, plaats, oms, aantal_plaatsen, cp_soort);
map.addOverlay(marker);
allMarkers.push(marker);
}
// create an instance of ClusterMarker
var cm=new ClusterMarker(map, allMarkers);
// now call either of ClusterMarker's refresh() or fitMapToMarkers() methods to update the map
cm.fitMapToMarkers();
});
}
}
function createMarker(point, plaats, oms, aantal_plaatsen, cp_soort) {
var marker = new GMarker(point, customIcons[cp_soort]);
var html = "<b>" + plaats + "</b> <br/>" + oms + "</b> <br/>" + "Aantal plaatsen: " + aantal_plaatsen
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
//]]>
</script>
I've commented the modifications that i've made.
Just added the <script> element for ClusterMarker.js and then in your GDownloadUrl() callback i create an instance of ClusterMarker, pass it a (new) array of markers and then fit the map to the markers.
I couldn't test the new page without access to your XML file so will leave you to debug it!
Thank you very much for the quick replay.
I understand wat you did in the code but it don't work.
I have tried to resolve the problem but don't no what to do.
I have made a testmap with de code and the php file to create the XML output and I put there the ClusterMarker.js
Please can You help me again?
You can reach the page on http://camperplaats.moento.nl/europa/dld
I made a couple of mistakes in my previously posted (untested) code...
var cm=new ClusterMarker(map, allMarkers);
Is wrong - the markers array should be passed as an object:
var cm=new ClusterMarker(map, {markers:allMarkers});
And then the line which added each new marker to the map should have been removed - ClusterMarker will add or remove the markers from the map.
Anyway i got it all working for you and at the same time optimalised some of the code - you're handling a large number of markers so any performance gain you can get by optimalising the code is worth having.
It is a long time a go but, it works now.
Some pages have many markers and i think it is better to add a progress bar.
But i realy have no idea how to do that.
Would you help me again please?
If you don't already have a suitable progress bar graphic then you can create one here: http://ajaxload.info/.
Here's some pseudo code to help you:
// assuming that your progress bar graphic is 60 pixels by 20 pixels and that you have a variable named 'map' for your GMap2 object
var progressBar=new HtmlControl('<img src="path to the progress bar graphic" width="60" height="20" alt="Map loading..." style="you can add some style here such as a border" />');
var mapSize=map.getSize();
map.addControl(progressBar, new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize((mapSize.width/2)-30, (mapSize.height/2)-10)));
// then once your markers have loaded you can remove the progress bar
map.removeControl(progressBar);
That will create the progress bar and add it to the center of the map.
You're likely to want to add the progress bar as soon as you initialise your map and remove it once all markers have been created at the end of the GDownloadUrl() callback function.
If you need more detailed help then let me have a link to your map.
