全局变量google未声明

时间:2015-12-13 15:49:26

标签: javascript google-maps web

嗨社区:)这是我的第一个问题...我刚刚在我的大学开始了一个项目,我在下面的代码中遇到了很多问题,但我只想在谷歌地图javascript中获得帮助,为什么谷歌变量未申报,我如何解决这个问题并通知我,如果我的javascript链接是正确的..你的时间

    <!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="newcss.css">
        <link  rel="stylesheet" type="text/css" href="bootstrap.min.css">
        <link rel="stylesheet" type="text/javascript" href="jquery-1.11.3.min">




        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDWDpusIBDYxjoYKh_r5uupBcd2vU3KXJY&callback=initMap" async defer></script><!-- Google Maps API -->
        <script>
            var map;    // Google map object (global variable)

            // Initialize and display a google map
            function initMap()
            {
                // Create a Google coordinate object for where to center the map
                var latlngDC = new google.maps.LatLng(38.8951, -77.0367);   // Coordinates of Washington, DC (area centroid)

                // Map options for how to display the Google map
                var mapOptions = {zoom: 12, center: latlngDC};

                // Show the Google map in the div with the attribute id 'map-canvas'.
                map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            }

        </script>

    </head>




    <div class="container dynamicTile">
        <div class="row ">
            <div class="group_pos_row1">
                <div class="col-sm-4 col-xs-8">

                    <div id="tile7" class="tile">

                        <div class="carousel slide" data-ride="carousel">
                            <!-- Wrapper for slides -->
                            <div class="carousel-inner">
                                <div class="item active">
                                    <img src="http://handsontek.net/demoimages/tiles/gallery.png" class="img-responsive"/>
                                </div>
                                <div class="item">
                                    <img src="http://handsontek.net/demoimages/tiles/gallery2.png" class="img-responsive"/>
                                </div>
                                <div class="item">
                                    <img src="http://handsontek.net/demoimages/tiles/gallery3.png" class="img-responsive"/>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="col-sm-2 col-xs-4">
                    <div id="tile3" class="tile">

                        <div class="carousel slide" data-ride="carousel">
                            <!-- Wrapper for slides -->
                            <div class="carousel-inner">
                                <div class="item active">
                                    <img  src="http://2.bp.blogspot.com/_rpiNFFKB8DQ/TIkl0dm9d-I/AAAAAAAADdI/EwfJOMkqkP4/s400/Weekly+reading+book+boy.gif" alt="exercises"  class="img-responsive"/>

                                </div>
                                <div class="item">
                                    <img src="http://sites.psu.edu/siowfa14/wp-content/uploads/sites/13467/2014/10/1118284_orig.gif" class="img-responsive"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-2 col-xs-4">
                    <div id="tile4" class="tile">

                        <div class="carousel slide" data-ride="carousel">
                            <!-- Wrapper for slides -->
                            <div class="carousel-inner">
                                <div class="item active">
                                    <a href="https://www.facebook.com/%CE%88%CF%81%CE%B1%CF%83%CE%BC%CE%BF%CF%82-%CE%A6%CF%81%CE%BF%CE%BD%CF%84%CE%B9%CF%83%CF%84%CE%AE%CF%81%CE%B9%CE%BF-405469642829138/?fref=ts&__mref=message_bubble"><img src="http://handsontek.net/demoimages/tiles/facebook3.png" class="img-responsive"/></a>
                                </div>
                                <div class="item">
                                    <img src="http://handsontek.net/demoimages/tiles/facebook2.png" class="img-responsive"/>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div class="row">

            <div class="group_pos_row2">
                <div class="col-sm-4 col-xs-8">


                    <div id="map-canvas"></div>

                </div>                                    
            </div>




            <div class="col-sm-2 col-xs-4">
                <div id="tile8" class="tile">

                    <div class="carousel slide" data-ride="carousel">
                        <!-- Wrapper for slides -->
                        <div class="carousel-inner">
                            <div class="item active">
                                <img src="http://handsontek.net/demoimages/tiles/music.png" alt="Relevant textual alternative to the image" class="img-responsive"/>
                            </div>
                            <div class="item">
                                <img src="http://handsontek.net/demoimages/tiles/music2.png" alt="Relevant textual alternative to the image" class="img-responsive"/>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="col-sm-2 col-xs-4">
                <div id="tile9" class="tile">

                    <div class="carousel slide" data-ride="carousel">
                        <!-- Wrapper for slides -->
                        <div class="carousel-inner">
                            <div class="item active">
                                <img src="http://handsontek.net/demoimages/tiles/calendar.png" alt="Relevant textual alternative to the image" class="img-responsive"/>
                            </div>
                            <div class="item">
                                <img src="http://handsontek.net/demoimages/tiles/calendar2.png" alt="Relevant textual alternative to the image" class="img-responsive"/>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>



</html>

1 个答案:

答案 0 :(得分:0)

您需要移除第一个<script>并仅保留第二个传递Maps API密钥的地方,并将Init函数重命名为initMap,因为这是您的函数名称在第二个<script>元素末尾传递回调参数(callback = initMap)。

  1. 尝试删除您对<script src="https://maps.googleapis.com/maps/api/js

  2. 的第一次引用
  3. 将您的功能Init重命名为initMap