CODEWITHSUNDEEP
jquerygoogle-maps
Bing
Bing

Reputation: 3171

Remove the Close title attribute from Google Maps custom marker's infowindow

I'm trying to figure out how to remove the word "Close" in the top-right corner of this image:

enter image description here

I've found that I can run this jQuery command and it works, but only if I run the command after the window is already open:

            jQuery(".gm-ui-hover-effect").attr('title', '');

This issue is that if I put it in the click listener for the info Window it doesn't seem to work:

    function bindInfoWindow(marker, map, infowindow, html) {
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(html);
            infowindow.open(map, marker);
            jQuery(".gm-ui-hover-effect").attr('title', '');
        });
    }

I'm open to hiding it with CSS/JS/whatever, but after searching for 2 days I cannot find a solution for this (and for some reason my Chrome isn't unformatting the minified code, so tracing have proven very difficult, but that's another problem).

Anyone have any ideas on how to hide this?

Upvotes: 0

Views: 1434

Answers (1)

geocodezip
geocodezip

Reputation: 161404

Use the domready event on the InfoWindow to run the function to remove the title.

From the documentation:

domready
function()
Arguments: None
This event is fired when the containing the InfoWindow's content is attached to the DOM. You may wish to monitor this event if you are building out your info window content dynamically.

function bindInfoWindow(marker, map, infowindow, html) {
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(html);
        infowindow.open(map, marker);
        google.maps.event.addListener(infowindow, 'domready', function() {
          jQuery(".gm-ui-hover-effect").attr('title', '');
        });
    });
}

proof of concept fiddle

code snippet:

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

  var contentString = '<div id="content">' +
    '<div id="siteNotice">' +
    '</div>' +
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
    '<div id="bodyContent">' +
    '<p>some content</p>' +
    '</div>' +
    '</div>';

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

  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    console.log("open infowindow");
    infowindow.open(map, marker);
    google.maps.event.addListener(infowindow, 'domready', function() {
      console.log("remove title")
      jQuery(".gm-ui-hover-effect").attr('title', '');
    });
  });
}
html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>

Upvotes: 2

Related Questions