1

Google マップ API v3 で markerclusterplus.js を使用しようとしています。住所の配列をループして、それぞれをジオコーディングし、マーカーと情報ウィンドウを追加しています。マーカーと呼ばれる配列にマーカーをプッシュし、次のコードを使用してこれらをクラスターに追加しています

var markerCluster = new MarkerClusterer(map, markers);

クラスター化されたマーカーは表示されません。残りのコードは機能します。追加すると

map: map

私のマーカーには標準のマーカーとして表示されるので、これで問題ありません。を使用してマーカー配列に警告する場合

alert(markers.toString())

何も返されないので、配列に何もプッシュされていない可能性がありますか?

以下の完全なコード

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;ver=3.5.1"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>

</head>

<body>

<script type="text/javascript">
var map; //Map variable
var geocoder; //Geocoder variable
var infowindow;
//var marker; //Marker variable
//Options variable
var myOptions = {
              zoom: 2,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              disableDefaultUI: true,
            }; 
var LatLngList = [];

//Geocoder function
function myGeocode() {

    infowindow = new google.maps.InfoWindow({
        maxWidth: 200
    });
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    geocoder = new google.maps.Geocoder();
    var titles = ['Anne of Cleves House',
        'Lewes Castle',
        'Michelham Priory',
        'Fishbourne Roman Palace & Gardens',
        'Marlipins Museum','The Priest House',
        'The Long Man'
        ];

    var addresses =[
        'Anne of Cleves House, 52, Southover High St, Lewes, BN7 1JA',
        'Barbican House Museum, 169, High Street, Lewes, BN7 1YE',
        'Michelham Priory, Upper Dicker, Hailsham, East Sussex, BN27 3QS',
        'Fishbourne Roman Palace, Roman Way, Fishbourne, West Sussex, PO19 3QR',
        'Marlipins Museum, High Street, Shoreham-by-Sea, West Sussex, BN43 5DA',
        'The Priest House, North Lane, West Hoathly, West Sussex, RH19 4PP',
        'The long man of wilmington'
    ];

    var descriptions = [
        'Anne of Cleves House you can explore how the Tudors and Elizabethans lived, worked and relaxed at home.',
        'Climb to the top of this 1000 year old Norman Castle for stunning panoramic views across Sussex.',
        'England\'s longest water filled moat surrounds the site which dates back to 1229.',
        'Welcome to the largest Roman home in Britain',
        'The striking chequerboard flint and Caen limestone facade is part of one of the oldest Norman buildings in Sussex.',
        'The only one of its kind open to the public, this beautiful 15th century Wealden hall house stands in a traditional cottage garden.',
        'the long man of wilmington'
    ];

    for (var i = 0; i < addresses.length; i++) { 

        var address = addresses[i];
        var title = titles[i];
        var description = descriptions[i];
        //var alink = links[i];
        var markers = [];
        var marker;

        (function(address, title, description) {

            geocoder.geocode( {"address": address }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {

                    latlng = results[0].geometry.location;
                    LatLngList.push(latlng);

                    map.setCenter(latlng);

                    marker = new google.maps.Marker({
                        position: latlng
                        //map: map, 
                        //title: title,
                     }); 

                    markers.push(marker);

                    google.maps.event.addListener(marker, "click", function () {
                        infowindow.setContent("<div class='map-infowindow'><h4 class='gm-title'>"+title+"</h4>"+description+"'<a class='gm-directions' href='http://maps.google.com/maps?saddr="+address+"'>Get directions</a></div>");
                    infowindow.open(map, marker);
                    });

                } 
                else {
                  document.getElementById("text_status").value = status;
                }

            });//end of geocoder
        })(address, title, description); // <- Call function, pass the vars to be captured 
    }//end of for loop

    alert(markers.toString())
    var markerCluster = new MarkerClusterer(map, markers);

    //  Create a new viewpoint bound
    var bounds = new google.maps.LatLngBounds ();
    //  Go through each...
    for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) {
      //  And increase the bounds to take this point
      bounds.extend (LatLngList[i]);
    }
    //  Fit these bounds to the map
    map.fitBounds (bounds);

    //alert(LatLngList.join('\n'))
}

window.onload=myGeocode;
</script>

<div id="map_canvas" style="width:600px; height:600px;"></div>  

</body>

</html>
4

1 に答える 1