Javascript 谷歌地图在HTML/JS网站中不起作用_Javascript_Google Maps

Javascript 谷歌地图在HTML/JS网站中不起作用

javascript google-maps

Javascript 谷歌地图在HTML/JS网站中不起作用,javascript,google-maps,Javascript,Google Maps,我在这里感到困惑，因为昨天一切正常，但今天谷歌地图没有显示在网站上。我没有更改任何代码，浏览器控制台中有php或js错误。以下是完整代码： <section class="row map_row"> <div class="container"> <h3 class="contact_section_title">Street Address:</h3> <div id="gma

我在这里感到困惑，因为昨天一切正常，但今天谷歌地图没有显示在网站上。我没有更改任何代码，浏览器控制台中有php或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


街道地址：
//谷歌地图开始
（函数（$）{
“严格使用”；
google.maps.event.addDomListener（窗口'load'，init）；
var映射；
函数init（）{
变量映射选项={
中心：新google.maps.LatLng（26.201833378.159359），
缩放：13，
动物控制：对，
ZoomControl选项：{
样式：google.maps.ZoomControlStyle.DEFAULT，
},
泛控制：对，
禁用双击缩放：false，
mapTypeControl:false，
mapTypeControlOptions：{
样式：google.maps.MapTypeControlStyle.HORIZONTAL_BAR，
},
scaleControl：对，
滚轮：错误，
街景控制：错误，
真的，
overviewMapControl:错误，
mapTypeId:google.maps.mapTypeId.ROADMAP，
样式：[
//{featureType:“administrative”，elementType:“all”，样式器：[{visibility:“on”}，{saturation:-100}，{lightness:20}]}，
//{featureType:“road”，elementType:“all”，样式：[{visibility:“on”}，{saturation:-100}，{lightness:40}]}，
//{featureType:“水”，elementType:“所有”，样式：[{visibility:“on”}，{saturation:-10}，{lightness:30}]}，
//{featureType:“景观.人造”，elementType:“所有”，样式：[{visibility:“simplified”}，{saturation:-60}，{lightness:10}]}，
//{featureType:“景观.自然”，elementType:“所有”，样式：[{visibility:“simplified”}，{saturation:-60}，{lightness:60}]}，
//{featureType:“poi”，elementType:“all”，样式器：[{visibility:“off”}，{saturation:-100}，{lightness:60}]，
//{featureType:“transit”，elementType:“all”，样式：[{visibility:“off”}，{saturation:-100}，{lightness:60}]
]
}
var mapElement=document.getElementById（'gmap'）；
var map=new google.maps.map（mapElement，mapOptions）；
变量位置=[
['', 26.201833, 78.159359]
];
对于（变量i=0；i


请帮帮我。我仍在学习这些东西。
您的代码中有很多错误，如果只将这段HTML和Javascript混为一谈，很难找出到底是什么错误
您的意思是说“浏览器控制台中没有php或js错误”？如果有错误，我们希望看到它。：）
您的JavaScript应该在
标记中，否则浏览器将假定此代码只是文本
我将您的函数放入并检查了所有语法错误。我发现了几件事。首先，您使用var-map；
在JS开头附近定义map
，因此您不需要在这一行的init（）
函数之后加上var-map=new google.maps.map（mapElement，mapOptions）；
。其次，不应该在数组的最后一个元素（或者如果数组中只有一个元素）后面加逗号，例如在您的行ZoomControl选项：{style:google.maps.ZoomControl.DEFAULT，}，
。还有其他几个地方发生了这种情况。第三，在for
循环中，没有必要在条件中包含关键字var
。因此（i=0；i
而不是（var i=0；i
。最后，您不应该像这里那样在循环中声明变量：
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
    });
}

var标记=[]；
对于（i=0；i

以下是我编辑后的所有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();

函数加载映射（）{
“严格使用”；
google.maps.event.addDomListener（窗口'load'，init）；
函数init（）{
变量映射选项={
中心：新google.maps.LatLng（26.201833378.159359），
缩放：13，
动物控制：对，
ZoomControl选项：{
样式：google.maps.ZoomControlStyle.DEFAULT
},
泛控制：对，
禁用双击缩放：false，
mapTypeControl:false，
mapTypeControlOptions：{
样式：google.maps.MapTypeControlStyle.HORIZONTAL\u栏
},
scaleControl：对，
滚轮：错误，
街景控制：错误，
真的，
overviewMapControl:错误，
mapTypeId:google.maps.mapTypeId.ROADMAP，
风格：[{
featureType:“管理”，
元素类型：“全部”，
样式：[{
能见度：“开”
}, {
饱和度：-100
}, {
亮度：20
}]
}, {
特色类型：“道路”，
元素类型：“全部”，
样式：[{
能见度：“开”
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();