Javascript 添加谷歌地图“；未捕获类型错误：无法读取属性'；风格'；“无效”的定义；

我正在尝试使用asp.net将谷歌地图添加到我的网页。使用下面给出的代码，谷歌地图会显示几毫秒，然后消失。我检查了控制台中的元素，并显示以下消息-“未捕获类型错误：无法读取null的属性'style'。请引导我找到这个问题的解决方案

<script  type="text/javascript">
            var directionsDisplay;
            var directionsService = new google.maps.DirectionsService();

            function initialize() {
                directionsDisplay = new google.maps.DirectionsRenderer();
                var mapOptions = {
                    zoom: 7,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    center: new google.maps.LatLng(41.850033, -87.6500523)
                };
                var map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);
                directionsDisplay.setMap(map);
                directionsDisplay.setPanel(document.getElementById('directions-panel'));

                var control = document.getElementById('control');
                control.style.display = 'block';

    Uncaught TypeError: Cannot read property 'style' of null




                map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);
            }

            function calcRoute() {
                var start = document.getElementById('start').value;
                var end = document.getElementById('end').value;
                var request = {
                    origin: start,
                    destination: end,
                    travelMode: google.maps.TravelMode.DRIVING
                };
                directionsService.route(request, function (response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setDirections(response);
                    }
                });
            }

            google.maps.event.addDomListener(window, 'load', initialize);

        </script>

var方向显示；
var directionsService=new google.maps.directionsService（）；
函数初始化（）{
directionsDisplay=new google.maps.DirectionsRenderer（）；
变量映射选项={
缩放：7，
mapTypeId:google.maps.mapTypeId.ROADMAP，
中心：新google.maps.LatLng（41.850033，-87.6500523）
};
var map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
方向显示.setMap（地图）；
directions display.setPanel（document.getElementById（'directions-panel'）；
var control=document.getElementById（'control'）；
control.style.display='block'；
未捕获的TypeError:无法读取null的属性“style”
map.controls[google.maps.ControlPosition.TOP\u CENTER].push（控件）；
}
函数calcRoute（）{
var start=document.getElementById（'start'）.value；
var end=document.getElementById（'end'）.value；
var请求={
来源：start，
目的地:完，
travelMode:google.maps.travelMode.DRIVING
};
路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
方向显示。设置方向（响应）；
}
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

如果页面中不存在控件元素，则返回函数

If（control==null）return
缺少id为
控件的元素。行后：

var control = document.getElementById('control');

变量
control
得到值
null
，因此下一行

control.style.display = 'block';

产生的错误：

Uncaught TypeError: Cannot read property 'style' of null

要解决此问题，您必须使用id
control
向页面添加新元素，如：

<div id="control"></div>



如果你想在谷歌地图上添加自定义控件，请检查文档。
这不是很明显吗？它表示
控制
变量为空