CODEWITHSUNDEEP
javascriptjquerygoogle-mapsgoogle-maps-api-3
Qaisar Satti
Qaisar Satti

Reputation: 2762

Set focus on google map's InfoWindow on marker mouseover

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));

Upvotes: 1

Views: 5283

Answers (1)

kosmos
kosmos

Reputation: 4288

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();
    });

};

Upvotes: 2

Related Questions