Showing map copyright in GMaps API V3

Question

I'm currently migrating an application from GMaps V2 to V3. As I use OSM and other non-Google map layers, I want to keep the copyright notice at the bottom right. But the reference documentation doesn't give any hints on this. In V2, the copyright even had its own class GCopyrightCollection, and was passed to GTileLayer. Google Code playground also doesn't provide an example for V3.

Does anyone know how to do this in the new API?

Answer 1

The mailing list helped me on this issue (see thread). There is sample code on Google Code for copyright collections and how to display them in the bottom right corner of the map DIV.

As there is a problem with layouting the custom DIV in the bottom right corner (only jumps to the correct position when the map is dragged, problem of GMaps API itself), I am now displaying it in the bottom left corner instead. (UPDATE: Problem seems to be fixed in API !)

The following code works as expected (of course I'm not using global variables, removed this. for clarity):

copyrightDiv = document.createElement("div")
copyrightDiv.id = "map-copyright"
copyrightDiv.style.fontSize = "11px"
copyrightDiv.style.fontFamily = "Arial, sans-serif"
copyrightDiv.style.margin = "0 2px 2px 0"
copyrightDiv.style.whiteSpace = "nowrap"
map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(copyrightDiv)

copyrights = {}
copyrights["OSM"] = "<a target=\"_blank\" href=\"http://www.openstreetmap.org/\">OpenStreetMap</a>"
copyrights["Osmarender"] = copyrights["OSM"]
copyrights["Cloudmade"] = "<a target=\"_blank\" href=\"http://cloudmade.com/\">CloudMade</a> - Map data <a target=\"_blank\" href=\"http://creativecommons.org/licenses/by-sa/2.0/\">CCBYSA</a>"
copyrights["Cloudmade-Fine"] = copyrights["Cloudmade"]

function onMapTypeIdChanged()
{
    newMapType = map.getMapTypeId()

    copyrightDiv = document.getElementById("map-copyright")
    if(newMapType in copyrights)
        copyrightDiv.innerHTML = copyrights[newMapType]
    else
        copyrightDiv.innerHTML = ""
}

google.maps.event.addListener(map, "maptypeid_changed", onMapTypeIdChanged)

// Call once so that the correct copyright notice is set for
// the initially selected map type
setTimeout(onMapTypeIdChanged, 50)

Answer 2

The AndiDog's solution greatly inspired me. But there is some disadvantage - copyright constructed this way doesn't have that nice semi-transparency of the standard google copyright. It would be annoying to construct it myself to support all browsers etc. so I use different strategy - find the text "Terms of Use" in the DOM and put your copyright text before it, into the div created by google. Also, I enhanced the function to allow for custom logos, as in my question here:

function gmaps3_copyright(map, copyrights, logos)
{
        var copyrightDiv, logoDiv;
        var google_div__span_created = 0;

        logoDiv = document.createElement("div");
        logoDiv.index = 0; // used for ordering 
        map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(logoDiv);

        function onMapTypeIdChanged()
        {
                newMapType = map.getMapTypeId()

                if (!google_div__span_created) { // hack into google's div - prefered solution
                        copyrightDiv = document.createElement("span");
                        $(copyrightDiv).insertBefore(
                                $('#mainMap :contains("Terms of Use")')
                                .filter(function() { return $(this).children().length < 1 })
                        );
                        google_div__span_created = 1;
                }

                if (newMapType in copyrights)
                        copyrightDiv.innerHTML = copyrights[newMapType] + ' - '
                else
                        copyrightDiv.innerHTML = ""

                if (newMapType in logos)
                        logoDiv.innerHTML = logos[newMapType]
                else
                        logoDiv.innerHTML = ""

        }

        google.maps.event.addListener(map, "maptypeid_changed", onMapTypeIdChanged);

        // Call once so that the correct copyright notice is set for
        // the initially selected map type
        // but wait until the complete html markup is loaded
        google.maps.event.addListener(map, 'tilesloaded', function () {
                setTimeout(onMapTypeIdChanged, 50);
                // still add some timeout to be 100% sure
        })
}

just call it like this:

gmaps3_copyright(map,
    {
        'OSM': '&copy; <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC-BY-SA</a>',
         'Cloudmade' : "<a target=\"_blank\" href=\"http://cloudmade.com/\">CloudMade</a> - Map data <a target=\"_blank\" href=\"http://creativecommons.org/licenses/by-sa/2.0/\">CCBYSA</a>"
    },
    {
         'OSM': // logo html code here
    }
)

You may need to modify the "Terms of Use" string to your localization.