Jquery 谷歌地图停止工作

我的地图脚本不工作。我在两个单独的页面上有两个地图，它们起初是工作的，但现在我已经做了一些CSS更改（与地图无关），它不再显示。当我在浏览器中检查它时，容器仍然在那里，但它就是不显示。这里是我的测试服务器www.tru纹身.amdesigns.studio

   Here it is on my html page

   <!-- ============ Google Map - START ============ -->

            <div id="map"></div>

            <!-- ============ Google Map - END ============ -->

    And this is the jquery

  function init() {

    // Google Map options
    // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions

var mapOptions = {
        draggable               : isMobile() ? false : true,
        streetViewControl       : false,
        disableDoubleClickZoom  : true,
        scrollwheel             : false,
        zoom                    : mapData.zoom,
        center                  : new google.maps.LatLng(33.009378,-96.842931),
        styles: [{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"administrative.locality","elementType":"geometry","stylers":[{"visibility":"on"},{"color":"#cfc8be"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#cfc8be"},{"visibility":"on"}]}]
    },

    // Create the Google Map using the map container and options defined above
    map = new google.maps.Map(document.getElementById('map'), mapOptions);

    var marker = new google.maps.Marker({
        position    : mapOptions.center:  {lat:-34.397, lgn: 150.644},
        map         : map,
        icon        : mapData.marker
    });

这是我的脚本和api密钥。我两页都有。

   Here it is on my html page

   <!-- ============ Google Map - START ============ -->

            <div id="map"></div>

            <!-- ============ Google Map - END ============ -->

    And this is the jquery

  function init() {

    // Google Map options
    // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions

var mapOptions = {
        draggable               : isMobile() ? false : true,
        streetViewControl       : false,
        disableDoubleClickZoom  : true,
        scrollwheel             : false,
        zoom                    : mapData.zoom,
        center                  : new google.maps.LatLng(33.009378,-96.842931),
        styles: [{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"administrative.locality","elementType":"geometry","stylers":[{"visibility":"on"},{"color":"#cfc8be"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#cfc8be"},{"visibility":"on"}]}]
    },

    // Create the Google Map using the map container and options defined above
    map = new google.maps.Map(document.getElementById('map'), mapOptions);

    var marker = new google.maps.Marker({
        position    : mapOptions.center:  {lat:-34.397, lgn: 150.644},
        map         : map,
        icon        : mapData.marker
    });

在我的html页面上
这是jquery
函数init（）{
//谷歌地图选项
//有关更多选项，请参见：https://developers.google.com/maps/documentation/javascript/reference#MapOptions
变量映射选项={
draggable:isMobile（）？false:true，
街景控制：错误，
禁用双击缩放：真，
滚轮：错误，
缩放：mapData.zoom，
中心：新google.maps.LatLng（33.009378，-96.842931），
样式：[{“featureType”：“administrative”，“elementType”：“labels.text.fill”，“stylers”：[{“color”：“#44444444”}]，{“featureType”：“administrative.Location”，“elementType”：“geometry”，“stylers”：[{“visibility”：“on”}，{“color”：“#cfc8be”}]，{“featureType”：“all”，“stylers”：[{“color”：“color”：“F2F2F2F2F2F2F2F2”}]，{“featureType”：“poi”，“elementType”：“all”，“样式器”：[{“可见性”：“关闭”}]，{“特征类型”：“道路”，“要素类型”：“所有”，“样式器”：[{“饱和度”：-100}，{“亮度”：45}]，{“特征类型”：“道路.公路”，“元素类型”：“所有”，“样式器”：[{“可见性”：“简化”}]，{“特征类型”：“道路.干线”，“要素类型”：“标签.图标”，“样式器”：[{“可见性”：“关闭”}，{“交通”，“要素类型”：”所有、样式器：[{“可见性”：“关闭”}、{“特性类型”：“水”、“元素类型”：“所有”、“样式器”：[{“颜色”：“#cfc8be”}、{“可见性”：“打开”}]
},
//使用上面定义的地图容器和选项创建Google地图
map=new google.maps.map（document.getElementById（'map'），mapOptions）；
var marker=new google.maps.marker({
位置：mapOptions.center:{lat:-34.397，lgn:150.644}，
地图：地图，
图标：mapData.marker
});

}

尝试更改

   Here it is on my html page

   <!-- ============ Google Map - START ============ -->

            <div id="map"></div>

            <!-- ============ Google Map - END ============ -->

    And this is the jquery

  function init() {

    // Google Map options
    // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions

var mapOptions = {
        draggable               : isMobile() ? false : true,
        streetViewControl       : false,
        disableDoubleClickZoom  : true,
        scrollwheel             : false,
        zoom                    : mapData.zoom,
        center                  : new google.maps.LatLng(33.009378,-96.842931),
        styles: [{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"administrative.locality","elementType":"geometry","stylers":[{"visibility":"on"},{"color":"#cfc8be"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#cfc8be"},{"visibility":"on"}]}]
    },

    // Create the Google Map using the map container and options defined above
    map = new google.maps.Map(document.getElementById('map'), mapOptions);

    var marker = new google.maps.Marker({
        position    : mapOptions.center:  {lat:-34.397, lgn: 150.644},
        map         : map,
        icon        : mapData.marker
    });

var marker = new google.maps.Marker({
   position    : mapOptions.center:  {lat:-34.397, lgn: 150.644},
   map         : map,
   icon        : mapData.marker
});

到

   Here it is on my html page

   <!-- ============ Google Map - START ============ -->

            <div id="map"></div>

            <!-- ============ Google Map - END ============ -->

    And this is the jquery

  function init() {

    // Google Map options
    // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions

var mapOptions = {
        draggable               : isMobile() ? false : true,
        streetViewControl       : false,
        disableDoubleClickZoom  : true,
        scrollwheel             : false,
        zoom                    : mapData.zoom,
        center                  : new google.maps.LatLng(33.009378,-96.842931),
        styles: [{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"administrative.locality","elementType":"geometry","stylers":[{"visibility":"on"},{"color":"#cfc8be"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#cfc8be"},{"visibility":"on"}]}]
    },

    // Create the Google Map using the map container and options defined above
    map = new google.maps.Map(document.getElementById('map'), mapOptions);

    var marker = new google.maps.Marker({
        position    : mapOptions.center:  {lat:-34.397, lgn: 150.644},
        map         : map,
        icon        : mapData.marker
    });

---

可能是您的css在映射的css代码之前被破坏了..这是我的映射css#map{height:500px；}.gmnoprint img{max width:none；}