生成谷歌地图错误

Question

我有以下脚本应该生成一个基本的谷歌地图：

$(document).ready(function(){

    var weatherAPP = {

        generateMap: function(){

            console.log('called');

            var mapHolder = document.getElementById('#map');
            var mapOptions = {
                center: new google.maps.LatLng(51.5072, 0.1275),
                zoom:10,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(mapHolder, mapOptions);

        }

    };

    weatherAPP.generateMap();

});

console.log('called')被称为罚款。

我已按顺序包含以下脚本：

• google maps api
• jquery的
• 脚本

但是我收到以下错误：

Uncaught TypeError: Cannot read property 'offsetWidth' of null 

Answer 1

由于您的元素是：<section id="map"></section>

var mapHolder = document.getElementById('#map');

应该是

var mapHolder = document.getElementById('map');

你必须把它与使用前缀#声明id的jQuery或CSS混淆。

在document.getElementById中，您必须按原样放置元素ID，而不是前缀

Answer 2

我正在发生，因为你在getElementById中有＃（＆＃39; #map＆＃39;）;

如果删除＃，它将起作用：）

http://jsfiddle.net/zbyqoaju/1/

var weatherAPP = {

        generateMap: function () {

            console.log('called');

            var mapHolder = document.getElementById('map');
            var mapOptions = {
                center: new google.maps.LatLng(51.5072, 0.1275),
                zoom: 10,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(mapHolder, mapOptions);

        }

    };

    weatherAPP.generateMap();