Question

www.bchomescondos.ca/properties/?city=Burnaby&id=261618646

www.bchomescondos.ca/properties/?city=Burnaby&id=261711367

这些只是出现问题的几个示例页面。我不太熟悉Google Map API，但仍尝试在我的网站上加入。

我添加了三个标签 - 一个显示路线图，另一个显示街景，第三个是人行道。虽然路线图和步行分数工作正常，但街景并非如此。

但我注意到的一件奇怪的事情是，如果页面被调整大小（只是出于任何奇怪的原因），街景地图就会出现。

如果有人帮我解决这个问题，我将非常感激。

剧本

http://pastebin.com/zQTCxez2

<script src="https://maps.googleapis.com/maps/api/js?v=3.19&sensor=true_or_false"></script>

<script>
var geocoder;
var ws_wsid = 'afca921c9778417e8dc16a8236d1f079';
var ws_address = "<?php echo $row['address']; ?>,<?php echo $row['city']; ?>";
var ws_width = '100%';
var ws_height = '400';
var ws_layout = 'vertical';
var ws_commute = 'true';
var ws_transit_score = 'true';
var ws_map_modules = 'all';
var address = "<?php echo $row['address']; ?>,<?php echo $row['city']; ?>";

function initialize() {
    var fenway = new google.maps.LatLng( <? php echo $row['latitude']; ?> , <? php echo $row['longtitude']; ?> )
    var mapOptions = {
        center: fenway,
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    var contentString = '<a class="fancybox-inline" href="#request_form_pop">Request of showing this property</a>';
    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });

    var marker = new google.maps.Marker({
        position: fenway,
        map: map,
        title: ''

    });


    infowindow.open(map, marker);
    google.maps.event.addListener(marker, 'click', function() {});

    var panoramaOptions = {
        position: fenway,
        pov: {
            heading: 34,
            pitch: 10
        }
    };
    panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
    map.setStreetView(panorama);

}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

HTML

http://pastebin.com/fgDRR0MN

<div class="row">
        <div class="one columns"></div>

        <section class="ten columns tabs" style="margin: 20px 0;">         
            <ul class="tab-nav">
                <li class="active"><a href="#">Google Map</a></li>
                <li> <a href="#">Street View</a></li>
                <li><a href="#">Walk Score</a></li>
            </ul>
            <div class="tab-content active">
                <div id="map-canvas" style="height: 400px; border: 0.5px solid #000;">
                </div>
            </div>
           <div class="tab-content">
                <div id="pano" style="height: 400px; border: 0.5px solid #000;"></div>
            </div>
            <div class="tab-content">
                <div id="ws-walkscore-tile" style="height: 400px; border: 0.5px solid #000;"></div>
            </div>
            <script type='text/javascript' src='http://www.walkscore.com/tile/show-walkscore-tile.php'></script>            
        </section>

        <div class="one columns"></div>
</div>

我只是想在点击特定标签时显示街景。

CSS文件

[http://www.bchomescondos.ca/wp-content/themes/dgdon/css/gumby.css] [http://www.bchomescondos.ca/wp-content/themes/dgdon/css/style.css]

Answer 1

因此，可以推断出地图api和它的脚本没有问题。问题在于如何处理CSS选项卡。感谢邓肯的帮助。我会打开一个关于解决这个CSS和JS问题的新问题。

谷歌地图街景不工作 - 显示为灰色

1 个答案: