Php 如何在谷歌地图api信息窗口中添加星级？

我正在一个wordpress网站上工作，该网站将使用谷歌地图api，但在谷歌地图信息窗口中添加评级小部件时遇到了一个问题。评级标准显示的是明星，但不是明星

这是截图

这是我的密码

 <script type="text/javascript">
    jQuery(function($) {
    // Asynchronously Load the map API 
    var script = document.createElement('script');
    script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);
});
function initialize() {
    var map, casino_name, lat, longt ;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap'
    };

    // Display a map on the page
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    map.setTilt(45);

    // Multiple Markers
    var markers = [
        //[casino_name, lat,  longt],
        <?php
        $tooltip = '';
        $args = array(
            'post_type' => 'page',
            'post_parent' => get_the_ID(),
        );
        // The Query
        $the_query = new WP_Query( $args );
        // The Loop
        if ( $the_query->have_posts() ) {
            while ( $the_query->have_posts() ) {
                $the_query->the_post();
                $post_id = get_the_ID();
                    echo "['".$casino_name = get_field('casino_name', $post_id)."', ".get_field('latitude', $post_id).', '.get_field('longitude', $post_id).']';
                    $rating = do_shortcode('[ratingwidget type="page" post_id='.get_the_ID().']');
                    $tooltip .= "['".'<img src="'.get_field('casino_logo', $post_id).'" alt=""/>'." ".'<a class="casino-link" href="'.get_field('casino_link', $post_id).'">'.get_field('casino_name', $post_id).'</a>'." ".$rating."']";

                    if (($the_query->current_post +1) != ($the_query->post_count)){
                        echo ',';
                        $tooltip .= ',';
                    }

                 wp_reset_postdata();
            }

        } 
        /* Restore original Post Data */
        wp_reset_postdata(); 
    ?>

    ];

  // Info Window Content
    var infoWindowContent = [
       <?php echo $tooltip;  ?>
    ];


    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow();
    var  marker, i;

    // Loop through our array of markers & place each one on the map  
    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0]
        });

        // Allow each marker to have an info window    
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
               infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
                console.log(infoWindow);
            }
        })(marker, i));

        // Automatically center the map fitting all markers on the screen
        map.fitBounds(bounds);
    }

    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(14);
        google.maps.event.removeListener(boundsListener);
    });

}
</script>

jQuery（函数（$）{
//异步加载映射API
var script=document.createElement（'script'）；
script.src=”http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild（脚本）；
});
函数初始化（）{
var图，赌场名称，lat，Long；
var bounds=new google.maps.LatLngBounds（）；
变量映射选项={
mapTypeId:“路线图”
};
//在页面上显示地图
map=new google.maps.map（document.getElementById（“map_canvas”），mapOptions）；
地图.设置倾斜（45）；
//多重标记
变量标记=[
//[casino_name，lat，long]，
要实现信息框而不是标准的信息窗口，首先将信息框JS添加到站点

根据对话框底部属性表中的选项列表设置信息框的选项

下面是一个快速示例，这些选项可以在地图代码中的任何位置使用：

// Set infobox options
var boxOptions = {
    boxClass: "box-styles", /* Applies a class to your box for styling */
    zIndex: 9999,
    boxStyle: {
        opacity: 0.75,
        width: "222px"
    },
    closeBoxMargin: "10px",
    closeBoxURL: "/assets/img/icons/cancel.png",
}

然后在代码中，只需替换：

// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow();

与：

然后在单击事件中将InfoWindow（）的每个实例替换为InfoBox（），如下所示：

// Allow each marker to have an info window    
google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
        infoBox.setContent(infoWindowContent[i][0]);
        infoBox.open(map, marker);
        console.log(infoBox);
    }
})(marker, i));

上面应该给出一个如何实现这个的粗略想法。如果你仍然有困难-我建议你用你的代码创建一个新的，并从中工作。希望这有帮助

还可以看看这里的示例：
我注意到您使用的是默认的Google Maps.InfoWindow（）方法。您是否尝试过使用InfoBox使用自定义信息窗口？这是一个由Google维护的库，用于在Google Maps中实现自定义信息框。由于某些CSS被地图CSS覆盖，您的评级可能无法显示。使用自定义信息框可能会解决此问题。您可以在此处获取代码：我可以在高级自定义字段Google上使用它吗Map？我不明白为什么不能-但我对高级定制不是100%熟悉。实际上，InfoBox所做的唯一事情就是替换标准的.InfoWindow方法。您必须首先创建InfoBox对象并设置所有参数（通过我上面提供的链接在示例中解释了这一点）。设置了Infobox的选项和数据后，只需调用Infobox（）方法来代替当前的.InfoWindow方法。能否帮助我将自定义InfoWindow集成到上面的代码中？谢谢
// Allow each marker to have an info window    
google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
        infoBox.setContent(infoWindowContent[i][0]);
        infoBox.open(map, marker);
        console.log(infoBox);
    }
})(marker, i));