Google Map无法在HTML / JS网站中使用

您的代码中有很多错误，仅将这段HTML和Javascript混为一谈，很难弄清楚到底是什么错误。

1. 您是说“浏览器控制台中没有php或js错误”吗？如果有错误，我们希望看到它。:)

2. 您的JavaScript应该在<script></script>标记内，否则浏览器将假定此代码为纯文本。

3. 我将您的函数放入JSLint中，并经历了所有语法错误。我发现了几件事。首先，您可以map在JS开头附近定义var map;，因此您无需在此行var的init()函数后面加上关键字：var map = new google.maps.Map(mapElement, mapOptions);。其次，您不应该在数组的最后一个元素之后（或者如果数组中只有一个元素）放在逗号之后，例如在line中zoomControlOptions: {style: google.maps.ZoomControlStyle.DEFAULT,},。还有其他几个地方发生了这种情况。第三，在for循环中，没有必要var在条件内包含关键字。所以(i = 0; i < locations.length...代替(var i = 0; i < locations.length...。最后，永远不要像在这里那样在循环内声明变量：

   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 marker;
       var marker;
       var marker;
       var marker;
   

   一遍又一遍。每个范围只能有一个标记变量。我建议使用数组存储标记，如下所示：

   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();
   

   如果您使用此方法，我无法保证会成功，但是至少可以避免一些大错误，也许您可​​以进行一些调试。