Интеграция Google Maps с WordPress - Infowindow не открывается

Question

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

Я посмотрел на похожие вопросы и попробовал несколько вещей, но ничего не получилось.

Вот мой код:

<script type="text/javascript">

function initialize() {
// setup map
var latlng = new google.maps.LatLng(34.109739, -118.351936);
var myOptions = {
  zoom: 10,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

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


// icons
var bootIcon = '/images/icons/bootIcon.png';
var hikingIcon = '/images/icons/hikingIconSm.png';

// Init post Data
var i = 0;
var hikingPositions = new Array();
var hikingMarkers = new Array();
var hikingBlurbs = new Array();

<?php $hiking_query = new WP_Query('category_name=hiking_ctg&posts_per_page=4');
        while ($hiking_query->have_posts()) : $hiking_query->the_post();?>
            <?php $geoLoc = get_post_meta($post->ID, 'longlat', true); ?>

            // Set Post data
            hikingPositions[i] = new google.maps.LatLng(<?php echo $geoLoc; ?>);
            hikingMarkers[i] = new google.maps.Marker({
              position: hikingPositions[i],
              map: map,
              icon: hikingIcon,
              title:"<?php the_title(); ?>"
            });

            hikingBlurbs[i] = '<div id="content"><h1 id="firstHeading" class="firstHeading"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1><div id="bodyContent"><p>.</p></div></div>'; 

            i++;

<?php endwhile; ?>


// Assign data to map
for(var j=0, marker; j < hikingMarkers.length; j++)
 {
     // To add the marker to the map, call setMap();
     hikingMarkers[j].setMap(map);  
     marker = hikingMarkers[j]; 

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

$(document).ready(function() {
 initialize();
});

</script>

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

Заранее спасибо.

С уважением, GeneralChaos

Answer 1

Я уверен, что есть более элегантные решения для этого, но это сработало.

Я заметил, что обработчик событий, который я использовал, получал индекс только после завершения цикла, поэтому я изменил маркер на «this» и добавил значение «content» к объекту маркера.

Определение массива содержимого перед маркером:

hikingBlurbs[i] = '<div id="infowindowContent"><h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1><div id="bodyContent"><p>.</p></div></div>';

Определение маркера с новой переменной содержимого:

// Set Post data
hikingPositions[i] = new google.maps.LatLng(<?php echo $geoLoc; ?>);

hikingMarkers[i] = new google.maps.Marker({
   position: hikingPositions[i],
   map: map,
   icon: hikingIcon,
   title:"<?php the_title(); ?>",
   content: hikingBlurbs[i]
});

Теперь добавьте прослушиватель событий с некоторыми простыми изменениями:

// Assign data to map
for(marker in hikingMarkers)
 {
  google.maps.event.addListener(hikingMarkers[marker], 'mouseover', function() {
           infowindow.setContent(this.content);
           infowindow.open(map,this);
           });
 } 

Дайте мне знать, если вы видите лучший способ сделать это или у вас есть какие-либо вопросы.

С наилучшими пожеланиями, GeneralChaos