谷歌地图，地图不显示在html上

Question

这是我的代码

<fieldset>
            <script src="https://maps.googleapis.com/maps/api/js"></script>
            <script>
                function initialize() {
                    var map_canvas = document.getElementById('map_canvas');
                    var map_options = {
                        center: new google.maps.LatLng(44.5403, -78.5463),
                        zoom: 8,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    }
                    var map = new google.maps.Map(map_canvas, map_options);
                }
                google.maps.event.addDomListener(window, 'load', initialize);
            </script>
            <div id="map_canvas"></div>
            <input type="submit" name="submit" class="submit action-button" value="Submit" />
        </fieldset>

如本官方教程所述

https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map

但 HTML 上什么也没有出现。我的意思是我什么都看不到地图在哪里？ 请问我错过了什么？我什至已经添加了负载

Answer 1

您是否从您的代码中注意到了 div 标签： <div id="map_canvas"></div> 你需要一个等效的 CSS 样式定义

#map_canvas {
    width: 500px;
    height: 400px;
}

这是一个工作示例： http://jsfiddle.net/R8sdj/