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

Question

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

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

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

    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>']

];

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

2

google-maps-markers hyperlink infowindow jquery php

Решение

По вопросам рекламы [email protected]

Accepted Answer

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

.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>

1

Другие решения

Других решений пока нет …

Источник