谷歌地圖不工作在HTML/JS網站

-1

我很困惑，因爲昨天一切正常，但今天谷歌地圖不顯示在網站上。我沒有更改任何代碼，並且在瀏覽器控制檯中存在php或js錯誤。以下是完整的代碼：谷歌地圖不工作在HTML/JS網站

<section class="row map_row"> 
     <div class="container"> 
      <h3 class="contact_section_title">Street Address:</h3> 
      <div id="gmap" class="row m0"></div> 
     </div> 
    </section> 

// google map start 
    (function($) { 
     "use strict"; 

     google.maps.event.addDomListener(window, 'load', init); 

     var map; 

     function init() { 
      var mapOptions = { 
       center: new google.maps.LatLng(26.201833, 78.159359), 
       zoom: 13, 
       zoomControl: true, 
       zoomControlOptions: { 
        style: google.maps.ZoomControlStyle.DEFAULT, 
       }, 
       panControl: true, 
       disableDoubleClickZoom: false, 
       mapTypeControl: false, 
       mapTypeControlOptions: { 
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, 
       }, 
       scaleControl: true, 
       scrollwheel: false, 
       streetViewControl: false, 
       draggable : true, 
       overviewMapControl: false, 
       mapTypeId: google.maps.MapTypeId.ROADMAP, 
       styles: [ 
//     { featureType: "administrative", elementType: "all", stylers: [ { visibility: "on" }, { saturation: -100 }, { lightness: 20 } ] }, 
//     { featureType: "road", elementType: "all", stylers: [ { visibility: "on" }, { saturation: -100 }, { lightness: 40 } ] }, 
//     { featureType: "water", elementType: "all", stylers: [ { visibility: "on" }, { saturation: -10 }, { lightness: 30 } ] }, 
//     { featureType: "landscape.man_made", elementType: "all", stylers: [ { visibility: "simplified" }, { saturation: -60 }, { lightness: 10 } ] }, 
//     { featureType: "landscape.natural", elementType: "all", stylers: [ { visibility: "simplified" }, { saturation: -60 }, { lightness: 60 } ] }, 
//     { featureType: "poi", elementType: "all", stylers: [ { visibility: "off" }, { saturation: -100 }, { lightness: 60 } ] }, 
//     { featureType: "transit", elementType: "all", stylers: [ { visibility: "off" }, { saturation: -100 }, { lightness: 60 } ] } 
       ] 

      } 

      var mapElement = document.getElementById('gmap'); 
      var map = new google.maps.Map(mapElement, mapOptions); 

      var locations = [ 
       ['', 26.201833, 78.159359] 
      ]; 
      for (var i = 0; i < locations.length; i++) { 
       var marker = new google.maps.Marker({ 
        icon: 'images/map-marker.png', 
        animation: google.maps.Animation.BOUNCE, 
        position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
        map: map, 
       }); 
      } 


    })(jQuery) 
// google map end

請幫助我。我仍然在學習這樣的東西。

來源

2016-05-12 user3465481

您的代碼中存在很多錯誤，並且很難弄清楚只有將HTML和Javascript代碼片段合併爲一個代碼段時會發生什麼錯誤。

你的意思是說「有[被]瀏覽器控制檯沒有 PHP或JS錯誤」？如果出現錯誤，我們希望看到它。 :)
您的JavaScript應該在<script></script>標籤內，否則瀏覽器會認爲此代碼僅爲文本。

我把你的函數放入JSLint，並檢查了所有的語法錯誤。我發現了幾件事情。首先，在您的JS的開頭附近定義map，使用var map;，因此您不需要在此行上的init()函數後面有var關鍵字：var map = new google.maps.Map(mapElement, mapOptions);。其次，不應在數組的最後一個元素之後放置逗號（或者如果數組中只有一個元素），例如在行zoomControlOptions: {style: google.maps.ZoomControlStyle.DEFAULT,},中。發生了其他幾個地方。第三，在您的for循環中，沒有必要在條件中包含關鍵字var。所以(i = 0; i < locations.length...而不是(var i = 0; i < locations.length...。唱完

var marker; 
    var marker; 
    var marker; 
    var marker;

：最後，你永遠不應該在一個循環中聲明一個變量，你在這裏做：

for (var i = 0; i < locations.length; i++) { 
    var marker = new google.maps.Marker({ 
     icon: 'images/map-marker.png', 
     animation: google.maps.Animation.BOUNCE, 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
     map: map, 
    }); 
}

這在技術上是喜歡寫作。每個範圍只應有一個標記變量。我會建議使用一個數組來存儲你的標誌，就像這樣：

var markers = []; 
for (i = 0; i < locations.length; i++) { 
    markers.push(new google.maps.Marker({ 
     icon: 'images/map-marker.png', 
     animation: google.maps.Animation.BOUNCE, 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
     map: map 
    }); 
}

這裏是所有的JavaScript後，我的編輯：

function loadMap() { 
    "use strict"; 

    google.maps.event.addDomListener(window, 'load', init); 

    function init() { 
    var mapOptions = { 
     center: new google.maps.LatLng(26.201833, 78.159359), 
     zoom: 13, 
     zoomControl: true, 
     zoomControlOptions: { 
     style: google.maps.ZoomControlStyle.DEFAULT 
     }, 
     panControl: true, 
     disableDoubleClickZoom: false, 
     mapTypeControl: false, 
     mapTypeControlOptions: { 
     style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR 
     }, 
     scaleControl: true, 
     scrollwheel: false, 
     streetViewControl: false, 
     draggable: true, 
     overviewMapControl: false, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     styles: [{ 
     featureType: "administrative", 
     elementType: "all", 
     stylers: [{ 
      visibility: "on" 
     }, { 
      saturation: -100 
     }, { 
      lightness: 20 
     }] 
     }, { 
     featureType: "road", 
     elementType: "all", 
     stylers: [{ 
      visibility: "on" 
     }, { 
      saturation: -100 
     }, { 
      lightness: 40 
     }] 
     }, { 
     featureType: "water", 
     elementType: "all", 
     stylers: [{ 
      visibility: "on" 
     }, { 
      saturation: -10 
     }, { 
      lightness: 30 
     }] 
     }, { 
     featureType: "landscape.man_made", 
     elementType: "all", 
     stylers: [{ 
      visibility: "simplified" 
     }, { 
      saturation: -60 
     }, { 
      lightness: 10 
     }] 
     }, { 
     featureType: "landscape.natural", 
     elementType: "all", 
     stylers: [{ 
      visibility: "simplified" 
     }, { 
      saturation: -60 
     }, { 
      lightness: 60 
     }] 
     }, { 
     featureType: "poi", 
     elementType: "all", 
     stylers: [{ 
      visibility: "off" 
     }, { 
      saturation: -100 
     }, { 
      lightness: 60 
     }] 
     }, { 
     featureType: "transit", 
     elementType: "all", 
     stylers: [{ 
      visibility: "off" 
     }, { 
      saturation: -100 
     }, { 
      lightness: 60 
     }] 
     }] 

    }; 

    var mapElement = document.getElementById('gmap'); 
    var map = new google.maps.Map(mapElement, mapOptions); 

    var locations = [ 
     ['', 26.201833, 78.159359] 
    ]; 
    var markers = []; 
    for (i = 0; i < locations.length; i++) { 
     markers.push(new google.maps.Marker({ 
     icon: 'images/map-marker.png', 
     animation: google.maps.Animation.BOUNCE, 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
     map: map 
     })); 
    } 
    } 
} 
    loadMap();

如果你使用這個我不能保證你成功，但至少在出現大錯誤的情況下，也許你可以進行一些調試。

來源

2016-05-12 17:47:51 SpyderScript

感謝隊友花時間給我提供的固定代碼。我對代碼進行了分割，忘記在頁腳中包含PHP包含文件，這是我整整一天的小錯誤。但是仍然要感謝編碼相同代碼的最先進的方法。 <！ - 這個網站是否只是在提問時提出反對意見？ - > – user3465481

我不認爲downvote的原因是你問的問題，但更多的是你問它的方式。我們希望看到更多關於您經歷的內容，您已經嘗試解決的問題以及您已經完成了對此問題的研究的證據。在SO上提出問題是最後的選擇 - 不是第一道防線。你的問題的語法和格式也很重要 - 如果我不得不猜測，英語不是你的第一語言？在你的問題中有很多語法錯誤...如果你想我可以做一個編輯。歡迎您提供幫助。 :) – SpyderScript

謝謝:) ..是的，英語不是我的主要語言，這就是爲什麼這使混亂。但是我仍然用語法來使某些東西可讀：D – user3465481

谷歌地圖不工作在HTML/JS網站

回答

相關問題