在google地圖api中添加更多內容到infowindow

我使用高級自定義字段來設置帖子的位置並將其顯示在我的自定義帖子模板中的地圖上，並且效果很好。但我也創建了一個Google地圖，它將我的自定義帖子類型的所有位置繪製在一張地圖上。在google地圖api中添加更多內容到infowindow

我的問題是我無法從這些自定義帖子中將內容或鏈接拖入infowindow。我也無法讓它根據真/假字段來更改標記。

我環視了一下互聯網，並嘗試使用谷歌建議的代碼以及該網站上的用戶，但我似乎做錯了什麼。它所做的只是顯示標題後面跟着一個奇怪的符號。任何幫助，將不勝感激:)

這是我使用的代碼：

<section> 

<?php 
    $args = array(
     'post_type'  => 'offices', 
     'posts_per_page' => -1 
); 
// query 
$wp_query = new WP_Query($args); 
$NUM = 0; 
?> 

    <div id="map"></div> 

<script src='http://maps.googleapis.com/maps/api/js?sensor=false' type='text/javascript'></script> 
<script type="text/javascript"> 
    var locations = [<?php while($wp_query->have_posts()){ 
    $wp_query->the_post(); 
    $location = get_field('location'); // IMPORTANT << Change this for your Google map field name !!!!!! 
?> 

['<?php the_title(); ?>', <?php echo $location['lat']; ?>, <?php echo $location['lng'];?>, <?php $NUM++ ?> ], 
    <?php } ?> ]; 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 7, /*Here you change zoom for your map*/ 
     center: new google.maps.LatLng(42.6, -76.0), /*Here you change center map first location*/ 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

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



    var marker, i; 

    for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
     map: map 

     }); 

     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
      infowindow.setContent(locations[i][0]); 
      infowindow.open(map, marker); 
     } 
     })(marker, i)); 
    } 

</script> 
</section>

來源

2015-04-30 hx360

是的，我得到了你的問題。按照我你做得很好，但你需要稍微修改你的代碼。

只是要值的數組中while循環像標記：

$marker[] = '"'.get_the_title().'"'.','.$event_lat.','.$event_long;

和形標記的細節：

$marker_details[] = get_the_title().'_sunil_'.get_the_content($post->ID).'_sunil_'.$ev_location.'_sunil_'.get_permalink($post->ID);

在此之後

然後只用foreach循環把你的腳本和爆炸在$ marker_details數組之上，按分隔符sunil。

的代碼將是：

var markers = [ 
     <?php foreach ($marker as $mar){ 
      echo "[".$mar."],"; 
     };?> 
     ]; 

var infoWindowContent = [ 
    <?php foreach ($marker_details as $mar_det){ 
     $check_val = explode('_sunil_',$mar_det);?> 
     ['<div class="info_content">' + 
     '<h3 style="display:block"><?php echo $check_val[0];?></h3><strong style="display:block;text-transform:capitalize;"><?php echo "Location : ".$check_val[2];?></strong>' + 
     '<p><?php echo substr($check_val[1], 0, 200);?>...</p><a href="<?php echo $check_val[3];?>" style="color:#18cecf;text-decoration:underline;font-weight:bold">Read More</a>' + '</div>'], 
     <?php }?> 
    ];

，同時也使動態使用循環不要連一個逗號打擾結構。只需從這裏獲取新的html和實施說明：http://www.wptricks24.com/map-with-multiple-markers

來源

2015-04-30 05:43:21 WpTricks24

在google地圖api中添加更多內容到infowindow

回答

相關問題