Google 地图未在 HTML 中显示，但可以在 JS Fiddle 中显示

Question

我有一些代码我一直在 JSFiddle 中使用，并且已经设法让它完全按照我想要的方式运行。 JSFiddle 中的输出 window 给出了正确的输出，但是每当我尝试让代码在网页中工作时，地图永远不会显示。我尝试了几种方法，包括直接从 Chrome:

中的视图框架选项获取代码

<!DOCTYPE html>
<html>

<head>

  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">

  <script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>

    <link rel="stylesheet" type="text/css" href="/css/result-light.css">

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

  <style type="text/css">
     #map-canvas {
    width:800px;
    height:800px
}
  </style>

  <title></title>

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var map;
var infowindow;
var searchData = null;
var georssLayer;

myLatLng = new google.maps.LatLng(53.494170, -1.146462);
var mapOptions = {
    zoom: 9,
    center: myLatLng
}

var kmlURL = 'http://stashbox.org/1491090/proposed_school.kml'


map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
infowindow = new google.maps.InfoWindow();
service = new google.maps.places.PlacesService(map);

georssLayer = new google.maps.KmlLayer(kmlURL,{preserveViewport:true});
georssLayer.setMap(map);

//used pipes to convert kml to json and loaded it
$.ajax("http://pipes.yahoo.com/pipes/pipe.run?_id=10a81555228e77349570df1cc6823ed2&_render=json&urlinput1=" + kmlURL).done(function (data) {
    console.log('here')
    searchData=data.value.items[0].Document.Placemark //structrue of pipe
})

function createMarker(place) {
    var marker = new google.maps.Marker({
        map: map,
        position: place.geometry.location
    });

    google.maps.event.addListener(marker, 'click', function () {
        service.getDetails(place, function(result, status) {
              if (status != google.maps.places.PlacesServiceStatus.OK) {
                alert(status);
                return;
              }
              infowindow.setContent(result.name);
              infowindow.open(map, marker);
            });
        });
}

function createMarkerKML(place){
    var loc=place.Point.coordinates.split(",")
    var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(loc[1],loc[0])
    });
    google.maps.event.addListener(marker, 'click', function () {
        infowindow.setContent(place.name);
        infowindow.open(map, marker);
    })
}

function searchKML(request,callback){
    var ret=[]
    if(!searchData) return
    for(var i=0;i<searchData.length;i++){
        //insert distance search
        if( searchData[i].description.indexOf(request.keyword)!=-1 ||   //currently case sensitive
            searchData[i].name.indexOf(request.keyword)!=-1 ){
            ret.push(searchData[i])
        }
    }
    callback(ret)
}


function searchMap(str) {
    var request = {
        location: map.getCenter(),
        radius: '2500',
        keyword: str
    };
    service.radarSearch(request, callback); //normal search
    searchKML(request,function(results){
        for (var i = 0; i < results.length; i++) {
            createMarkerKML(results[i]);
        }
    })

}

function callback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
       console.log(results)
        for (var i = 0; i < results.length; i++) {
            createMarker(results[i]);
        }
    }
}

searchform.onsubmit = function (e) {
    e.preventDefault();
    searchMap(document.getElementById("search").value);

}

toggle.onclick = function () {
    if (toggle.value == "Hide KML Layer") {
        georssLayer.setMap(null)
        toggle.value = "Show KML Layer"
    } else {
        georssLayer.setMap(map)
        toggle.value = "Hide KML Layer"
    }

}
});//]]> 

</script>


</head>

<body>
  <form id="searchform">
    <input type="text" id="search" value="school" enabled/>
    <input type="submit" value="Search" />
</form>
<input type="button" value="Hide KML Layer" id="toggle" />
<div id="map-canvas"></div>

</body>

</html>

任何 help/ideas/suggestions 为什么我不能让它出现在 HTML 中？查看了几个不同的旧问题并尝试了一些建议，但遗憾的是仍然没有喜悦。如果有帮助，请使用 Windows 10 和最新的 Google Chrome 版本。

谢谢，谢

Answer 1

难道是 jQuery 没有加载？尝试改变

//code.jquery.com/jquery-1.10.1.js 至：

https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js

Google 地图未在 HTML 中显示，但可以在 JS Fiddle 中显示

Google Map not displaying in HTML but working on JS Fiddle

html

javascript

jquery

google-maps

jsfiddle