Set focus on google map's InfoWindow on marker mouseover

Question

I want to focus the info window on mouse hover on marker. And window will be open as long as he stay on info window. Below is my code

content="<div class='info_content' id='info"+obj.customer_id+"'><span>"+j+".</span><h1><a href='<?php echo Mage::getUrl() ?>"+obj.identifier+"<?php echo $suffix; ?>'>"+obj.company.substr(0, 28)+"</a> </h1><br /><p>"+address+"</p><p>"+Math.round(obj.distance)+" Km Away</p><br /><button type='button' value='Get Direction' class='button_input' onclick='closeInfoWindow(),calcRoute("+obj.latitude+","+obj.longitude+")' name='Get Direction'>Get Direction</button></div>";
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: obj.company,
            icon:icon,

        });
        if(i==0)
        { 
        map.setCenter(marker.getPosition())
        }

        google.maps.event.addListener(marker,'mouseover', (function(marker,content,infowindow){ 

          return function() {

              infowindow.close();
              infowindow.setContent(content);
              infowindow.open(map,marker);
              jQuery("#info"+obj.customer_id).focus();
          };
          })(marker,content,infowindow)); 
        google.maps.event.addListener(marker,'mouseout',  (function(marker,content,infowindow){ 

           return function() {




          };
          })(marker,content,infowindow));

In your mouseover return function, is `jQuery("#info"+obj.customer_id)` empty? — kosmos, Sep 11 '15 at 10:22

score 2 · Accepted Answer · answered Sep 11 '15 at 12:01

It is not possible to do focus on a div element unless you set the tabindex property (if I am not wrong, you can focus any element with this property). The focus action is commonly used in form/text elements.

I made a working example (see jsFiddle):

window.onload = function(){
    var map = new google.maps.Map(document.getElementById('map'), { 
        center: new google.maps.LatLng(22.669, 77.709),
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var content="<div class='info_content' id='info01' tabindex='1'>hello world</div>";
    var infowindow = new google.maps.InfoWindow();

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(22.669, 77.709),
        map: map
    });

    google.maps.event.addListener(marker, 'mouseover', function(){
        infowindow.setContent(content);
        infowindow.open(map, marker);
    });

    google.maps.event.addListener(marker, 'mouseout', function(){
        //
    });

    google.maps.event.addListener(infowindow, 'domready', function(){
        $('#info01').focus();
    });

};

Please, check the [jsFiddle link](http://jsfiddle.net/kmsdev/rqfo3wma/) that I posted in the answer. You have **a working example** there. It's very similar to your code, simply I have deleted some html into the `content` variable because it is not needed for the example. Anyway, I am pretty sure that you can integrate this code to yours. — kosmos, Sep 11 '15 at 15:47
In addition, referring to what is focusable, see http://stackoverflow.com/a/1600194/3648578 — kosmos, Sep 11 '15 at 16:12

Set focus on google map's InfoWindow on marker mouseover

1 Answers1