谷歌地图控件在 Wordpress 页面中看起来都错了[重复]答案

【问题标题】：Google Maps controls look all wrong in Wordpress page [duplicate]谷歌地图控件在 Wordpress 页面中看起来都错了[重复]
【发布时间】：2014-05-27 17:02:12
【问题描述】：

所以我需要将个性化的谷歌地图嵌入到 WP 页面中。我为页面创建了一个模板，因此 head 部分只在正确的页面上加载必要的脚本。

这行得通。唯一的问题是，一些控件看起来都错了。看看：

http://mercatinobrocantage.com/?page_id=80

缩放控件很小，看起来很奇怪。街景控件几乎是不可见的。另外，关闭对话框弹出的X是错误的两个。

我不知道如何解决这个问题，也没有见过类似的情况。

有人可以帮帮我吗？谢谢大家。

这是我使用的地图相关代码。

<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>

<script type="text/javascript">
        function initialize() {

        var Brocantage = new google.maps.LatLng(44.049658, 8.21903);
        var Compasso = new google.maps.LatLng(44.049658, 8.21903)

        var myStyle =[
            {
                featureType: "poi",
                elementType: "labels",
                stylers: [
                      { visibility: "off" }
                ]
            }
        ];

        var mapOptions = {
                center: Compasso,
                mapTypeId: google.maps.MapTypeId.HYBRID,
                zoom: 17,
                zoomControlOptions: {
                                    position:         google.maps.ControlPosition.LEFT_CENTER
                },
                mapTypeControlOptions: {
                                    position:     google.maps.ControlPosition.RIGHT_BOTTOM
                },
                styles: myStyle
              };
        var map = new google.maps.Map(document.getElementById("map"), mapOptions);


        var contentString = 
            '<h5>Mercatino Brocantage</h5>'+
            '<p>Via Carloforte 52<br>' +
            '17031 Albenga (SV)<br>'+
            'Tel. + 39 334 8560445<br>'+
            'E-mail <a         href="mailto:brocantagebazar@gmail.com">brocantagebazar@gmail.com</a>'+
            '</p>';

        var infowindow = new google.maps.InfoWindow({
                content: contentString
            });

        var image = "http://www.mercatinobrocantage.com/images/blue-dot.png";

        var markerOptions = {
                position: Brocantage,
                map: map,
                title: 'Mercatino Brocantage',
                draggable: false,
                icon: image,
                animation: google.maps.Animation.DROP
            };      
        var marker = new google.maps.Marker(markerOptions);

        infowindow.open(map, marker);

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


        };
        google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
    #map {width: 100%; height: 600px;}
</style>

【问题讨论】：

查看控制台，您似乎需要清理一些 404。也许这会有所帮助？

标签： javascript wordpress google-maps

【解决方案1】：

好的，我刚问完问题就修好了。 Firebug 帮助我找到了涉及 img 选择器的 css 冲突。我不得不将此添加到代码中：

#map img {max-width:none;}

现在好了。

【讨论】：