CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Robinhood
Robinhood

Reputation: 899

How to remove an empty div created by Google Maps InfoWindow (Close info window on map click also close older info window's when opening new one)

For some reason, Google is rendering an empty div in Google Maps infoWindow card. I'm following the normal practice in which I'm initiating Google Maps via initMap() and to add infoWindow I'm using:

if (props.content) {

  var infoWindow = new google.maps.InfoWindow({
    content: props.content
  });

  marker.addListener('click', function() {
    infoWindow.open(map, marker);
  });
}

How do I remove this div? or place my content in the div?

enter image description here

Upvotes: 0

Views: 528

Answers (1)

SMAKSS
SMAKSS

Reputation: 10520

For deleting a div in javascript you can simply use remove() function via dot notation.

Just like this:

document.getElementById("element").remove();

But since you don't have a special id or class in your desired DOM item that couldn't be a solution. So you have to get the parent node and remove its children. All you have to do is to use removeChild(/*element.lastChild*/). So it will be something like this:

const element = document.querySelector('.gm-style-iw-d');
element.removeChild(element.lastChild);

UPDATE

If you want to disable the context menu in your other div to make them look like the same, there are two ways to do that.

First, you can do this by manipulating HTML itself like this:

<div oncontextmenu="return false;"></div>

Or by manipulating the DOM after the initial load:

HTML

<div id='elementId'></div>

Javascript

document.getElementById('elementId').addEventListener('contextmenu', function() {
  return false;
});

UPDATE 2

This is not the best approach to achieve what you wanted but you can do this in order to close the dialog whenever the user clicks anywhere in the map except marker and dialog itself. According to the google map document you can use .close() method to close InfoWindow just like this:

function addMarker(props) {
  var marker = new google.maps.Marker({
    position: props.coords,
    map: map,
  });

  // Check for custom icon
  if (props.iconImage) {
    // Set icon image
    marker.setIcon(props.iconImage);
  }

  // Check content
  if (props.content) {

    var infoWindow = new google.maps.InfoWindow({
      content: props.content
    });

    marker.addListener('click', function() {
      infoWindow.open(map, marker);
      setTimeout(() => {
        var x = document.getElementsByClassName('gm-ui-hover-effect')[0].remove();
      }, 1);
    });
  }
  google.maps.event.addListener(map, "click", function(event) {
    infoWindow.close();
  });
}

UPDATE 3

To achieve closing old infoWindow you should create a unique infoWindow and update its content to having just one that gets closed/opened on each marker.click. So in this way, it will be working like a charm.

var infoWindow = null;

// Add marker function
function addMarker(props) {
  var marker = new google.maps.Marker({
    position: props.coords,
    map: map,
    // icon: './img/marker1.png'
  });

  // Check for custom icon
  if (props.iconImage) {
    // Set icon image
    marker.setIcon(props.iconImage);
  }

  // Check content
  if (props.content) {

    google.maps.event.addListener(marker, 'click', function() {
      if (infoWindow) {
        infoWindow.close();
      }
      infoWindow = new google.maps.InfoWindow({
        content: props.content
      });
      infoWindow.open(map, marker);

      setTimeout(() => {
        var x = document.getElementsByClassName('gm-ui-hover-effect')[0].remove();
      }, 10);

    });
  }
  google.maps.event.addListener(map, "click", function(event) {
    infoWindow.close();
  });
}

Here is the link to the working demo: JSFiddle

Upvotes: 1

Related Questions