I am using the Google Maps API and I have some problems about InfoWindow .
Here is a summary:
- I load InfoWindow content when a user clicks on a marker
- Content is a partial view loaded thanks to an Ajax call
- In the .done callback, I call an asynchronous method that will insert data into the contents of InfoWindow. I need to do this because I want the main InfoWindow content to be displayed immediately, while this “bonus” information can be displayed in a few tenths of a second.
This works great; but I have a white bar to the right of my InfoWindow that I can’t remove (see image below)
However, content loading is included in the <div> with a fixed width :
<div id="div-main-infoWindow"> </div>
And in my CSS I wrote:
#div-main-infoWindow { width:342px !important; }
Downloading InfoWindow with more details is as follows:
$.ajax({ url : "/my-url", async : false, contentType : "application/json; charset=utf-8", dataType : "json", type : "POST", data : JSON.stringify(myModel) }).done(function(response) { MarkerContent = response.Content; //The HTML content to display MyAsyncMethod().then(function(response) { //do some formatting with response return result; //result is just a small HTML string }).done(function(result1, result2) { //do some formatting with result1 and result2 $("#myNode").html(/*formatted result*/); }) //info is a global variable defined as new google.maps.InfoWindow() info.setOptions({ content: MarkerContent, maxWidth: 342 //To be sure }); info.open(map, marker); }); });
The content is completely in order, the problem is in this white bar.
Looking at my browser console (I played it in all browsers), I see this:
As you can see, my <div> containing all my data downloaded from my ajax call is in good size order (green rectangle corresponding to the green zone in the screenshot), BUT the above divs (from the Google API itself, into red rectangles) have a larger size from which the problem.
The only way I found is to run this jQuery script modifying the internal structure of InfoWindow:
$(".gm-style-iw").next().remove(); $(".gm-style-iw").prev().children().last().width(342); $(".gm-style-iw").prev().children(":nth-child(2)").width(342); $(".gm-style-iw").width(342); $(".gm-style-iw").children().first().css("overflow", "hidden"); $(".gm-style-iw").children().first().children().first().css("overflow", "hidden"); $(".gm-style-iw").parent().width(342);
Note : gm-style-iw is the class name given to Google by a div containing all the InfoWindow content that was drawn in the screenshot above. I also add this rule to my CSS:
.gm-style-iw { width: 342px !important; //also tried with 100% !important, not better }
It works in the console, however, it has no effect if it is written in the code itself, in the .done or in the domready Google Maps event ...
However, in this late case, if I encapsulate the above jQuery script in setTimeout() , it works !! I commented on the asynchronous method, so it is not to blame, but it seems that domready is domready executed, while 100% InfoWindow is not yet displayed - contrary to the document .
I also tried moving my info.setOptions outside the .done and putting it after it, with no effect.
So, how can I display a “normal” InfoWindow without this white bar on the right?
I do not want to implement InfoBubble or another custom InfoWindow library. This is a personal project, and I want to understand why and where the problem is. And of course, find a solution.
Thank you for your help!