Javascript 谷歌地图画布上没有显示任何内容

我想把谷歌地图的东西放到我的网站上。此刻，你点击一个按钮，地图出现在页面的中间：

function showMap() {
    $('mapAndButton').setStyle('display', 'block');

    var map;
    var myOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map_canvas'),
            myOptions);
}

此代码复制自API网页上提供的教程。由于某种原因，它不起作用。贴图的渲染方式如下所示：

一个空的灰色盒子，而不是一张地图。盒子出现的事实，以及底部有一些谷歌的东西，意味着至少有些东西在工作。点击按钮几次，或者等待很长时间，都没有什么区别

---

可能是什么问题？

肯定缺少的是

{

函数showMap（）之后的一个左括号

可以进一步检查是否真正调用了

showMap（）

，例如在

中，以及行是否

<script type="text/javascript" 
        src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

---

已提供。

我认为发生此错误是因为页面上其他地方有一个旧的引用，引用了以前版本的google maps API。当我删除此引用，以便只加载最新版本的API时，地图呈现正确。

是否放大到一个非常大的灰色补丁？我不这样认为。这些坐标在其他地方使用时显示内容。缺少的括号在原始代码中不存在，它一定是在我复制到stackOverflow时出现的。