CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3meteor
nhyne
nhyne

Reputation: 445

Google maps infoWindow shows text as white, can highlight to see content

I used this tutorial to set up my map: http://meteorcapture.com/how-to-create-a-reactive-google-map/

I used this example for the infoWindow: https://developers.google.com/maps/documentation/javascript/infowindows

I am now trying to show the title of a task when the user clicks on the marker. The infoWindow displays, but the text is white and can only be read if it is highlighted. I tried googling around for this but I couldn't find anything similar.

I'm using Meteor for development

Relevant code:

<div align = 'center' class = 'map-container' id = 'map'>
        {{> googleMap name = 'map' options = mapOptions}}
</div>


Template.currentTasks.onCreated(function() {
    GoogleMaps.ready('map', function(map) {
        Tasks.find().forEach(function(task) {
            if (task.location != null) {
                var marker = new google.maps.Marker({
                    draggable: false,
                    animation: google.maps.Animation.DROP,
                    position: task.location,
                    map: map.instance,
                    title: task.title,
                    id: document._id
                });

                var infoWindow = new google.maps.InfoWindow({
                    content: task.title
                });
                google.maps.event.addListener(marker, 'click', function() {
                    infoWindow.open(map.instance, marker);
                });   
            }
        })
    });

});

mapOptions: function() {
        if (GoogleMaps.loaded()) {
            return {
                //union lat lng is below, using wellesley for testing rn
                // center: new google.maps.LatLng(42.8177427, -73.9305222),
                center: new google.maps.LatLng(42.3170368, -71.2751508),
                zoom: 14
            };
        }
    }

I call GoogleMaps.load() in the onRendered function of the template the map is embedded in.

No matter what I put into the text field, regardless of whether it is hard coded or from another object, the infoWindow comes up as white text.

Upvotes: 4

Views: 1291

Answers (1)

nhyne
nhyne

Reputation: 445

Found color setting of rgb(255,255,255) {or close to it} in the CSS. Something related to a semantics-ui inverted object. In order to fix the issue, I commented out line 640 under .ui.primary.inverted.segment. 

color(255,255,255...

I haven't noticed any change in the other inverted parts through my project but I may not be using the same inverted design.

Upvotes: 1

Related Questions