Google Maps API—Copyright notice overflowing small map: The right way™
The problem shown is from the copyright notice of a Google Map overflowing the map bounds, and overlapping adjacent information.
I’ve only found a single page that’s provided any information on the problem, and it’s full of bad advice: Change the overflow of the map div to hide the offending portion of the copyright, remove the copyright altogether, or change the size of the font to fit within the map. Unfortunately, all except the last suggestion breaks the Terms of Use, and reducing the font size for a 150px-wide map to make the entire notice fit within would make it entirely illegible.
Fixing this problem The Right Way™ is easy:
#map div {
max-width: 150px; /* Change to the width of your map */
}
#map div span {
white-space: normal;
}
This puts the entire copyright notice within the bounds of the map, at the font size that Google specified, and makes it wrap within the frame. Everyone wins.
August 14th, 2008 at 8:23 am
Thanks a lot for your effort, that was exactly the solution I was looking for!
August 14th, 2008 at 8:27 am
No sweat. This should really be the default behavior of Google Maps.
Thanks for letting me know it worked out!
October 23rd, 2008 at 11:05 am
Kyle…good job! just a little adjusment i did to make it working always (i dont know why but sometimes when move map -pan- it shows the text), but anyway…your idea using css was really useful.
my change:
#map div span { display: none; }instead of
#map div { max-width: 150px; /* Change to the width of your map */ } #map div span { white-space: normal; }works fine too
Thanks a lot !
October 23rd, 2008 at 11:07 am
Sorry, forget to say. My goal was a little different from your: “not to have a text that sometimes appears and sometimes doesnt”, so i’m avoiding it.
October 23rd, 2008 at 11:29 am
You missed the point.
The text sometimes appears and sometimes doesn’t because different portions of the map—different aerial photographs—are copyrighted by different people (additional copyright shown) or owned by Google (no text shown).
Hiding the copyright entirely is against the Terms of Use of using the Google Maps API, and you really shouldn’t do it. I wrote this post because too many people were solving this issue the way you just describe above, which is definitely the wrong way.
November 16th, 2008 at 5:07 pm
Excellent stuff Kyle! It worked perfectly. Thank you!