Export to GitHub

google-maps-utility-library-v3 - issue #327

MarkerWithLabel: dom elements inside labelContent

Posted on Sep 25, 2014 by Quick Elephant

Hello folks, This is the slightly modified version of basic.html example file. http://www.ressage.com.br/mapa2/basic.html

The marker on the right, has some DOM elements inside its 'mouseover' labelContent.. But if you move the mouse over the first label.. it seems to trigger the mouseout event.. What causes it to strangely blink

I can't really get around it ..

The way I'm doing it

var text = 'AAAAAAAAAAAAAAAAAAAAAAAAA<img src="http://cdn-careers.sstatic.net/careers/Img/logos/careers-logo.png?v=4daa70d5b71e">AAAAAAAAAA<br><br>AAAAAAAAAAAAAAABBBBBBBBBBBBBB<p&gt; ALFA </p> BBBBBBBBBBBBBBBB<br><br>BBBBB';
var html = '<div id="" style="margin-top:2px">'+ '<div>'+ '<div width="285">'+ 

                                  '&lt;div width=&quot;90&quot; height=&quot;80&quot; align=&quot;center&quot; style=&quot;vertical-align: top&quot;&gt;'+
                                      '&lt;div style=&quot;display:inline-block;margin-top: 12px;&quot;&gt;'+
                                        '&lt;img src=&quot;http://cdn-careers.sstatic.net/careers/Img/logos/careers-logo.png?v=4daa70d5b71e&quot; width=&quot;80&quot; height=&quot;52&quot;&gt;'+
                                      '&lt;/div&gt;'+
                                  '&lt;/div&gt;'+
                                  '&lt;div width=&quot;185&quot; align=&quot;left&quot; style=&quot;color:#FFF; font: 12px Arial, Helvetica, sans-serif&quot;&gt;'+
                                    '&lt;div style=&quot;display:inline-block;height:80px;margin-top: 2px;overflow:hidden&quot; title=&quot;TITULO DO MARCADOR&quot; alt=&quot;ALT DO MARCADOR&quot;&gt;'+
                                        '&lt;div style=&quot;font-family: arial,tahoma;line-height: 14px;color:white&quot;&gt;&lt;strong&gt;TITULO DO MARCADOR&lt;/strong&gt;&lt;br&gt; 6 quartos&lt;br&gt;Valor: 15000000 &lt;br&gt;Area: 120 m2&lt;/p&gt;'+
                                    '&lt;/div&gt;'+
                                  '&lt;/div&gt;'+                                                                   
                          '&lt;/div&gt;'+
                      '&lt;/div&gt;'+
                  '&lt;/div&gt;';

google.maps.event.addListener(marker1, "mouseover", function (e) { console.log('mouseover'); this.set('labelContent',this.labelNovo); });

 google.maps.event.addListener(marker1, &quot;mouseout&quot;, function (e) { console.log('mouseout'); this.set('labelContent','abcdefghijklmnopqrstuvxyz') });
 google.maps.event.addListener(marker2, &quot;mouseover&quot;, function (e) { this.set(&quot;labelContent&quot;,html) });

 google.maps.event.addListener(marker2, &quot;mouseout&quot;, function (e) { this.set(&quot;labelContent&quot;,'OUTOUTOUTOTU') });

Browser / Operating System: [e.g. Chrome/ W8]

***************************************************** Tip: Star this issue (next to title) to receive notifications of status changes against this issue, also used as a gauge for how many people are interested in seeing it resolved. *****************************************************

Comment #1

Posted on Sep 29, 2014 by Quick Elephant

Anything?

Status: New