地图昨天工作正常,但今天不显示。我已经尝试了一切,即改变旧的脚本和使用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&libraries=geometry&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>
可能您已达到最大访问数