CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
RoyHB
RoyHB

Reputation: 1725

Gmap V3 api title only appears for first marker

Using Firefox, marker titles appear only for the first marker that is moused over. Any subsequent mouseovers yield no title. Titles work fine with Chrome, IE etc.

There have been several previous questions about this. (see Google Maps Marker title no longer appears as tooltip on hover

The answers have indicated that this was a problem in the experimental version of the api.

gmaps api issues https://code.google.com/p/gmaps-api-issues/issues/detail?id=6931 is related.

As the attached jFiddle shows, the problem is not necessarily fixed by using &v=3.

Have I missed something?

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Titles Fail</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src='https://maps.googleapis.com/maps/api/js?v=3&sensor=false'></script>
<script type="text/javascript">
    function mapDisplay(){
        var locations =  [
            [-42.0, 147.0, "marker 1"],
            [-42.3, 147.9, "marker 2"],
            [-42.2, 147.45, "marker 3"],
            [-42.8, 147.9, "marker 4"]
        ];
            $("#map").css({'height': '600px'});

            var map = new google.maps.Map(document.getElementById('map'), {
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var marker, point;
            var bounds = new google.maps.LatLngBounds();

            for (var i = 0; i < locations.length; i++) {
                point = new google.maps.LatLng(locations[i][0], locations[i][4]);
                marker = new google.maps.Marker({
                    position: point,
                    map: map,
                    title: locations[i][5]
                });

                bounds.extend(marker.position);
            }
            map.fitBounds(bounds);
            if(map.getZoom()> 10){
                map.setZoom(10);
            }
    }
</script>
</head>
<body onload="mapDisplay()">
<div id="map" style="height: 90%; width: 90%;"></div>
</body>
</html>

Upvotes: 1

Views: 699

Answers (2)

Geert-Emo
Geert-Emo

Reputation: 11

This issue is still valid in Firefox 39, but now there is an issue with the mousover addListener event as well.

Adding "optimised:false" to the marker options - as mentioned by RoyHB - not only solves the issue with the title, but also the issue with the mouseover addListener event.

Upvotes: 0

geocodezip
geocodezip

Reputation: 161384

It is an API version issue. The "frozen version" (currently v3.16):

<script src='https://maps.googleapis.com/maps/api/js?v=3.0&sensor=false'></script>

fixes it (at least for me)

fiddle

current issue in the issue tracker (vote to indicate interest/follow status)

Upvotes: 1

Related Questions