谷歌地图不工作在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网站

回答

相关问题