1

我有一个谷歌地图 html 页面。它在 localhost 下的开发中运行良好，但是当我尝试上网时，我在 infobox.js 文件中得到 Google undefined ，这行：

this.extend(InfoBubble, google.maps.OverlayView);

我已加载 api 密钥，并在加载 infobox.js 文件之前调用它。我添加了 callback=initialize 以查看它是否可以工作，但不管有没有它都不起作用。这是html文件的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Activities</title> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAVVx45quD8ozW5SJZw-Lk_8QvVsXdWi2Y&sensor=false""></script> 
<script type="text/javascript" src="GoogleMaps/Scripts/downloadxml.js"></script>    
<script type="text/javascript" src="GoogleMaps/Scripts/infobubble_tabs.js"></script>
<style type="text/css">
html, body { height: 100%; } 
    .style1
    {
        width: 758px;
    }
    .style2
    {        
        width: 349px;
    }
#side_bar  
{
    height: 550px;
    width: 349px;   
    overflow:scroll;
}
</style>
    <script type="text/javascript">
    //<![CDATA[
        // this variable will collect the html which will eventually be placed in the side_bar 
        var side_bar_html = "";
        var gmarkers = [];
        var gicons = [];
        var map = null;

        var InfoBubble = new InfoBubble({
            maxWidth: 300
        });


        //defines icon if there is none stated
        gicons["red"] = new google.maps.MarkerImage("http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png",
      new google.maps.Size(20, 34),
      new google.maps.Point(0, 0),
      new google.maps.Point(9, 9));
        // Marker sizes are expressed as a Size of X,Y
        // where the origin of the image (0,0) is located
        // in the top left of the image.
        // Origins, anchor positions and coordinates of the marker
        // increase in the X direction to the right and in
        // the Y direction down.

        var iconImage = new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png',
        new google.maps.Size(20, 34),
      new google.maps.Point(0, 0),
      new google.maps.Point(9, 9));
        var iconShadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png',
      new google.maps.Size(37, 34),
      new google.maps.Point(0, 0),
      new google.maps.Point(9, 9));
        // Shapes define the clickable region of the icon.
        // The type defines an HTML &lt;area&gt; element 'poly' which traces out a polygon as a series of X,Y points. The final coordinate closes 
        //the poly by connecting to the first coordinate.
        var iconShape = {
            coord: [9, 0, 6, 1, 4, 2, 2, 4, 0, 8, 0, 12, 1, 14, 2, 16, 5, 19, 7, 23, 8, 26, 9, 30, 9, 34, 11, 34, 11, 30, 12, 26, 13, 24, 14, 21, 16, 18, 18, 16, 20, 12, 20, 8, 18, 4, 16, 2, 15, 1, 13, 0],
            type: 'poly'
        };

        //determines icon based on category
        //if no icon is defined
        function getMarkerImage(iconColor) {
            if ((typeof (iconColor) == "undefined") || (iconColor == null)) {
                iconColor = "red";
            }
            if (!gicons[iconColor]) {
                gicons[iconColor] = new google.maps.MarkerImage(iconColor,
      new google.maps.Size(20, 34),
      new google.maps.Point(0, 0),
      new google.maps.Point(9, 9));
            }
            return gicons[iconColor];
        }

        function category2icon(category) {
            var color = "red";
            switch (category) {
                case "Hike": color = "GoogleMaps/Images/HikingIcon.jpg";
                    break;
                case "KML": color = "GoogleMaps/Images/kml.gif";
                    break;
                case "Camping": color = "GoogleMaps/Images/camping.gif";
                    break;
                case "StatePark": color = "GoogleMaps/Images/statepark.jpg";
                    break;
                case "NationalPark": color = "GoogleMaps/Images/NationalPark_icon.png";
                    break;
                case "PointsofInterest": color = "GoogleMaps/Images/POI.png";
                    break;
                case "CountyPark": color = "GoogleMaps/Images/CountyPark_Icon.png";
                    break;
                case "Biking": color = "GoogleMaps/Images/Bike_icon.jpg";
                    break;
                case "FishWildlifeService": color = "GoogleMaps/Images/FishWildlife_icon.gif";
                    break;
                case "Kayak": color = "GoogleMaps/Images/kayaking.png";
                    break;
                case "Shelter": color = "GoogleMaps/Images/Shelter_Icon.png";
                    break;
                case "Parking": color = "GoogleMaps/Images/Parking_Lot_Icon.png";
                    break;               
                default: color = "red";
                    break;
            }
            return color;
        }

        gicons["Hike"] = getMarkerImage(category2icon("Hike"));
        gicons["KML"] = getMarkerImage(category2icon("KML"));
        gicons["Camping"] = getMarkerImage(category2icon("Camping"));
        gicons["StatePark"] = getMarkerImage(category2icon("StatePark"));
        gicons["NationalPark"] = getMarkerImage(category2icon("NationalPark"));
        gicons["PointsofInterest"] = getMarkerImage(category2icon("PointsofInterest"));
        gicons["CountyPark"] = getMarkerImage(category2icon("CountyPark"));
        gicons["Biking"] = getMarkerImage(category2icon("Biking"));
        gicons["FishWildlifeService"] = getMarkerImage(category2icon("FishWildlifeService"));
        gicons["Kayak"] = getMarkerImage(category2icon("Kayak"));
        gicons["Shelter"] = getMarkerImage(category2icon("Shelter"));
        gicons["Parking"] = getMarkerImage(category2icon("Parking"));

        // A function to create the marker and set up the event window
        function createMarker(latlng, name, url, detail_tab, notes_tab, map_tab, hiking_detail_tab, camping_detail_tab, category, state) {
            var contentString_detail = detail_tab;
            var contentString_notes = notes_tab;
            var contentString_maps = map_tab;
            var contentString_hiking_detail = hiking_detail_tab;
            var contentString_camping_detail = camping_detail_tab;
            var marker = new google.maps.Marker({
                position: latlng,
                icon: gicons[category],
                shadow: iconShadow,
                map: map,
                title: name,
                zIndex: Math.round(latlng.lat() * -100000) << 5
            });
            // === Store the category and name info as a marker properties ===
            marker.mycategory = category;
            marker.mystate = state;
            marker.myname = name;
            gmarkers.push(marker);

            // to open the info bubbles
            google.maps.event.addListener(marker, 'click', function () {
                InfoBubble.open(map, marker);
                InfoBubble.removeTab(4);
                InfoBubble.removeTab(3);
                InfoBubble.removeTab(2);
                InfoBubble.removeTab(1);
                InfoBubble.removeTab(0);
                if (category == "KML") {
                    window.open("" + url);
                }
                if (!category == "KML") {
                    InfoBubble.addTab('Details', contentString_detail);
                }
                if (!notes_tab == "") {
                    InfoBubble.addTab('Notes', contentString_notes);
                }
                if (!map_tab == "") {
                    switch (category) {
                        case "Camping": InfoBubble.addTab('Campsite Map', contentString_maps);
                            break;
                        case "Hike": InfoBubble.addTab('Trail Map', contentString_maps);
                            break;
                }
                }
                if (!hiking_detail_tab == "") {
                    InfoBubble.addTab('Trail Notes', contentString_hiking_detail);
                }
                if (!camping_detail_tab == "") {
                    InfoBubble.addTab('Campsite Notes', contentString_camping_detail);
                }
            });
        }

        // == shows all markers of a particular category, and ensures the checkbox is checked ==
        function show(category) {
            for (var i = 0; i < gmarkers.length; i++) {
                if (gmarkers[i].mycategory == category) {
                    gmarkers[i].setVisible(true);
                }
            }
            // == check the checkbox ==
            document.getElementById(category + "box").checked = true;
        }

        // == hides all markers of a particular category, and ensures the checkbox is cleared ==
        function hide(category) {
            for (var i = 0; i < gmarkers.length; i++) {
                if (gmarkers[i].mycategory == category) {
                    gmarkers[i].setVisible(false);
                }
            }
            // == clear the checkbox ==
            document.getElementById(category + "box").checked = false;
            // == close the info window, in case its open on a marker that we just hid
            InfoBubble.close();
        }

        // == a checkbox has been clicked ==
        function boxclick(box, category) {
            if (box.checked) {
                show(category);
            } else {
                hide(category);
            }
            // == rebuild the side bar
            makeSidebar();
        }

        function myclick(i) {
            google.maps.event.trigger(gmarkers[i], "click");
        }

        // == rebuilds the sidebar to match the markers currently displayed ==
        function makeSidebar() {
            var html = "";
            for (var i = 0; i < gmarkers.length; i++) {
                if (gmarkers[i].getVisible()) {
                    html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myname + '<\/a><br>';
                }
            }
            document.getElementById("side_bar").innerHTML = html;
        }

        function initialize() {
            var myOptions = {
                zoom: 8,
                center: new google.maps.LatLng(39.364032, -77.182159),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(document.getElementById("map"), myOptions);

            // Closes any open bubbles before opening new one
            google.maps.event.addListener(map, 'click', function () {                
                InfoBubble.close();
            });

            //Downloads the data from xml file
            // Reads the data the creates each tab
            downloadUrl("GoogleMaps/categories.xml", function (doc) {
                var xml = xmlParse(doc);
                var markers = xml.documentElement.getElementsByTagName("marker");

                for (var i = 0; i < markers.length; i++) {
                    // obtain the attribues of each marker
                    var lat = parseFloat(markers[i].getAttribute("lat"));
                    var lng = parseFloat(markers[i].getAttribute("lng"));
                    var point = new google.maps.LatLng(lat, lng);
                    var address = markers[i].getAttribute("address");
                    var city = markers[i].getAttribute("city");
                    var state = markers[i].getAttribute("state");
                    var zip = markers[i].getAttribute("zip");
                    var name = markers[i].getAttribute("name");
                    var notes = markers[i].getAttribute("notes");
                    var url = markers[i].getAttribute("url");
                    var hike_distance = markers[i].getAttribute("hike_distance");
                    var hike_trail_skill_level = markers[i].getAttribute("hike_trail_skill_level");
                    var hike_points_of_interest = markers[i].getAttribute("hike_points_of_interest");
                    var Camping_Amenities = markers[i].getAttribute("Camping_Amenities");
                    var Camping_Best_Sites = markers[i].getAttribute("Camping_Best_Sites");
                    var Camping_Notes = markers[i].getAttribute("Camping_Notes");
                    var image = markers[i].getAttribute("image");
                    var category = markers[i].getAttribute("category");
                    //Creates data for Detail Tab
                    var detail_tab = "";
                    detail_tab += "<b>" + name + "<\/b><p>";
                    detail_tab += address + "</br>";
                    detail_tab += city + ", " + state + " " + zip + "</br>";
                    detail_tab += '<br><a target="_blank" href="' + url + '">' + url + '</a>' + "</br>";
                    //Creates data for Notes Tab
                    var notes_tab = notes;
                    //Creates data for Maps Tab
                    var map_tab = "";
                    if (image) {
                        map_tab += '<br><a target="_blank" href="' + image + '">' + image + '</a>' + "</br>";
                    }
                    //Creates data for Hiking Detail Tab                    
                    var hiking_detail_tab = "";
                    if (hike_distance) {
                        hiking_detail_tab += "<b>Trail Distance: </b>" + hike_distance + " miles</br>";
                        hiking_detail_tab += "<b>Trail Skill Level: </b>" + hike_trail_skill_level + "</br>";
                        hiking_detail_tab += "<b>Points of Interest: </b>" + hike_points_of_interest + "</br>";
                    }
                    //Creates data for Camping Detail Tab                    
                    var camping_detail_tab = "";
                    if (Camping_Notes) {
                        camping_detail_tab += "<b>Amenities: </b>" + Camping_Amenities + "</br>";
                        camping_detail_tab += "<b>Best Sites: </b>" + Camping_Best_Sites + "</br>";
                        camping_detail_tab += "<b>Notes: </b>" + Camping_Notes + "</br>";
                    }
                   // var kml_tab = "";
                   // if (category=="KML) {
                    // create the marker
                    var marker = createMarker(point, name, url, detail_tab, notes_tab, map_tab, hiking_detail_tab, camping_detail_tab, category);
                }

                // == show or hide the categories initially ==
                show("Hike");
                show("KML");
                hide("Camping");
                hide("StatePark");
                hide("NationalPark");
                hide("PointsofInterest");
                hide("CountyPark");
                hide("Biking");
                hide("FishWildlifeService");
                hide("Kayak");
                hide("Shelter");
                hide("Parking");
                // == create the initial sidebar ==
                makeSidebar();
            });
        }


    //]]>
    </script>
  </head>
<body style="margin:0px; padding:0px;" onload="initialize()"> 
    <table border="1" >
      <tr>
        <td class="style1">
           <div id="map" style="width:978px; height: 596px"></div>
        </td>
        <td valign="top" style="text-decoration: underline; color: #4444ff;" 
              class="style2">
              <h4>To view a topo map, click map in the top left corner and select terrain from drop down menu</h4> 
           <div id="side_bar"></div>
        </td>
      </tr>
    </table>
    <form action="#">
      Hiking: <input type="checkbox" id="Hikebox" onclick="boxclick(this,'Hike')" /> &nbsp;&nbsp;
      Full Trail Map: <input type="checkbox" id="KMLbox" onclick="boxclick(this,'KML')" /> &nbsp;&nbsp;
      Trail Shelters: <input type="checkbox" id="Shelterbox" onclick="boxclick(this,'Shelter')" /> &nbsp;&nbsp;
      Trail Parking: <input type="checkbox" id="Parkingbox" onclick="boxclick(this,'Parking')" /> &nbsp;&nbsp;
      Camping: <input type="checkbox" id="Campingbox" onclick="boxclick(this,'Camping')" /> &nbsp;&nbsp;
      Biking: <input type="checkbox" id="Bikingbox" onclick="boxclick(this,'Biking')" /> &nbsp;&nbsp;
      Kayaking: <input type="checkbox" id="Kayakbox" onclick="boxclick(this,'Kayak')" /> &nbsp;&nbsp;
      <br />
      State Parks: <input type="checkbox" id="StateParkbox" onclick="boxclick(this,'StatePark')" />&nbsp;&nbsp;
      National Parks: <input type="checkbox" id="NationalParkbox" onclick="boxclick(this,'NationalPark')" />&nbsp;&nbsp;   
      County Park: <input type="checkbox" id="CountyParkbox" onclick="boxclick(this,'CountyPark')" /> &nbsp;&nbsp;
      <br />
      Points of Interest: <input type="checkbox" id="PointsofInterestbox" onclick="boxclick(this,'PointsofInterest')" /> &nbsp;&nbsp;  
      Fish and Wildlife Service: <input type="checkbox" id="FishWildlifeServicebox" onclick="boxclick(this,'FishWildlifeService')" /> &nbsp;&nbsp;      
      <br />
    </form>  




    <noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
      However, it seems JavaScript is either disabled or not supported by your browser. 
      To view Google Maps, enable JavaScript by changing your browser options, and then 
      try again.
    </noscript>
  </body>

</html>
4

1 回答 1

1

删除callback- 参数。当您使用回调参数时，将加载地图 API 的异步版本。

您不能在此处使用 API 的异步版本，因为 infobox.js 仅在 maps-API 已加载时才有效（异步版本可能会发生什么，但一定不能）。在这种特殊情况下，API 永远不会被加载，因为 body-element 仍然是未知的（但它必须是可用的，因为脚本试图将另一个 script-element 注入到 body 中）。

当您说没有回调参数它也不起作用时，肯定有另一个代码不会暴露的问题，请发布更多代码或演示/链接。

于 2013-07-19T21:23:23.350 回答