Маркер Google Maps загружает последнюю запись

Я пытаюсь добавить группу маркеров на карты Google, каждая из которых имеет информационное окно. Я использую для этого смесь php и javascript, php получает все записи из базы данных, а затем javascript добавляет все маркеры на карту с координатами, взятыми из базы данных.

Вот что у меня есть до сих пор:

<script type="text/javascript">
        function initialize() {

            var latlng = new google.maps.LatLng(<?=$lat?>, <?=$long?>);

            var settings = {
                zoom: 12,
                center: latlng,
                mapTypeControl: false,
                navigationControl: true,
                navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
                mapTypeId: google.maps.MapTypeId.ROADMAP};
            var map = new google.maps.Map(document.getElementById("map_canvas"), settings);

            var postcodeLogo = new google.maps.MarkerImage('/images/postcode_marker.png',
                new google.maps.Size(32,37),
                new google.maps.Point(0,0),
                new google.maps.Point(15,34)
            );

            var propertyLogo = new google.maps.MarkerImage('/images/property_marker.png',
                new google.maps.Size(32,37),
                new google.maps.Point(0,0),
                new google.maps.Point(15,34)
            );

            var infowindow = new google.maps.InfoWindow();  

            <?
            foreach ($results as $grid_refs)
            {
            ?>          

                    var propPos = new google.maps.LatLng(<?=$grid_refs['grid_ref']?>);

                    propMarker = new google.maps.Marker({
                        position: propPos,
                        map: map,
                        icon: propertyLogo,
                        title:"<?=$grid_refs['sd_name']?>",
                        zIndex: 3});

                    var contentString = '<div style="font-weight:bold;"><?=$grid_refs['sd_name']?></div><div><img src="www.imagelink.com/<?=$grid_refs['image_filename']?>"></div><div><a href="http://www.pagelink-<?=$grid_refs['property_id'];?>/" target="-blank">See full details</a></div>';

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

            <?
            }
            ?>


            var positionPos = new google.maps.LatLng(<?=$lat?>, <?=$long?>);

            var positionMarker = new google.maps.Marker({
                position: positionPos,
                map: map,
                icon: postcodeLogo,
                title:"<?=$_GET['searchpostcode']?>",
                zIndex: 3});


        }
    </script>

В positionMarker пользователь вводит почтовый индекс, по которому он хочет выполнить поиск. propMarker отмечает все места на карте, которые затем отображаются.

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

Я рассмотрел этот вопрос:

Информационное окно Google Maps загружает только последнюю запись для маркеров

который будет работать, но я не могу заставить цикл js for работать с php foreach, я пробовал его в php foreach и за его пределами.

Я ДУМАЮ, что мне нужен цикл forearch для изменения имени переменной и contentString каждый раз, когда он создает маркер, но я могу заставить это работать?

Любая помощь высоко ценится!


google-maps javascript php google-maps-markers infowindow
person iain    schedule 18.10.2011    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Что происходит, так это то, что вы зацикливаете все маркеры, но на самой последней итерации тот контент, который вы установили в contentString, становится тем, что затем используется для всех событий кликов.

Вместо этого делегируйте это другой функции (или используйте закрытие), например.

            <?
            foreach ($results as $grid_refs)
            {
            ?>          

                    var propPos = new google.maps.LatLng(<?=$grid_refs['grid_ref']?>);

                    propMarker = new google.maps.Marker({
                        position: propPos,
                        map: map,
                        icon: propertyLogo,
                        title:"<?=$grid_refs['sd_name']?>",
                        zIndex: 3});

                    var contentString = '<div style="font-weight:bold;"><?=$grid_refs['sd_name']?></div><div><img src="www.imagelink.com/<?=$grid_refs['image_filename']?>"></div><div><a href="http://www.pagelink-<?=$grid_refs['property_id'];?>/" target="-blank">See full details</a></div>';

                    // add an event listener for this marker
                    bindInfoWindow(propMarker, map, infowindow, contentString);
            <?
            }
            ?>

Затем добавьте новую функцию:

function bindInfoWindow(marker, map, infowindow, html) {
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(html);
        infowindow.open(map, marker);
    });
}
person duncan    schedule 18.10.2011
comment
Отлично, спасибо, все сработало. Я пытался переместить его во внешнюю функцию, но думаю, что пробовал, добавляя цикл for в foreach. Большое спасибо! - person iain; 18.10.2011