Настройка маркеров Кластерные маркеры с информационными окнами

У меня возникла проблема с настройкой информационных окон для нескольких маркеров в google map api. В основном, я получаю широты и долготы и все остальное от внешнего Json-файла. Я правильно разбираю его, потому что маркеры отображаются на карте. Однако, когда я пытаюсь добавить информационное окно для каждого из них, оно отображает только информационное окно для последнего добавленного маркера +, когда я укажу на другой маркер, он по-прежнему будет следить за этим последним маркером, отображающим его информационное окно. Вот исходный код:Настройка маркеров Кластерные маркеры с информационными окнами

function initialize() 
    { 
    var latlng = new google.maps.LatLng(-34.397, 150.644); 

    var myOptions = { 
     zoom: 1, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById("tab14"), myOptions); 

    /* Sets up markers */  
    markers = []; 

     for (var i = 0, coordinates; coordinates = data.coords[i]; i++) 
     { 
     //marker = new google.maps.LatLng(coordinates.latitude, coordinates.longitude); 

     var iconImage = new google.maps.MarkerImage("http://map.lgfl.org.uk/images/arrow_green.png"); 
      var LatLng = new google.maps.LatLng(coordinates.latitude, coordinates.longitude); 
       var marker = new google.maps.Marker({position: LatLng, icon: iconImage }); 

     var contentString = '<div>'+ 
       '<div>'+ 
       '</div>'+ 
      '<h4>'+coordinates.title+'</h1>'+ 
       '<div>'+ 
       '<p>'+coordinates.excerpt+'</p>'+ 
       '</div>'+ 
       '</div>'; 

     var infowindow = new google.maps.InfoWindow({ 
     content: contentString 
     }); 

     google.maps.event.addListener(marker, 'click', function() { 
     infowindow.open(map,marker); 
     }); 


     markers.push(marker); 
     } 

     /* Sets up marker clusterer */ 
     var markerCluster = new MarkerClusterer(map, markers); 
    }

Может кто-нибудь, пожалуйста, помогите с этим? Благодарю.

// Отредактировано ------------------------------------------- -----------

так что я изменил его, и теперь он выглядит следующим образом:

infoWindow = new google.maps.InfoWindow(); 

    for (var i = 0, coordinates; coordinates = data.coords[i]; i++) 
    { 
       //marker = new google.maps.LatLng(coordinates.latitude, coordinates.longitude); 

       var iconImage = new google.maps.MarkerImage("http://map.lgfl.org.uk/images/arrow_green.png"); 
       var LatLng = new google.maps.LatLng(coordinates.latitude, coordinates.longitude); 
       var marker = new google.maps.Marker({position: LatLng, icon: iconImage }); 

       var contentString = '<div>'+ 
            '<div>'+ 
            '</div>'+ 
            '<h4>'+coordinates.title+'</h1>'+ 
            '<div>'+ 
            '<p>'+coordinates.excerpt+'</p>'+ 
            '</div>'+ 
            '</div>'; 

       google.maps.event.addListener(marker, 'click', function() { 
         infoWindow.setContent(contentString); 
         infoWindow.open(map,marker); 
       }); 

       markers.push(marker); 
    } 

    /* Sets up marker clusterer */ 
    var markerCluster = new MarkerClusterer(map, markers);

Еще не работает:/

источник

2010-10-21 Pavel

насколько я знаете, у вас может быть только один InfoWindow. Вы должны добавить событие onclick для каждого маркера, в котором вы определяете содержимое окна.

Я думаю, вы должны изменить:

var infowindow = new google.maps.InfoWindow({ 
       content: contentString 
       }); 

google.maps.event.addListener(marker, 'click', function() { 
       infowindow.open(map,marker); 
       });

к чему-то вроде:

google.maps.event.addListener(marker, 'click', function() { 
       infowindow.setContent(contentString); 
       infowindow.open(map,marker); 
       });

информационного окна должны быть определены вне ваш цикл.

Удачи вам!

** EDIT **

Я думаю, вам нужно использовать уникальные имена для маркеров.

Это рабочий пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Insert title here</title> 
<script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false&amp;key= 
    <<INSERT YOUR KEY HERE>>" type="text/javascript"></script> 
<script> 
function initialize() { 
// Create google map 
var latlng = new google.maps.LatLng(31.0293534,5.1736923); 
var myOptions = { 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    zoom: 1, 
    backgroundColor: "#99B3CC", 
    mapTypeControl: false 
} 
var map = new google.maps.Map(document.getElementById("map"), myOptions); 
var infoWindow = new google.maps.InfoWindow(); 

/** 
* First marker 
*/ 

var latLng = new google.maps.LatLng(31.0293534,5.1736923); 
var marker1 = new google.maps.Marker({ 
    map: map, 
    position: latLng, 
    visible: true 
}); 


google.maps.event.addListener(marker1, 'click', function() { 
    infoWindow.setContent("Some content Marker 1"); 
    infoWindow.open(map,marker1); 
}); 

/** 
* Second marker 
*/ 

var latLng = new google.maps.LatLng(25.271139,55.307485); 
var marker2 = new google.maps.Marker({ 
    map: map, 
    position: latLng, 
    visible: true 
}); 
marker2.onclick = function() { 
    infoWindow.setContent("Some content marker2"); 
    infoWindow.open(map,marker2); 
}; 
google.maps.event.addListener(marker2, 'click', function() { 
    infoWindow.setContent("Some content marker2"); 
    infoWindow.open(map,marker2); 
}); 
} 
window.onload=initialize; 
</script> 

</head> 
<body> 
<div id="map" style="width: 400px; height: 400px;"></div> 
</body> 
</html>

Вы, возможно, придется изменить ключ. Но у меня это работает как шарм. Самый простой пример, который я могу вам дать.

источник

2010-10-21 09:05:58

Хорошо, я нашел решение этого. Это своего рода взлом, но он работает для меня. Я размещаю его здесь, если кому-то это понадобится:

<script type="text/javascript"> 

    /* Sets up the map with markers */ 
    function initialize() 
    { 
    var latlng = new google.maps.LatLng(-34.397, 150.644); 

    var myOptions = { 
     zoom: 1, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById("tab14"), myOptions); 

     /* Sets up markers */  
     markers = []; 

     infoWindow = new google.maps.InfoWindow();    

     for (var i = 0, coordinates; coordinates = data.coords[i]; i++) 
     {    

        var iconImage = new google.maps.MarkerImage("http://map.lgfl.org.uk/images/arrow_green.png"); 
        var LatLng = new google.maps.LatLng(coordinates.latitude, coordinates.longitude); 
        var marker = new google.maps.Marker({position: LatLng, icon: iconImage }); 

        var contentString = '<div>'+ 
             '<h4>'+coordinates.title+'</h1>'+ 
             '<div>'+ 
             '<p>'+coordinates.excerpt+'</p>'+ 
             '</div>'+ 
             '</div>'; 

        addMarker(marker, contentString); 
        markers.push(marker); 
     } 

     /* Sets up marker clusterer */ 
     var markerCluster = new MarkerClusterer(map, markers); 


     function addMarker(marker, content) 
     { 
      google.maps.event.addListener(marker, 'click', function() { 
          infoWindow.setContent(content); 
          infoWindow.open(map, marker); 
     }); 
     } 

    } 

</script>

источник

2010-10-22 07:30:22 Pavel

Настройка маркеров Кластерные маркеры с информационными окнами

ответ

Смежные вопросы