cluster kml files with geoxml3

StackOverflow https://stackoverflow.com/questions/19292098

Question

i'm using geoxml3 to parse my kml file. this works so far.

now i'm trying to cluster these files so the map is not full of markers at low zoom levels

my kml file looks something like this (of course more markers(up to 200))

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Document>
<Placemark id="1">
    <name>test1</name>
    <Point>
        <coordinates>10.5267012, 49.6812452</coordinates>
    </Point>
</Placemark>
    <Placemark id="2">
    <name>test2</name>
    <Point>
        <coordinates>30.5267012, 24.6812452</coordinates>
    </Point>
</Placemark>
</Document>
</kml>

here is my code in my index.php

<?php ?>
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>test123</title>
    <link href="https://developers.google.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script src="lib/geoxml3.js"></script>
    <script>
        function clickMarker(i) {
            google.maps.event.trigger(markers[i], "click");
        }

        function initialize() {
            var center = new google.maps.LatLng(28.019440, -17.382813); //set map center
            var mapOptions = {
                zoom: 3, //set default zoom level
                center: center,
                mapTypeId: google.maps.MapTypeId.ROADMAP //set default map type(ROADMAP,SATELLITE,HYBRID,TERRAIN)
            };

            var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); //***ORIGINAL***
            var mcOptions = {gridSize: 50, maxZoom: 15};

            markers = [];
            markerclusterer = new MarkerClusterer(map, [], mcOptions);
            var infoWindow = new google.maps.InfoWindow({maxWidth: 800});

            var myParser = new geoXML3.parser({//*** ORIGINAL: only {map: map});
                map: map, singleInfoWindow: true,
                createMarker: function(placemark) {
                    //Constructing marker for each Placemark node, and then add it to the markclustere
                    var point = new google.maps.LatLng(placemark.point.lat, placemark.point.lng);
                    var marker = new google.maps.Marker({position: point});
                    markerclusterer.addMarker(marker);

                    google.maps.event.addListener(marker, "click", function() {
                        var marker_lat = marker.getPosition().lat();
                        var marker_lng = marker.getPosition().lng();
                        infoWindow.close();
                        infoWindow.setOptions({maxWidth: 800});
                        content = "<strong>" + placemark.name + "</strong><br>" + placemark.description;
                        infoWindow.setContent(content);
                        infoWindow.open(map, marker);
                    });
                    markerclusterer.addMarker(marker);
                }
            });

            myParser.parse('./kml/point-load.kml');
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>


<body>
    <div id="map-canvas"></div>
</body>
</html>

so my question: why are the markers not clustered and not displayed even without clusters???

Was it helpful?

Solution

I get this error with your code:

Uncaught ReferenceError: MarkerClusterer is not defined

Because you aren't including the MarkerClusterer external library that defines that.

working example from your code (but not your KML as that wasn't provided)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top