谷歌地图api突然停止显示地图

Question

地图昨天工作正常，但今天它没有显示。我已经尝试了一切，即更改旧脚本和使用api键，但地图没有显示。这是代码，我还附加了javascript代码我正在使用地图。

(function($) {
"use strict";

// Custom options for map
var options = {
        zoom : 14,
        mapTypeId : 'Styled',
        disableDefaultUI: true,
        mapTypeControlOptions : {
            mapTypeIds : [ 'Styled' ]
        }
    };
var styles = [{
    stylers : [ {
        hue : "#cccccc"
    }, {
        saturation : -100
    }]
}, {
    featureType : "road",
    elementType : "geometry",
    stylers : [ {
        lightness : 100
    }, {
        visibility : "simplified"
    }]
}, {
    featureType : "road",
    elementType : "labels",
    stylers : [ {
        visibility : "on"
    }]
}, {
    featureType: "poi",
    stylers: [ {
        visibility: "off"
    }]
}];

var newMarker = null;
var markers = [];

// json for properties markers on map
var props = [{
    title : 'Modern Residence in New York',
    image : '1-1-thmb.png',
    type : 'For Sale',
    price : '$1,550,000',
    address : '39 Remsen St, Brooklyn, NY 11201, USA',
    bedrooms : '3',
    bathrooms : '2',
    area : '3430 Sq Ft',
    position : {
        lat : 40.696047,
        lng : -73.997159
    },
    markerIcon : "marker-green.png"
}, 
    markerIcon : "marker-green.png"
}, {
    title : 'Hauntingly Beautiful Estate',
    image : '2-1-thmb.png',
    type : 'For Rent',
    price : '$1,750,000',
    address : '169 Warren St, Brooklyn, NY 11201, USA',
    bedrooms : '2',
    bathrooms : '2',
    area : '4430 Sq Ft',
    position : {
        lat : 40.702189,
        lng : -73.995098
    },
    markerIcon : "marker-green.png"
}, {
    title : 'Sophisticated Residence',
    image : '3-1-thmb.png',
    type : 'For Sale',
    price : '$1,340,000',
    address : '38-62 Water St, Brooklyn, NY 11201, USA',
    bedrooms : '2',
    bathrooms : '3',
    area : '2640 Sq Ft',
    position : {
        lat : 40.687417,
        lng : -73.982653
    },
    markerIcon : "marker-green.png"
}, {
    title : 'House With a Lovely Glass-Roofed Pergola',
    image : '4-1-thmb.png',
    type : 'For Sale',
    price : '$1,930,000',
    address : 'Wunsch Bldg, Brooklyn, NY 11201, USA',
    bedrooms : '3',
    bathrooms : '2',
    area : '2800 Sq Ft',
    position : {
        lat : 40.694120,
        lng : -73.974413
    },
    markerIcon : "marker-green.png"
}, {
    title : 'Luxury Mansion',
    image : '5-1-thmb.png',
    type : 'For Rent',
    price : '$2,350,000',
    address : '95 Butler St, Brooklyn, NY 11231, USA',
    bedrooms : '2',
    bathrooms : '2',
    area : '2750 Sq Ft',
    position : {
        lat : 40.682665,
        lng : -74.000934
    },
    markerIcon : "marker-green.png"
}];

// custom infowindow object
var infobox = new InfoBox({
    disableAutoPan: false,
    maxWidth: 202,
    pixelOffset: new google.maps.Size(-101, -285),
    zIndex: null,
    boxStyle: {
        background: "url('images/infobox-bg.png') no-repeat",
        opacity: 1,
        width: "202px",
        height: "245px"
    },
    closeBoxMargin: "28px 26px 0px 0px",
    closeBoxURL: "",
    infoBoxClearance: new google.maps.Size(1, 1),
    pane: "floatPane",
    enableEventPropagation: false
});

// function that adds the markers on map
var addMarkers = function(props, map) {
    $.each(props, function(i,prop) {
        var latlng = new google.maps.LatLng(prop.position.lat,prop.position.lng);
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon: new google.maps.MarkerImage( 
                'images/' + prop.markerIcon,
                null,
                null,
                null,
                new google.maps.Size(36, 36)
            ),
            draggable: false,
            animation: google.maps.Animation.DROP,
        });
        var infoboxContent = '<div class="infoW">' +
                                '<div class="propImg">' +
                                    '<img src="images/prop/' + prop.image + '">' +
                                    '<div class="propBg">' +
                                        '<div class="propPrice">' + prop.price + '</div>' +
                                        '<div class="propType">' + prop.type + '</div>' +
                                    '</div>' +
                                '</div>' +
                                '<div class="paWrapper">' +
                                    '<div class="propTitle">' + prop.title + '</div>' +
                                    '<div class="propAddress">' + prop.address + '</div>' +
                                '</div>' +
                                '<div class="propRating">' +
                                    '<span class="fa fa-star"></span>' +
                                    '<span class="fa fa-star"></span>' +
                                    '<span class="fa fa-star"></span>' +
                                    '<span class="fa fa-star"></span>' +
                                    '<span class="fa fa-star-o"></span>' +
                                '</div>' +
                                '<ul class="propFeat">' +
                                    '<li><span class="fa fa-moon-o"></span> ' + prop.bedrooms + '</li>' +
                                    '<li><span class="icon-drop"></span> ' + prop.bathrooms + '</li>' +
                                    '<li><span class="icon-frame"></span> ' + prop.area + '</li>' +
                                '</ul>' +
                                '<div class="clearfix"></div>' +
                                '<div class="infoButtons">' +
                                    '<a class="btn btn-sm btn-round btn-gray btn-o closeInfo">Close</a>' +
                                    '<a href="single.html" class="btn btn-sm btn-round btn-green viewInfo">View</a>' +
                                '</div>' +
                             '</div>';

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infobox.setContent(infoboxContent);
                infobox.open(map, marker);
            }
        })(marker, i));

        $(document).on('click', '.closeInfo', function() {
            infobox.open(null,null);
        });

        markers.push(marker);
    });
}

var map;
var windowHeight;
var windowWidth;
var contentHeight;
var contentWidth;
var isDevice = true;

// calculations for elements that changes size on window resize
var windowResizeHandler = function() {
    windowHeight = window.innerHeight;
    windowWidth = $(window).width();
    contentHeight = windowHeight - $('#header').height();
    contentWidth = $('#content').width();

    $('#leftSide').height(contentHeight);
    $('.closeLeftSide').height(contentHeight);
    $('#wrapper').height(contentHeight);
    $('#mapView').height(contentHeight);
    $('#content').height(contentHeight);
    setTimeout(function() {
        $('.commentsFormWrapper').width(contentWidth);
    }, 300);

    if (map) {
        google.maps.event.trigger(map, 'resize');
    }

    // Add custom scrollbar for left side navigation
    if(windowWidth > 767) {
        $('.bigNav').slimScroll({
            height : contentHeight - $('.leftUserWraper').height()
        });
    } else {
        $('.bigNav').slimScroll({
            height : contentHeight
        });
    }
    if($('.bigNav').parent('.slimScrollDiv').size() > 0) {
        $('.bigNav').parent().replaceWith($('.bigNav'));
        if(windowWidth > 767) {
            $('.bigNav').slimScroll({
                height : contentHeight - $('.leftUserWraper').height()
            });
        } else {
            $('.bigNav').slimScroll({
                height : contentHeight
            });
        }
    }

    // reposition of prices and area reange sliders tooltip
    var priceSliderRangeLeft = parseInt($('.priceSlider .ui-slider-range').css('left'));
    var priceSliderRangeWidth = $('.priceSlider .ui-slider-range').width();
    var priceSliderLeft = priceSliderRangeLeft + ( priceSliderRangeWidth / 2 ) - ( $('.priceSlider .sliderTooltip').width() / 2 );
    $('.priceSlider .sliderTooltip').css('left', priceSliderLeft);

    var areaSliderRangeLeft = parseInt($('.areaSlider .ui-slider-range').css('left'));
    var areaSliderRangeWidth = $('.areaSlider .ui-slider-range').width();
    var areaSliderLeft = areaSliderRangeLeft + ( areaSliderRangeWidth / 2 ) - ( $('.areaSlider .sliderTooltip').width() / 2 );
    $('.areaSlider .sliderTooltip').css('left', areaSliderLeft);
}

var repositionTooltip = function( e, ui ){
    var div = $(ui.handle).data("bs.tooltip").$tip[0];
    var pos = $.extend({}, $(ui.handle).offset(), { 
                    width: $(ui.handle).get(0).offsetWidth,
                    height: $(ui.handle).get(0).offsetHeight
                });
    var actualWidth = div.offsetWidth;

    var tp = {left: pos.left + pos.width / 2 - actualWidth / 2}
    $(div).offset(tp);

    $(div).find(".tooltip-inner").text( ui.value );
}

windowResizeHandler();
$(window).resize(function() {
    windowResizeHandler();
});

setTimeout(function() {
    $('body').removeClass('notransition');

    map = new google.maps.Map(document.getElementById('mapView'), options);
    var styledMapType = new google.maps.StyledMapType(styles, {
        name : 'Styled'
    });

    map.mapTypes.set('Styled', styledMapType);
    map.setCenter(new google.maps.LatLng(40.6984237,-73.9890044));
    map.setZoom(14);

    if ($('#address').length > 0) {
        newMarker = new google.maps.Marker({
            position: new google.maps.LatLng(40.6984237,-73.9890044),
            map: map,
            icon: new google.maps.MarkerImage( 
                'images/marker-new.png',
                null,
                null,
                // new google.maps.Point(0,0),
                null,
                new google.maps.Size(36, 36)
            ),
            draggable: true,
            animation: google.maps.Animation.DROP,
        });

        google.maps.event.addListener(newMarker, "mouseup", function(event) {
            var latitude = this.position.lat();
            var longitude = this.position.lng();
            $('#latitude').text(this.position.lat());
            $('#longitude').text(this.position.lng());
        });
    }

    addMarkers(props, map);
}, 300);

if(!(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch)) {
    $('body').addClass('no-touch');
    isDevice = false;
}

// Header search icon transition
$('.search input').focus(function() {
    $('.searchIcon').addClass('active');
});
$('.search input').blur(function() {
    $('.searchIcon').removeClass('active');
});

// Notifications list items pulsate animation
$('.notifyList a').hover(
    function() {
        $(this).children('.pulse').addClass('pulsate');
    },
    function() {
        $(this).children('.pulse').removeClass('pulsate');
    }
);

// Exapnd left side navigation
var navExpanded = false;
$('.navHandler, .closeLeftSide').click(function() {
    if(!navExpanded) {
        $('.logo').addClass('expanded');
        $('#leftSide').addClass('expanded');
        if(windowWidth < 768) {
            $('.closeLeftSide').show();
        }
        $('.hasSub').addClass('hasSubActive');
        $('.leftNav').addClass('bigNav');
        if(windowWidth > 767) {
            $('.full').addClass('m-full');
        }
        windowResizeHandler();
        navExpanded = true;
    } else {
        $('.logo').removeClass('expanded');
        $('#leftSide').removeClass('expanded');
        $('.closeLeftSide').hide();
        $('.hasSub').removeClass('hasSubActive');
        $('.bigNav').slimScroll({ destroy: true });
        $('.leftNav').removeClass('bigNav');
        $('.leftNav').css('overflow', 'visible');
        $('.full').removeClass('m-full');
        navExpanded = false;
    }
});

// functionality for map manipulation icon on mobile devices
$('.mapHandler').click(function() {
    if ($('#mapView').hasClass('mob-min') || 
        $('#mapView').hasClass('mob-max') || 
        $('#content').hasClass('mob-min') || 
        $('#content').hasClass('mob-max')) {
            $('#mapView').toggleClass('mob-max');
            $('#content').toggleClass('mob-min');
    } else {
        $('#mapView').toggleClass('min');
        $('#content').toggleClass('max');
    }


$('#autocomplete').autocomplete({
    source: ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"],
    focus: function (event, ui) {
        var label = ui.item.label;
        var value = ui.item.value;
        var me = $(this);
        setTimeout(function() {
            me.val(value);
        }, 1);
    }
});

$('#tags').tagsInput({
    'height': 'auto',
    'width': '100%',
    'defaultText': 'Add a tag',
});

$('#datepicker').datepicker();

// functionality for autocomplete address field
if ($('#address').length > 0) {
    var address = document.getElementById('address');
    var addressAuto = new google.maps.places.Autocomplete(address);

    google.maps.event.addListener(addressAuto, 'place_changed', function() {
        var place = addressAuto.getPlace();

        if (!place.geometry) {
            return;
        }
        if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
        } else {
            map.setCenter(place.geometry.location);
        }
        newMarker.setPosition(place.geometry.location);
        newMarker.setVisible(true);
        $('#latitude').text(newMarker.getPosition().lat());
        $('#longitude').text(newMarker.getPosition().lng());

        return false;
    });
}

$('input, textarea').placeholder();

})(jQuery);

<div id="wrapper">
        <div id="mapView">
            <div class="mapPlaceholder"><span class="fa fa-spin fa-spinner"></span> Loading map...</div>
        </div>
        <div id="content">
            <div class="filter">
                <h1 class="osLight">Filter your results</h1>
                <a href="#" class="handleFilter"><span class="icon-equalizer"></span></a>
                <div class="clearfix"></div>
                <form class="filterForm">
                    <!--<div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 formItem">

                </ul>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>

    <!--<script src="js/jquery-1.11.3.min.js"></script>-->
    <!--<script src="js/price-range.js"></script>-->
    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/jquery-ui-touch-punch.js"></script>
    <script src="js/jquery.placeholder.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/jquery.touchSwipe.min.js"></script>
    <script src="js/jquery.slimscroll.min.js"></script>
    <script src="http://maps.googleapis.com/maps/api/js?sensor=true&amp;libraries=geometry&amp;libraries=places" type="text/javascript"></script>
    <script src="js/infobox.js"></script>
    <script src="js/jquery.tagsinput.min.js"></script>
    <script src="js/bootstrap-datepicker.js"></script>
    <script src="js/app.js" type="text/javascript"></script>
</body>

Answer 1

也许你达到了格言的最大数量