Javascript 未捕获类型错误：无法读取属性'；x'；未定义的谷歌地图

我正试图用以下代码在网页中使用GoogleMapAPI

网页有两个字段地址，地理位置字段。 输入地址，更改事件将更新地图 带着地址。将在地址处放置一个标记。 如果用户需要移动标记，他们可以移动标记和地理位置 字段将自动更新

然后，当我运行此代码时，会出现以下错误：

Uncaught TypeError: Cannot read property 'x' of undefined     at Av (common.js:150)

下面是Javascript代码：

 function googleMapAdmin() {

        var geocoder = new google.maps.Geocoder();
        var map;
        var marker;

        var self = {
            initialize: function() {
                var lat = 0;
                var lng = 0;
                var zoom = 2;
                // set up initial map to be world view. also, add change
                // event so changing address will update the map
                existinglocation = self.getExistingLocation();
                if (existinglocation) {
                    lat = existinglocation[0];
                    lng = existinglocation[1];
                    zoom = 18;
                }

                var latlng = new google.maps.LatLng(lat,lng);
                var myOptions = {
                  zoom: zoom,
                  center: latlng,
                  mapTypeId: google.maps.MapTypeId.HYBRID
                };
                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                if (existinglocation) {
                    self.setMarker(latlng);
                }

                $("#id_address").change(function() {self.codeAddress();});
            },

            getExistingLocation: function() {
                var geolocation = $("#id_geolocation").val();
                if (geolocation) {
                    return geolocation.split(',');
                }
            },

            codeAddress: function() {
                var address = $("#id_address").val();
                geocoder.geocode({'address': address}, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        var latlng = results[0].geometry.location;
                        map.setCenter(latlng);
                        map.setZoom(18);

                        self.setMarker(latlng);
                        self.updateGeolocation(latlng);
                    } else {
                        alert("Geocode was not successful for the following reason: " + status);
                    }
                });
            },

            setMarker: function(latlng) {
                if (marker) {
                    self.updateMarker(latlng);
                } else {
                    self.addMarker({'latlng': latlng, 'draggable': true});
                }
            },

            addMarker: function(Options) {
                marker = new google.maps.Marker({
                    map: map,
                    position: Options.latlng
                });

                var draggable = Options.draggable || false;
                if (draggable) {
                    self.addMarkerDrag(marker);
                }
            },

            addMarkerDrag: function() {
                marker.setDraggable(true);
                google.maps.event.addListener(marker, 'dragend', function(new_location) {
                    self.updateGeolocation(new_location.latLng);
                });
            },

            updateMarker: function(latlng) {
                marker.setPosition(latlng);
            },

            updateGeolocation: function(latlng) {
                $("#id_geolocation")
                    .val(latlng.lat() + "," + latlng.lng())
                    .trigger('change');
            }
        }

        return self;
    }

下面是HTML代码：

<div class="form-row field-middle_name" style="padding-bottom: 28px; margin-bottom: 10px;">
            <div>
                    <label for="id_middle_name">Search Address:</label>
                    <div class="row">
                         <div class="col-md-3">
                        <input type="text" class="form-control" name="address" id="id_address" >
                      </div>    

            </div>

    </div>


    <div class="map_canvas_wrapper">
        <div id="map_canvas"></div>
    </div>





    <div class="form-row field-middle_name">
            <div>
                    <label for="id_middle_name">Geolocation:</label>
                    <div class="row">
                         <div class="col-md-3">
                        <input type="text" class="form-control" name="geolocation" id="id_geolocation">
                      </div>    

            </div>

    </div>

搜索地址：
地理位置：

下面是CSS代码：

<style media="screen" type="text/css">
#id_address {width: 40em;}
.map_canvas_wrapper {margin-left: 106px;}
#map_canvas {width: 100%; height: 40em;}
</style>

#id_地址{宽度：40em；}
.map_canvas_wrapper{左边距：106px；}
#地图画布{宽度：100%；高度：40em；}

您的控制台中还有其他错误吗？并且是您根据错误从common.js发布的javascript，如果是，哪一行是150？未捕获类型错误：无法读取Av（common.js:150）at.sv..k.Ii（common.js:205）at Object的未定义属性“x”。ux.trigger（js？key={api key}}:104）at ay（map.js:14）at Zx的未定义属性“x”。k.fe（map.js:45）at Object={{api key}:104）在Qv（common.js:160）在{Pv.F（common.js:215）在htmldevelment.（js？key={api key}:36）确保在你的地图javascript之前加载你的HTML。否则谷歌地图js找不到

#map_canvas

。所以在页脚中添加你的javascript请提供一个示例来说明错误。只运行发布的代码“有效”，我没有看到报告的错误。您的控制台中还有其他错误吗？您从common.js发布的javascript是否与错误一致？如果是，哪一行是150？未捕获的TypeError:无法读取Av（common.js:150）at.sv..k.Ii（common.js:205）at Object的未定义属性“x”。uu.x.trigger（js？key={api key}}:104）在ay（map.js:14）在Zx.x.k.fe（map.js:45）在Object.x.trigger（js？key={api key}:104）在Qv（common.js:160）在u.Pv.F（common.js:215）在HtmlLevel.（js？key={api key}:36）确保在地图javascript之前加载HTML。否则Google maps JS找不到

#map_canvas

。因此，请在页脚中添加javascript。请提供一个示例来演示错误。仅运行发布的代码“起作用”，我看不到报告的错误。