google maps formatting text of a marker tooltip on multiple lines

Question

How do I insert a newline into text of a marker tooltip. I am using \n which doesn't seem to be working.

See code below:

mark = new google.maps.Marker({          
        map: map,             
        position: center,
        title:inspStates[i].name+ "\n"+"total: "+inspStates[i].totalInsp+ "\n"+ info,
        zIndex:3
});

Knuckle

\n is working in internet explorer but not firefox – Knuckle

Answer 1

I used a customized google infoBox in place of the tooltip and it formatted properly see here: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html

Knuckle

This is a bad link. – Educative

I think, this would be that URL: github.com/googlemaps/v3-utility-library/tree/master/infobox – Belenbelesprit

Internet Archive: http://web.archive.org/web/20160329090524/http://google-maps-utility-library-v3.googlecode.com:80/svn/trunk/infobox/docs/examples.html – Winterize

Answer 2

Use single quotes (' ') instead of double quotes (" ")it will work, like this code.

mark = new google.maps.Marker({          
            map: map,             
            position: center,
            title:inspStates[i].name+ '\n total: '+inspStates[i].totalInsp+ '\n'+ info,
            zIndex:3
    });

Snooker

Answer 3

When using a Marker, multiline text should be in the content not title. Also instead of \n you must use html's <br/>

Hedve

worked in the title for me, but you're right about <br/> – Orfinger

To show a tooltip, I kept it as a title and used \n without issue. – Ideational

Answer 4

I use \\n and this seems to work.

Blew

i was using gmplot python library and this worked for me – Lorollas

Answer 5

If you're using FireFox, I don't think there is an easy way. The problem is explained with brilliant simplicity here by one Blake Stephens:

To quote:

The title that's automatically generated from hovering over a marker is actually the standard HTML title attribute, which works the same way as the alt tag attribute on an image. It's not exactly easy to get multiple lines on one, since browsers decide for themselves when to get the line to wrap (so really long alt texts and titles can be readable, they wrap). I don't believe it's possible to forcibly insert a line break.

However, this does not stop you from circumventing the generic title text altogether and creating your own that's completely stylable. You can attach an even to the marker for the 'mouseover' event and generate a div tag filled with your content that follows the mouse around; removing/destroying/hiding itself when the 'mouseout' event fires. That seems like the most reliable way to me.

Marrowbone