Angularjs directive retrieves infowindow DOM element from Google Maps

Question

Angularjs directive retrieves infowindow DOM element from Google Maps

In order to apply some style fixes to the Infowindow, I am trying to select the element with the class 'gm-style-iw'. This selection process is taking place within an angularjs directive.

<div ui-view="full-map" id="full-map" class="mainMap col-xs-6"></div>

The ui-view loads a directive containing IW content, and the map is initialized inside that directive.

When initializing the controller of the directive, I need to modify the element with the class 'gm-style-iw'.

   var iwElem = $document[0].getElementsByClassName("gm-style-iw")

This code snippet correctly returns the desired element.

console.log(iwElem) shows:

[]
length: 1
0: div.gm-style-iw
__proto__: HTMLCollection

However, I am facing issues after this point. The iwElem variable is an HTMLCollection, which signifies an array of HTML elements. According to my understanding, I should be able to access the first element using iwElem[0]. Strangely enough, iwElem[0] returns undefined.

I also attempted to use jQuery selectors:

$('.gm-style-iw') => length:0

$('div.gm-style-iw') => length:0

javascript jquery html css angularjs

Answer 1

Answer №1

Assuming your HTML looks something like this:

<div ui-view="full-map" id="full-map" class="mainMap col-xs-6">
  ...some code
  <div class="gm-style-iw"></div>
  ... other codes
</div>

If you're using JQuery, you can try the following selector:

$('.mainMap .gm-style-iw')

This will select the child node with the class .gm-style-iw under the parent node with the class .mainMap.

Answer 2

Assuming your HTML looks something like this:

<div ui-view="full-map" id="full-map" class="mainMap col-xs-6">
  ...some code
  <div class="gm-style-iw"></div>
  ... other codes
</div>

If you're using JQuery, you can try the following selector:

$('.mainMap .gm-style-iw')

This will select the child node with the class .gm-style-iw under the parent node with the class .mainMap.

Answer 3

Answer №2

There has been some progress in resolving the issue.

  $timeout(function() {
      removeIwStandardStyles()
  },300);

  function removeIwStandardStyles () {
          var iwOuter = $(iwOuterTemp);
          while (iwOuterTemp.length < 1){
            iwOuterTemp = document.getElementsByClassName("gm-style-iw");
          }

          var iwBackground = iwOuter.prev();

          iwBackground.children(':nth-child(2)').css({'display' : 'none'});
          iwBackground.children(':nth-child(4)').css({'display' : 'none'});
  }

$document[0].getElementsByClassName("gm-style-iw")

was identifying the correct elements, but it seems like they were not yet applied to the DOM or there were some other loading issues.

However, the solution is not fully implemented (as seen in the while loop) - I believe I can proceed because that element will eventually load. The $timeout function by itself is not entirely reliable - sometimes it waits for the complete IW load, and sometimes it does not.

Answer 4

There has been some progress in resolving the issue.

  $timeout(function() {
      removeIwStandardStyles()
  },300);

  function removeIwStandardStyles () {
          var iwOuter = $(iwOuterTemp);
          while (iwOuterTemp.length < 1){
            iwOuterTemp = document.getElementsByClassName("gm-style-iw");
          }

          var iwBackground = iwOuter.prev();

          iwBackground.children(':nth-child(2)').css({'display' : 'none'});
          iwBackground.children(':nth-child(4)').css({'display' : 'none'});
  }

$document[0].getElementsByClassName("gm-style-iw")

was identifying the correct elements, but it seems like they were not yet applied to the DOM or there were some other loading issues.

However, the solution is not fully implemented (as seen in the while loop) - I believe I can proceed because that element will eventually load. The $timeout function by itself is not entirely reliable - sometimes it waits for the complete IW load, and sometimes it does not.

Angularjs directive retrieves infowindow DOM element from Google Maps

Answer №1

Answer №2

Similar questions

Using Node.js to Insert Data into MySQL

The CSS for the balise component is failing to load within a particular component

Shadowy figure in block form

The Node/Express server detects discrepancies in JSON data when processing GET and POST requests

Opt for a line break over a semicolon when using jQuery

Stop the form from refreshing the page after submitting a post request to the backend API

tips for effectively utilizing getters in array sorting operations

I keep encountering a double key error - MongoError: E11000 for the duplicate key error in my database. I currently have two collections set up: one for users and another

Conditionality in the ng-repeat directive of AngularJS

The Body and HTML elements compress to sizes significantly smaller than the viewport

Utilizing Vue.js pagination and table sorting with Element components

The window.onload event is failing to trigger on mobile devices, although it is functioning properly on desktop. (using react js

"How can I dynamically set the text for a radio button using Reactive Forms? Also, how do I capture the selected radio button value and the question title

Link insertion column

Unleashing the y-axis and enabling infinite rotation in Three.js

Customizing the appearance and dimensions of JWPlayer Audio Player with percentage-based styling

During the update from Three.js 68 to 69, an error occurred: Unable to access the property 'boundingSphere' of an undefined object

Is there a way to dynamically shift arrow key focus onto buttons in Angular using the left and right arrow keys?

Autocomplete is failing to provide any results

Animating the height of an element using CSS3 in AngularJS can be a hit or miss at times