在谷歌地图的信息框中创建一个图像滑块

Question

我在谷歌地图上点击标记时弹出一个信息框，信息框应该显示一个图像滑块，但目前只显示一个没有任何滑块效果的图像

<?php 
    require 'connection.php'; 
    $parent_id = $_GET['country'];
    $fid = $_GET['fid']; 
        $sql = "SELECT * FROM features_for_office WHERE parent_id='".$parent_id."' and fid='".$fid."' ";
        $result = mysqli_query($con, $sql);
        if (mysqli_num_rows($result) > 0) 
            {?>
                <script>
                    var myCenter=new google.maps.LatLng(51.508742,-0.120850);

                    function initialize()
                    {
                        var mapProp = {
                          center:myCenter,
                          zoom:2,
                          mapTypeId:google.maps.MapTypeId.ROADMAP
                          };

                        var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
                        var infowindow = new google.maps.InfoWindow();
                        var markerArray = [];
                        var index =0;

                        var marker;
                        var markers = new Array();
                         var locations =[];

                        <?
                            while($row = mysqli_fetch_assoc($result)) 
                                {
                                    $officeid= $row["officeid"];

                                    $sql1 = "SELECT * FROM officeimage WHERE officeid='".$officeid."' ";
                                    $result1 = mysqli_query($con, $sql1);
                                    if (mysqli_num_rows($result1) > 0) 
                                        {
                                            while($row1 = mysqli_fetch_assoc($result1)) 
                                                {
                                                    $officelat= $row1["lat"];
                                                    $officelon= $row1["lon"];
                                                    $officetitle= $row1["officetitle"];
                                                    $offimage= $row1["offimage"];
                                                    //echo $officelat;  
                                                    //echo $officelon;

                                                    ?>
                                                    /*start marker*/    
                                                    var values = [];    
                                                    values.push("<?php echo "<img src=\'http://example.com/asd/" . $offimage . "\' height=\'100\' width=\'100\'/>"; ?>");
                                                    values.push("<?php echo $officelat; ?>");
                                                    values.push("<?php echo $officelon; ?>");

                                                    locations.push(values);
                                                <?
                                                }
                                            ?>
                                             for (var i = 0; i < locations.length; i++) {  

                                                    marker = new google.maps.Marker({
                                                    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                                                    map: map,
                                                    });

                                                 markers.push(marker);

                                                      google.maps.event.addListener(marker, 'click', (function(marker, i) {
                                                        return function() {
                                                          infowindow.setContent(locations[i][0]);
                                                          infowindow.open(map, marker);
                                                        }
                                                      })(marker, i));
                                    }
                                            <?  
                                        }
                                }?>
                    }
                    google.maps.event.addDomListener(window, 'load', initialize);
                </script>
            <?}
        mysqli_close($con);     
?>

目前我用于图像滑块的代码是

<head>
    <style type="text/css">
        #container{
        height:50px;
        width:50px;
        margin:20px auto;
        }
        #img{
        height:45px;
        width:45px;
        position:absolute;
        }
        #left-holder
        {
        height:40px;
        width:20px;
        left:0px;
        top:0px;
        position:absolute;
        }
        #right-holder
        {
        height:40px;
        width:20px;
        left:0px;
        top:0px;
        position:absolute;
        }
        .left
        {
        height:20px;
        width:20px;
        position:absolute;
        top:10%
        left:0px;
        }
        .right
        {
        height:20px;
        width:20px;
        position:absolute;
        top:10%
        right:0px;
        }
    </style>

    <script type="text/javscript">
        var imagecount=1;
        var total=5;

        function slide(x)
            {   
                var Image = document.getElementById('img');
                imagecount = imagecount+x;
                Image.src = "Images/img"+ imagecount+ ".jpg";

            }   
    </script>

</head>

<body>
    <div id="container">
        <img class="img"/>
        <div id="left-holder"><img onClick="slide(-1)" class="left" src="img/left.png"></div>
        <div id="right-holder"><img onClick="slide(1)" class="right" src="img/right.png"></div>
    </div>
</body>

目前我有这个代码用于幻灯片工作正常，但我无法将其与主脚本合并。如果有人能帮助我，我将不胜感激