php - Hyperlink inside of my Google map InfoWindow is not showing properly -
the link functional doesn't show unless highlight can see text.
these multiple markers.
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] ]; this info window content. 3 of links invisible unless highlight them.
var infowindowcontent = [ [ '<h3>"named after 1 of states largest independent oil producers, 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, 1,300 acre public park in new orleans, louisiana, 87th largest , 7th-most-visited urban public park in united states."</h3>' + '<h3></h3>' + '<h3><a href="http://neworleanscitypark.com/">city park</a></h3>' + '</div>'], [ '<h3>"city park, 1,300 acre public park in new orleans, louisiana, 87th largest , 7th-most-visited urban public park in united states."</h3>' + '<h3></h3>' + '<h3><a href="http://neworleanscitypark.com/">city park</a></h3>' + '</div>'] ]; i've removed them header, removed , added single/double quotes. missing something?
it seems text not invisible rather text color set white. try explicitly specify text color info window, example:
.gm-style .gm-style-iw, .gm-style .gm-style-iw { color: #000; } example
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 states largest independent oil producers, 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, 1,300 acre public park in new orleans, louisiana, 87th largest , 7th-most-visited urban public park in united states."</h3>' + '<h3></h3>' + '<h3><a href="http://neworleanscitypark.com/">city park</a></h3>' + '</div>'], [ '<h3>"city park, 1,300 acre public park in new orleans, louisiana, 87th largest , 7th-most-visited urban public park in 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 { color: #000; } <div id="map"></div> <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initmap"></script>
Comments
Post a Comment