google map multiple marker tooltip only show on the first marker in firefox

Question

I am working on a codeigniter project which shows a visited path with markers in specific time duration in google map. The map, markers, tooltip, polyline everything works fine in chrome .

But in firefox only one tooltip shows on a marker when the mouse is hovered. Other tooltips dont show up. Then if I click outside the map and hover again on any marker the tooltip shows on that, but not in others. This is same for every marker. And the problem is only in firefox . I get the locations from database. The jsfiddle link is: http://jsfiddle.net/msz08tjx/ Below is the whole code:

<script>
    jQuery(document).ready(function(){

$('#frmGPSTag').validationEngine('attach',{
            onValidationComplete: function(form, status){
                if (status == true){
                    mapDisplay();
                }
            }
        });

function mapDisplay(){                          
            $.getJSON('<?php echo base_url(); ?>user/gps_tags_json/'+$("#datepicker1").val()+'/'+$("#datepicker2").val(), function(data){
                var locations = new Array();
                $.each( data, function( key, val ) {
                    var location = [ parseFloat(val.latitude), parseFloat(val.longitude), val.gps_tag_timestamp];
                    locations.push(location);
                });
                if(locations.length > 0)
                {
                    $("#map").css({'height': '600px'});

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

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

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

                        travelCoordinates[i] = point 
                        bounds.extend(marker.position); 
                    }
                    map.fitBounds(bounds);
                    if(map.getZoom()> 10){
                    map.setZoom(10);
                    }

                    var travelPath = new google.maps.Polyline({
                        path: travelCoordinates,
                        geodesic: true,
                        strokeColor: '#FF0000',
                        strokeOpacity: 1.0,
                        strokeWeight: 2
                    });

                    travelPath.setMap(map); 
                }
                else
                {
                    $("#map").empty();
                    $("#map").css({'background-color': '','height': 'auto'});
                    $("#map").html("<?php echo '<ul class=\"list-group\"><li class=\"list-group-item list-group-item-warning\">'.$this->lang->line('no_record').'</li></ul>'; ?>");
                }
            });     
        }

    });
</script>

and my datepicker functions are:

<script type="text/javascript">
    $(function() {
       $( "#datepicker1" ).datepicker({
          dateFormat: 'yy-mm-dd',
          onClose: function( selectedDate ) {
            $( "#datepicker2" ).datepicker( "option", "minDate", selectedDate );
          }
      });

      $( "#datepicker2" ).datepicker({
          dateFormat: 'yy-mm-dd',
          onClose: function( selectedDate ) {
            $( "#datepicker1" ).datepicker( "option", "maxDate", selectedDate );
          }
      });
    });
</script>

I have read a lot of problems like it in the web. But none of the solutions worked for me. Any help would be greatly appriciated. Thanx in advance.

The jsfiddle link is: http://jsfiddle.net/msz08tjx/

Answer 1

Using just release v3 js doesn't seem fix the issue in firefox. Also add the following marker option will do...

optimized:false

reference-- Issue 7136: Bug: Multiple marker titles not working in stable (3.17.15) version of API.

Answer 2

It is a problem with the "experimental version" . Don't use the experimental version in production, it can break unexpectedly.

Change v=3.exp to v=3 in the include of the API:

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

To:

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

working fiddle (at least in the version of Firefox I am running, 31.0)

Answer 3

Since Firefox 39 there is not only an issue with the title tag not showing onmousover, but also the mouseover addListener event is not triggering.

Adding "optimised:false" property to the marker properties solves the problem with the mouseover addListener event too.