無法獲得JSFiddle上班

我試圖使用谷歌地圖實現搜索功能，並遇到了this jsfiddle。無法獲得JSFiddle上班

但是，當我試圖用我的網頁實現它時，它無法在JSFiddle上加載相同的方式。

我正在使用Netbeans IDE，並創建了一個HTML5項目。這是我的第一個html項目，所以我不喜歡js/html集成。

下面是的jsfiddle代碼由於需求

function initialize() { 
 

 
    var markers = []; 
 
    var map = new google.maps.Map(document.getElementById('map-canvas'), { 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 

 
    var defaultBounds = new google.maps.LatLngBounds(
 
    new google.maps.LatLng(-33.8902, 151.1759), 
 
    new google.maps.LatLng(-33.8474, 151.2631)); 
 
    map.fitBounds(defaultBounds); 
 

 
    // Create the search box and link it to the UI element. 
 
    var input = /** @type {HTMLInputElement} */ 
 
    (
 
     document.getElementById('pac-input')); 
 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 
 

 
    var searchBox = new google.maps.places.SearchBox(
 
    /** @type {HTMLInputElement} */ 
 
    (input)); 
 

 
    // Listen for the event fired when the user selects an item from the 
 
    // pick list. Retrieve the matching places for that item. 
 
    google.maps.event.addListener(searchBox, 'places_changed', function() { 
 

 
    var places = searchBox.getPlaces(); 
 

 
    for (var i = 0, marker; marker = markers[i]; i++) { 
 
     marker.setMap(null); 
 
    } 
 

 
    markers = []; 
 
    var bounds = new google.maps.LatLngBounds(); 
 

 
    for (var i = 0, place; place = places[i]; i++) { 
 

 
     // Create a marker for each place. 
 
     var marker = new google.maps.Marker({ 
 
     map: map, 
 
     title: place.name, 
 
     position: place.geometry.location 
 
     }); 
 

 
     markers.push(marker); 
 

 
     bounds.extend(place.geometry.location); 
 
    } 
 

 
    map.fitBounds(bounds); 
 
    }); 
 
} 
 

 
initialize();

#map-canvas { 
 
    height: 400px; 
 
    width: 600px; 
 
} 
 
.controls { 
 
    margin-top: 16px; 
 
    border: 1px solid transparent; 
 
    border-radius: 2px 0 0 2px; 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    height: 32px; 
 
    outline: none; 
 
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); 
 
} 
 
#pac-input { 
 
    background-color: #fff; 
 
    padding: 0 11px 0 13px; 
 
    width: 400px; 
 
    font-family: Roboto; 
 
    font-size: 15px; 
 
    font-weight: 300; 
 
    text-overflow: ellipsis; 
 
} 
 
#pac-input:focus { 
 
    border-color: #4d90fe; 
 
    margin-left: -1px; 
 
    padding-left: 14px; 
 
    /* Regular padding-left + 1. */ 
 
    width: 401px; 
 
} 
 
.pac-container { 
 
    font-family: Roboto; 
 
} 
 
#type-selector { 
 
    color: #fff; 
 
    background-color: #4d90fe; 
 
    padding: 5px 11px 0px 11px; 
 
} 
 
#type-selector label { 
 
    font-family: Roboto; 
 
    font-size: 13px; 
 
    font-weight: 300; 
 
}

<div id="map-canvas"></div> 
 
<input id="pac-input" class="controls" type="text" placeholder="Search Box">

即使我張貼同一代碼的jsfiddle到網站上的代碼段，它似乎沒有，甚至負荷。

爲了避免redundency，我只會發布我的html文件，因爲CSS和JS與jsfiddle鏈接相同。（Mapper.js - >包含小提琴代碼的js文件）

<!DOCTYPE html> 
<html> 

<title>Google Maps with a Table</title> 

<link rel="shortcut icon" href=""> 

<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<script type="text/javascript" src="js/libs/jquery/jquery.js"></script> 
<script type="text/javascript" src="js/libs/jqueryui/jquery-ui.js"></script> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>  

<link type="text/css" rel="stylesheet" href="css/basecss.css"> 

<body> 

    <div id="map-canvas"></div> 
    <input id="pac-input" class="controls" type="text" placeholder="Search Box"> 
    <script type="text/javascript" src="js/Mapper.js"></script> 


</body> 
</html>

最後，這就是我的網頁的樣子。注意谷歌地圖與JSFiddle的不同之處。

編輯 - 忘記了NetBeans的向我展示一個錯誤

Uncaught TypeError: Cannot read property 'SearchBox' of undefined (15:08:11:023 | error, javascript) 
at initialize (public_html/js/Mapper.js:19:43)

來源

2015-10-14 Eric G

錯誤暗示谷歌地圖庫沒有加載。

您不是將html api源url從HTML呈現爲文本。我認爲你的網址應該使用&而不是&。

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

還從jsFiddle的外部資源中缺少libraries=places。

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

來源

2015-10-14 19:16:18

改變了這一切，但仍然得到了相同的結果和錯誤。另外，JSFiddle如何加載谷歌地圖，因爲它沒有任何參考腳本？ –

左邊是外部鏈接部分。點擊它顯示加載到項目中的庫。 –

好的發現了問題，回答我的問題。感謝您的幫助 –

問題是有一個外部庫加載在側邊欄，我沒有檢查。

更改此腳本

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

到

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

來源

2015-10-14 19:27:49

無法獲得JSFiddle上班

回答

相關問題