How can you make the copyright text in a Google Map wrap when the map is small?
- by Paul D. Waite
When you embed a Google Map on a web page, copyright text is included on the map. This is the HTML:
<div style="border-top: 10px solid rgb(204, 0, 0); -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: normal; text-align: right; margin-left: 70px; width: 210px;" dir="ltr">
<span></span>
<span>Map data ©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>
If you embed a map with a small width, the copyright text extends outside of the <div>, instead of wrapping within it.
I’ve tried using jQuery to select this HTML based on its contents (using :contains()), but it doesn’t seem to work in IE 8 (which is odd, as it works fine in IE 7).
Any idea what’s up with IE 8?
Any other methods to achieve the same result?