Google map js api version 3 infowindow glitch

Question

I am developing an application which uses google maps api v3 to show markers and infowindows.

Well, I have N markers stored within an array and a global infowindow used to show some information.

The infowindow contents are shown simply by clicking a marker, created in this way:

/* global js stuff */
var g_map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var g_current_popup = new google.maps.InfoWindow({ content: "" });
var g_markers = [];

/* create marker function */
function addMarker(p_infowindow_contents)
{
  var l_marker = new google.maps.Marker( all the stuff needed );
  google.maps.event.addListener(l_marker, 'click', function()  
  {  
      g_current_popup.close(); // if already open, it must be closed and reloaded
      g_current_popup.setContent(p_infowindow_contents);
      g_current_popup.open(g_map, l_marker);
  });
  g_markers.push(l_marker);
}

Everything works as expected, except for a little graphical glitch: when the infowindow is appearing, I see the infowindow 'tip' positioned at an unknown location for a tenth of a second, then it disappears and I see the correct infowindow.

Look at this screenshot took just before the tip disappears:

Does anyone experienced something like this? Could it be some CSS issue?

Thanks

Answer 1

It does not look like this is a problem with your code, I think it more likely a browser issue. I was able to validate the same thing looking at the infowindow example that Google provides in Firefox, but not in Chrome:

https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

it seems to happen more visibly when the map has to scroll to fit the infowindow, but I would say that it is not a requirement for it to do so. It is likely just an artifact with the screen taking a few clock cycles to catch up with the DOM.