Question

I am using Google Maps API v3, and have several map markers that link to different pages. When onmouseover the status bar is not displaying the url, however when the marker is clicked it does display the url loading text in the status bar.

It seems that my code is conflicting with the status bar in some way, or do you have to specify a property to show the status bar? Here is my code:

function initialize(mapInfo)
{       
    // object literal for map options
    var myOptions =
    {
        center: new google.maps.LatLng(30, 3), // coordinates for center of map
        zoom: 2, // smaller number --> zoom out
        mapTypeId: google.maps.MapTypeId.HYBRID // ROADMAP, SATELLITE, TERRAIN, or HYBRID
    };

    // note: if the id has a dash in its' name, map instantiation doesn't work!
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    // MAP MARKERS instantiated here
    for(var i = 0; i < mapInfo.length; i++)
    {
        var link = mapInfo[i].link;
        var name = mapInfo[i].name;
        var lat = mapInfo[i].lat;
        var lng = mapInfo[i].lng;

        // object literal for each map marker
        var marker = new google.maps.Marker(
        {
            url: link,
            title: name,
            position: new google.maps.LatLng(lat, lng),
            map: map
        });

        // setting the link to each map marker here
        setLink(marker);

        // setting each map marker here
        marker.setMap(map);
    }
} // end of function initialize()

function setLink(mapMarker)
{
    // event listener for marker links added to each marker
        google.maps.event.addListener(mapMarker, "click", function()
       {
             window.location.href = mapMarker.url; // obtaining the url from the object literal
       });
}

…I am getting the object-literal mapInfo (passed into the function initialize) from Ajax, parsed with JSON–just to clarify the mapInfo properties.

********************************EDIT: **********************************

Here is a solution, simply putting the link in an infowindow instead:

        // object literal for each map marker
        var marker = new google.maps.Marker(
        {
            //url: link,
            title: name,
            content: "<a href = " + link + ">" + name + "</a>",
            position: new google.maps.LatLng(lat, lng),
            map: map
        });

        setWindow(map, marker);
function setWindow(map, mapMarker)
{
    // event listener for marker links added to each marker
        google.maps.event.addListener(mapMarker, "click", function()
        {
        var infowindow = new google.maps.InfoWindow(
        {
            content: mapMarker.content
        });
                    infowindow.open(map, mapMarker);
        });
}

Answer 1

TL;DR: Can’t be done.

---

Your question is basically “How do I set the text of the status bar to the link when I mouseover the marker?”

So you need a mouseover handler to set the text, and a mouseout handler to put it back again.

function setLink(mapMarker)
{
    google.maps.event.addListener(mapMarker, "click", function() {
        window.location.href = mapMarker.url;
       });
    google.maps.event.addListener(mapMarker, "mouseover", function() {
        window.status = mapMarker.url;
        return true; // apparently this is necessary for window.status
       });
    google.maps.event.addListener(mapMarker, "mouseout", function() {
        window.status = '';
        return true;
       });
}

But see Reliable cross browser way of setting Status bar text — you can’t do it because browsers disable it. Once the url is loading, the browser itself displays it in the status bar as part of normal functionality.

One way which would work is to make the relevant marker image a link, because the browser’s normal functionality would take over and display the url in the status bar. Unfortunately the API doesn’t expose the various parts of a marker to make this possible either.