谷歌地图 - 无法读取null的属性'offsetWidth'

时间:2016-07-25 19:57:55

标签: javascript wordpress google-maps

我已经阅读了一些关于此的文章,但我无法理解。这个one我试图初始化它,但是它杀死了地图,出现了一个白色的屏幕。

除了联系页面(包含地图的页面)之外,任何页面上的控制台都会显示错误。

这是我的 Javascript

中的代码
var latlng = new google.maps.LatLng(0, 0);
    var myOptions = {
        zoom: 14,
        center: latlng,
        scrollwheel: false,
        disableDefaultUI: true,
        draggable: false,
        keyboardShortcuts: false,
        disableDoubleClickZoom: false,
        noClear: true,
        scaleControl: false,
        panControl: false,
        streetViewControl: false,
        styles: [{"featureType":"landscape","stylers":[{"hue":"#FFBB00"},{"saturation":43.400000000000006},{"lightness":37.599999999999994},{"gamma":1}]},{"featureType":"road.highway","stylers":[{"hue":"#FFC200"},{"saturation":-61.8},{"lightness":45.599999999999994},{"gamma":1}]},{"featureType":"road.arterial","stylers":[{"hue":"#FF0300"},{"saturation":-100},{"lightness":51.19999999999999},{"gamma":1}]},{"featureType":"road.local","stylers":[{"hue":"#FF0300"},{"saturation":-100},{"lightness":52},{"gamma":1}]},{"featureType":"water","stylers":[{"hue":"#0078FF"},{"saturation":-13.200000000000003},{"lightness":2.4000000000000057},{"gamma":1}]},{"featureType":"poi","stylers":[{"hue":"#00FF6A"},{"saturation":-1.0989010989011234},{"lightness":11.200000000000017},{"gamma":1}]}],
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"), myOptions);
    var geocoder_map = new google.maps.Geocoder();
    var address = '11681 King Fahd Road, Al Mohammadiyah, 4047, Riyadh, Riyadh Province Saudi Arabia';
    geocoder_map.geocode({
        'address': address
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var image = "../wp-content/themes/rawafid-systems/assets/img/pin.svg";
            var marker = new google.maps.Marker({
                map: map,
                icon: image,
                position: map.getCenter()
            });
            var contentString = 'Tagline';
            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });
            // google.maps.event.addListener(marker, 'click', function() {
            //  infowindow.open(map, marker);
            // });
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });

HTML

<?php 
    $location = get_field('map_location');

    if( !empty($location) ):
    ?>
    <div id="map" class="acf-map featured-banner-container">
        <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div></div>
    <?php endif; ?>

以上代码用于仅我的联系页面正在使用的模板文件。我只能猜测它一直在寻找在其他页面上找到它,这就是它出错的原因。不确定。

这里没有提到“offsetWidth”。在控制台中,它说它来自:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>

我需要在javascript中修改哪些想法?如果这很重要,我会在页脚中加载此文件。

0 个答案:

没有答案