0
我對簡單的HTML5着陸頁感到瘋狂。我也在這裏尋找答案。 的問題是，我的HTML頁面都在底部的接觸的模塊，它包括主網頁的代碼：HTML5中的Google地圖JavaScript
<!-- +++ START - Contact Right +++ -->
<div class="ms-section" id="right5">
<div class="map-info split-section">
<div id="map"></div>
</div>
</div>
<!-- +++ END - Contact Right +++ -->
</div>
<!-- CLOSE - RIGHT PART -->
這：
<!-- Main JS File -->
<script src="js/main-multi-scroll.js"></script>
我用手動和做圖getted .js文件，它列出如下：
// When the window has finished loading create our google map below
google.maps.event.addDomListener(window, 'load', init);
google.maps.event.addDomListener(window, 'resize', init);
function init() {
// Basic options for a simple Google Map
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=KEYVALUE&callback=initMap">
</script>
// The latitude and longitude to center the map (always required)
var center = new google.maps.LatLng(55.76197976545492,37.68354535102844);
// For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
var isDraggable = $(document).width() > 1024 ? true : false; // If document (your website) is wider than 1024px, isDraggable = true, else isDraggable = false
// For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
var mapOptions = {
// How zoomed in you want the map to start at (always required)
zoom: 18,
scrollwheel: false,
draggable: isDraggable,
center: center,
streetViewControl: true,
mapTypeControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
// How you would like to style the map.
// This is where you would paste any style found on Snazzy Maps.
styles: [
{
"featureType": "administrative.province",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "landscape",
"elementType": "all",
"stylers": [
{
"saturation": -100
},
{
"lightness": 65
},
{
"visibility": "on"
}
]
},
{
"featureType": "poi",
"elementType": "all",
"stylers": [
{
"saturation": -100
},
{
"lightness": 51
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.highway",
"elementType": "all",
"stylers": [
{
"saturation": -100
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.arterial",
"elementType": "all",
"stylers": [
{
"saturation": -100
},
{
"lightness": 30
},
{
"visibility": "on"
}
]
},
{
"featureType": "road.local",
"elementType": "all",
"stylers": [
{
"saturation": -100
},
{
"lightness": 40
},
{
"visibility": "on"
}
]
},
{
"featureType": "transit",
"elementType": "all",
"stylers": [
{
"saturation": -100
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"hue": "#006bff"
},
{
"lightness": "-10"
},
{
"saturation": "-92"
},
{
"gamma": "0.37"
}
]
},
{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#323a45"
}
]
},
{
"featureType": "water",
"elementType": "labels",
"stylers": [
{
"visibility": "on"
},
{
"lightness": -25
},
{
"saturation": -100
}
]
},
{
"featureType": "water",
"elementType": "labels.text",
"stylers": [
{
"color": "#4f5256"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#ffffff"
}
]
}
]
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions, center);
var locations = [
['<h6>ул. Радио, д. 24, к.1</h6><p>БЦ Яуза Тауэр<br><i class="fa fa-coffee"></i> Приходите к нам в гости!</p>', 55.76197976545492,37.68354535102844, 1],
];
var infowindow = new google.maps.InfoWindow();
var marker, i;
var image = 'img/v-logo-map.png';
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: image
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
};
})(marker, i));
}
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
，我已經通過手工做的一切和谷歌地圖在我的網站不顯示的問題。我也爲Google Maps API授權請求加油，生成它並插入代碼，這根本沒有幫助我。
如果你想仔細檢查 - http://vernizone.ru
希望你能幫助我解決它 - 我必須去與這個網站的量產版。
你是如何設置地圖div的大小？請提供證明問題的[mcve]。 – geocodezip