How can you make the copyright text in a Google Map wrap when the map is small?

Question

When you embed a Google Map on a web page, copyright text is included on the map.

If you embed a map with a small width, the copyright text extends outside of the <div>, instead of wrapping onto two lines within it.

This is the HTML that Google Maps inserts for the copyright text:

<div style="-moz-user-select: none; z-index: 0; position: absolute; right: 3px; bottom: 2px; color: black; font-family: Arial,sans-serif; font-size: 11px; white-space: nowrap; text-align: right;" dir="ltr">
    <span></span>
    <span>Map data &copy;2010  LeadDog Consulting, Europa Technologies - </span>
    <a href="http://www.google.com/intl/en_ALL/help/terms_maps.html" target="_blank" class="gmnoprint terms-of-use-link" style="color: rgb(119, 119, 204);">Terms of Use</a>
    <span></span>
</div>

I’ve tried using jQuery to select this HTML based on its contents (using :contains()) and style it differently, but none of the styles are applied in IE 8. They’re applied fine in IE 7 and Firefox.

$('.map_placeholder div:contains("Map data ")').css({'white-space': 'normal', 'margin-left': '70px', 'width': '210px', 'border-top': 'solid 10px #c00'});

• Any idea what’s up with IE 8?
• Do you know other methods to achieve the same result?

Answer 1

div span { white-space: normal;}

Answer 2

You should be able to set overflow:hidden on the outer div and nothing will extend outside its box.

I'd be careful with removing/styling the copyright text though, since it is likely a breach of Google's TOS.

Answer 3

Just tested this, and it works. Overwrite the inline css with the following:

div[style]{
 font-size: inherit !important;
 white-space: inherit !important;
}


span[style]{
 white-space: inherit !important;
}

a[style]{
 color: inherit !important;
}

span { white-space: normal; }