CODEWITHSUNDEEP
javascripttextgoogle-maps-api-3colorsinfowindow
Greg
Greg

Reputation: 21

InfoWindow Text Color Change

I am a musician with fairly poor knowledge of coding and API. A while ago I cobbled together a maps section for my bands website http://www.rovingcrows.com/gigs.html (down the bottom). It worked great for ages, but now for some reason the text has turned white inside my infowindows. I'v had a good search and can not find a fix I understand or have successfully implemented. I maintain the site by simply copying and pasting 1 piece of code which I longer remember quite how it works. For a year now I've just been changing basic variable names and details for each new gig I add. The "gig by gig" code is below and just repeats for each gig.

var oct10silp=new google.maps.LatLng(52.536939,-2.808834);
var oct10silm=new google.maps.Marker({position:oct10silp,});
oct10silm.setMap(map);
var oct10sili = new google.maps.InfoWindow({
      content:"October 10, Silvester Horne Institute, Church Stretton"
    });
google.maps.event.addListener(oct10silm, 'click', function() {
  oct10sili.open(map,oct10silm);
});

is it possible to add a simple line or variable to this code to make it work again?

Thanks very much for your time!

Greg

Edit: Here is the full code. stripped down to 2 gigs, you get the idea.

<script>

var myCenter=new google.maps.LatLng(52.633375,-1.691036);

function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:6,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

      var oct10silp=new google.maps.LatLng(52.536939,-2.808834);
      var oct10silm=new google.maps.Marker({
        position:oct10silp,});
        oct10silm.setMap(map);
      var oct10sili = new google.maps.InfoWindow({
          content:"October 10, Silvester Horne Institute, Church Stretton"});
      google.maps.event.addListener(oct10silm, 'click', function() {
      oct10sili.open(map,oct10silm);});

      var oct11chapp=new google.maps.LatLng(51.37975,-2.360497);
      var oct11chapm=new google.maps.Marker({
        position:oct11chapp,});
        oct11chapm.setMap(map);
      var oct11chapi = new google.maps.InfoWindow({
          content:"October 11, Chapel Arts Centre, Bath"});
      google.maps.event.addListener(oct11chapm, 'click', function() {
      oct11chapi.open(map,oct11chapm);});

}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Upvotes: 1

Views: 3684

Answers (1)

Greg
Greg

Reputation: 21

For those with the same issue.

The div for the map "googleMap" was taking its font colour from my CSS stylesheet.

To sort this i added class="AnyUnusedClassName" to my div, then added this to my master style sheet.

.AnyUnusedClassName {
color: #000000;
}

Upvotes: 1

Related Questions