У меня есть эта карта Google, и все работает отлично, но информационные окна отображаются пустыми ...
Я пытался использовать цикл for
, но, думаю, я его неправильно указалместо, потому что карта просто пуста.Я пробовал цикл foreach
, и происходит то же самое.Я также безуспешно пытался переместить переменную infowindow
внутри каждого цикла.
// Map variable
var map;
// Create and style the map
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: new google.maps.LatLng(25.7819743, -80.2006986),
mapTypeId: 'roadmap',
styles: [{"featureType":"all","elementType":"geometry","stylers":[{"visibility":"off"}]},{"featureType":"all","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"administrative.country","elementType":"labels.text","stylers":[{"visibility":"off"},{"color":"#ff0000"}]},{"featureType":"administrative.province","elementType":"labels.text.fill","stylers":[{"visibility":"on"},{"invert_lightness":!0},{"color":"#ffffff"}]},{"featureType":"administrative.locality","elementType":"labels.text.fill","stylers":[{"visibility":"on"},{"lightness":"-46"},{"color":"#ffffff"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#d8a361"},{"visibility":"on"}]},{"featureType":"road","elementType":"geometry","stylers":[{"visibility":"on"},{"color":"#c48c46"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#cf944b"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"visibility":"on"},{"color":"#cf944b"}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#c48c46"}]},{"featureType":"road.local","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#c48c46"},{"lightness":"4"}]}]
}
);
// Custom Icons
var iconBase = 'img/';
var icons = {
main: {
icon: iconBase + 'map-icon.png'
}
};
// Icon Locations and infowindow content
var locations = [
{
position: new google.maps.LatLng(25.7819743, -80.2006986),
type: 'main',
content: 'This is a simple test'
}, {
position: new google.maps.LatLng(25.6543563, -80.4034173),
type: 'main',
content: 'This is a another test'
}, {
position: new google.maps.LatLng(25.7589664, -80.4495347),
type: 'main',
content: 'This is a just another test'
}, {
position: new google.maps.LatLng(25.7905606, -80.3455961),
type: 'main',
content: 'This is yet another simple test'
}, {
position: new google.maps.LatLng(25.7611357, -80.3293175),
type: 'main',
content: 'This is a simple test'
}, {
position: new google.maps.LatLng(25.8501614, -80.2520588),
type: 'main',
content: 'This is a simple test'
}, {
position: new google.maps.LatLng(25.653536, -80.3311367),
type: 'main',
content: 'This is a simple test'
}
];
var infowindow = new google.maps.InfoWindow({
content: locations.content
});
// Show all markers
locations.forEach(function(location) {
var marker = new google.maps.Marker({
position: location.position,
icon: icons[location.type].icon,
map: map
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
});
}