信息窗口显示为空白

Question

I have this google map and everything works perfectly but the info windows are showing up as blank...

I've tried to use a for loop but I think I put it in the wrong place because the map just goes completely blank. I tried a foreach loop and the same thing happens. I also tried to move the infowindow variable inside the for each loop with no luck.

// 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);
    });
});
}

Answer 1

There is only one InfoWindow , but multiple markers, you need to set the content of the InfoWindow with the appropriate content for that marker. (also, locations.content is undefined, locations is an array of objects that have a .content property)

// Show all markers
locations.forEach(function(location) {
  var marker = new google.maps.Marker({
    position: location.position,
    map: map
  });

  marker.addListener('click', function() {
      infowindow.setContent(location.content)
      infowindow.open(map, marker);
  });
});

proof of concept fiddle

code snippet:

 // 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', }); // 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, map: map }); marker.addListener('click', function() { infowindow.setContent(location.content) infowindow.open(map, marker); }); }); } 

 html, body, #map { height: 100%; margin: 0; padding: 0; } 

 <div id="map"></div> <!-- Replace the value of the key parameter with your own API key. --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>