让谷歌地图出现在特定的div中

时间:2014-02-16 14:16:19

标签: javascript jquery html css

我有一个非常简单的网站,其中包含一组div,包括横幅(全宽),左侧菜单(200px)和右侧内容(600px)。我有五个菜单项,使用简单的jquery脚本在单击时加载右侧内容。一切都很好,除了谷歌地图,不会打开。当我转到localhost / contact.html它加载正常,所以功能就在那里。它只是不喜欢嵌入整个文档/ html。

菜单代码:

    $(document).ready(function() {
    $("#about").on("click", function() {
        $("#content").load("about-us.html");
    });
    $("#candidate").on("click", function() {
        $("#content").load("candidate.html");
    });
    $("#client").on("click", function() {
        $("#content").load("client.html");
    });
    $("#meet").on("click", function() {
        $("#content").load("meet.html");
    });
    $("#contact").on("click", function() {
        $("#content").load("contact.html");
    });
});

contact.html代码

<body>
    <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>
        var myCenter = new google.maps.LatLng(51.510252,-0.086585);

            function initialize()
            {
                var mapProp = {
                    center: myCenter,
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

                var marker = new google.maps.Marker({
                    position: myCenter,
                    animation:google.maps.Animation.BOUNCE
                });

                marker.setMap(map);
            }
    </script>

       <table border="3px">
            <tr><td align="right">
                    t: <br>
                    1st Floor<br>
                    Regis House<br>
                    45 King William Street<br>
                London, EC4R 9AN
                </td>
                <td id="googleMap" width="300px" height="300px">
                </td>
            </tr>
        </table>
        <script type="text/javascript">initialize('googleMap');</script>
</body>

只是嗅到了镀铬并看到了这个错误:

Uncaught ReferenceError: google is not defined VM500:1
(anonymous function) VM500:1
o.extend.globalEval jquery-2.1.0.min.js:2
o.fn.extend.domManip jquery-2.1.0.min.js:3
o.fn.extend.append jquery-2.1.0.min.js:3
(anonymous function) jquery-2.1.0.min.js:3
o.access jquery-2.1.0.min.js:2
o.fn.extend.html jquery-2.1.0.min.js:3
(anonymous function) jquery-2.1.0.min.js:4
j jquery-2.1.0.min.js:2
k.fireWith jquery-2.1.0.min.js:2
x jquery-2.1.0.min.js:4
(anonymous function)

1 个答案:

答案 0 :(得分:0)

我是个笨蛋...这最终很容易解决..鉴于我是主要的一个组成部分,简单的js正在切换出我只需将API调用放入主索引。 HTML而不是孩子......所以感动了这个

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

进入index.html ...一切正常......现在我有一个不同的问题,在使用Firefox时将地图置于其中... IE和Chrome很好用代码但是Firefox将地图构建到整个页面..