谷歌地图,地图不显示在HTML上

时间:2014-06-14 18:52:09

标签: javascript html google-maps google-maps-api-3 google-maps-markers

这是我的代码

<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上没有任何内容。我的意思是我什么都没看到地图? 我错过了什么?我已经添加了负载

1 个答案:

答案 0 :(得分:3)

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

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

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