Как заставить информационные окна работать в цикле

Question

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

Карта генерируется в цикле с этим:

function initialize(){
    var myLatlng = new google.maps.LatLng(45, -123);
     var myOptions = {
            zoom: 3,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
    var map = new google.maps.Map(document.getElementById('travel_map'), myOptions);
    <?php if ( have_posts() ) :  while ( have_posts() ) : the_post();
        $my_post = get_post($post_id);
        $mapTitle  = $my_post->post_title;
        $lat = get_post_meta($post->ID, 'latitude', true); 
        $long = get_post_meta($post->ID, 'longitude', true);
        ?>

    var contentString = 'test';

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

     var marker = new google.maps.Marker({
        position: new google.maps.LatLng(<?php echo $lat . ", " . $long ?>),
        map: map
     });

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

<?php endwhile;  ?>
<?php endif; ?>
}

Answer 1

http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/

Здесь описано, как использовать несколько маркеров и несколько информационных окон на вашей странице.

А вот и реализация:

<script type="text/javascript">

    var infowindow = null;
    var markers = [];
    function initialize(){
    var myLatlng = new google.maps.LatLng(45, -123);
     var myOptions = {
            zoom: 3,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

    var map = new google.maps.Map(document.getElementById('travel_map'), myOptions);

    infowindow = new google.maps.InfoWindow({
        content: "holding..."
    });

    <?php if ( have_posts() ) :  while ( have_posts() ) : the_post();
        $my_post = get_post($post_id);
        $mapTitle  = $my_post->post_title;
        $lat = get_post_meta($post->ID, 'latitude', true); 
        $long = get_post_meta($post->ID, 'longitude', true);
        ?>

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(<?php echo $lat . ", " . $long ?>),
        map: map,
        html: "<b><?php echo $mapTitle; ?></b><br><br><?php echo $my_post; ?>"
    });

    markers.push(marker);

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


<?php endwhile;  ?>
<?php endif; ?>
}
</script>