Гиперссылка внутри моей карты Google InfoWindow не отображается правильно

Question

Ссылка функциональна, но не отображается, если я не выделяю ее, а затем вижу текст.

Это множественные маркеры.

var markers = [ 
     ['Joe Brown Park, New Orleans', 29.993345,-90.098104], 
     ['City Park, New Orleans', 30.030401,-89.966602], 
     ['Palace of Westminster, London', 30.020819,-90.040573] 
    ]; 

Это информационное окно. Все 3 моих ссылки невидимы, если я не выделил их.

var infoWindowContent = [ 

     [ 
     '<h3>"Named after 1 of the states largest independent oil producers, this park offers year-round events."</h3>' + 
     '<h3></h3>' + 
     '<h3><a href="http://nordc.org/parks/joe-w-brown-park/">Joe Brown Park</a></h3>' + 
     '</div>'], 
     [ 
     '<h3>"City Park, a 1,300 acre public park in New Orleans, Louisiana, is the 87th largest and 7th-most-visited urban public park in the United States."</h3>' + 
     '<h3></h3>' + 
     '<h3><a href="http://neworleanscitypark.com/">City Park</a></h3>' + 
     '</div>'], 
     [ 
     '<h3>"City Park, a 1,300 acre public park in New Orleans, Louisiana, is the 87th largest and 7th-most-visited urban public park in the United States."</h3>' + 
     '<h3></h3>' + 
     '<h3><a href="http://neworleanscitypark.com/">City Park</a></h3>' + 
     '</div>'] 

    ]; 

Я удалил их из заголовка, удалил и добавил одиночные/двойные кавычки. Я что-то упускаю?

Answer 1

Кажется, что текст не невидим, а цвет текста установлен на белый. Попробуйте явно указать цвет текста для информационного окна, например:

.gm-style .gm-style-iw, .gm-style .gm-style-iw a { 
    color: #000; 
} 

Пример

function initMap() { 
 
    var uluru = { lat: 29.993345, lng: -90.098104 }; 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
     zoom: 12, 
 
     center: uluru 
 
    }); 
 

 

 
    var markers = [ 
 
     ['Joe Brown Park, New Orleans', 29.993345, -90.098104], 
 
     ['City Park, New Orleans', 30.030401, -89.966602], 
 
     ['Palace of Westminster, London', 30.020819, -90.040573] 
 
    ]; 
 

 
    var infoWindowContent = [ 
 
     [ 
 
     '<h3>"Named after 1 of the states largest independent oil producers, this park offers year-round events."</h3>' + 
 
     '<h3></h3>' + 
 
     '<h3><a href="http://nordc.org/parks/joe-w-brown-park/">Joe Brown Park</a></h3>' + 
 
     '</div>'], 
 
     [ 
 
     '<h3>"City Park, a 1,300 acre public park in New Orleans, Louisiana, is the 87th largest and 7th-most-visited urban public park in the United States."</h3>' + 
 
     '<h3></h3>' + 
 
     '<h3><a href="http://neworleanscitypark.com/">City Park</a></h3>' + 
 
     '</div>'], 
 
      [ 
 
     '<h3>"City Park, a 1,300 acre public park in New Orleans, Louisiana, is the 87th largest and 7th-most-visited urban public park in the United States."</h3>' + 
 
     '<h3></h3>' + 
 
     '<h3><a href="http://neworleanscitypark.com/">City Park</a></h3>' + 
 
     '</div>'] 
 
    ]; 
 

 
    var infowindow = new google.maps.InfoWindow({ 
 
     content: '' 
 
    }); 
 

 

 
    markers.forEach(function (markerInfo, i) { 
 
     markerInfo.content = infoWindowContent[i][0]; 
 
     createMarker(map,infowindow, markerInfo); 
 
    }); 
 
    
 
} 
 

 

 
function createMarker(map,infoWindow,info) { 
 
    var marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(info[1], info[2]), 
 
     map: map, 
 
     title: info[0] 
 
    }); 
 
    marker.addListener('click', function() { 
 
     infoWindow.setContent(info.content); 
 
     infoWindow.open(map, marker); 
 
    }); 
 
    return marker; 
 
}

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

 
#map { 
 
    height: 100%; 
 
} 
 

 
.gm-style .gm-style-iw, .gm-style .gm-style-iw a { 
 
    color: #000; 
 
}

<div id="map"></div> 
 
<script async defer 
 
      src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>