在 google maps api 中向 infowindow 添加更多内容答案

【问题标题】：add more content to infowindow in google maps api在 google maps api 中向 infowindow 添加更多内容
【发布时间】：2015-07-09 16:04:59
【问题描述】：

我正在使用高级自定义字段来设置帖子的位置并将其显示在我的自定义帖子模板内的地图上，效果很好。但我还创建了一个谷歌地图，在一张地图上绘制了我的自定义帖子类型的所有位置。

我的问题是我无法从这些自定义帖子中将内容或链接拉入信息窗口。我也无法让它根据真/假字段更改标记。

我浏览了互联网并尝试使用谷歌建议的代码以及该网站上的用户，但我似乎做错了什么。它所做的只是显示标题后跟一个奇怪的符号。任何帮助将不胜感激:)

这是我正在使用的代码：

<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>

【问题讨论】：

标签： wordpress api maps google-maps-markers infowindow

【解决方案1】：

是的，我遇到了你的问题。根据我的说法，你做得很好，但你需要稍微修改你的代码。

只需在你的 while 循环中创建一个值数组，比如 for 标记：

$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 循环放置您的脚本，并通过分隔符 sunil 在 $marker_details 数组上方爆炸。

代码将是：

    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

【讨论】：