集成谷歌地圖W/WordPress的 - 信息窗口不開放

我目前試圖將在地圖上我的WordPress博客的主頁將根據文章的內容和的CustomField位置在地圖上顯示自定義圖標。我非常親密，除了infowindow之外，我都做了一切工作。我沒有錯誤，也沒有窗戶。非常感謝您的幫助。集成谷歌地圖W/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

來源

2011-04-15 generalchaos

我不知道這是否是問題，但是當我試圖打開命令我拿到後顯示信息窗口的位置「未定義」。 – generalchaos 2011-04-15 02:33:32

我還了解到，您不需要使用setMap（），因爲如果分配了地圖，標記將自動添加到地圖上。 – generalchaos 2011-04-15 03:09:01

現在，如果我在最後一個'for循環'中用數字（1-4）替換j，它就可以工作。我甚至可以複製一些數字的代碼，它仍然有效。嗯..... – generalchaos 2011-04-15 03:23:04

我相信有這個更優雅的解決方案，但這個工作。

我注意到，我使用的事件處理程序僅接收當環路結束索引，所以我改變標記以「這個」和添加了一個「內容」值到標記對象。

標記之前定義內容數組：

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

來源

2011-04-16 05:41:50 generalchaos

集成谷歌地圖W/WordPress的 - 信息窗口不開放

回答

相關問題