Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

removing the focus from infowindow in Google Maps v3 onclick link

Is there an autofocus set to an infowindow when it's opened in the Google Maps v3 API? I have an accordion with the addresses I have associated with the map markers, so that way, onclick, it will open the infowindow, but it autofocuses to the infowindow on the map, when I would rather it stay focused on the accordion on the page so there isn't a bunch of jumping around, which would be especially annoying for mobile devices. I still want it to pan the map so the infowindow still fits into the area, just without focusing on the map on the click of an accordion.

I have all my markers pushed into a gmarkers array that gets called like this in my accordions:

JS

function accordClick(id){
        google.maps.event.trigger(gmarkers[id], 'click');
    }

HTML

<a href="#" class="accordion-toggle" onclick="accordClick(0);"> <!--open first infowindow in array-->

I change the id value in the accordClick function manually in each anchor.

Any help on this is appreciated.

like image 770
Joshua Shade Avatar asked Nov 07 '25 12:11

Joshua Shade


2 Answers

You are clicking on a link, the browser tries to jump to the link-target(when the anchor hasn't been found usually to the top of the page)

There are multiple options, e.g.:

onclick="accordClick(0);return false"
like image 186
Dr.Molle Avatar answered Nov 09 '25 10:11

Dr.Molle


This fixed my issue:

infoWindow.open({
  shouldFocus: false, // this is the relevant part
  anchor: marker, // not relevant
  map, // not relevant
})

Alternatively, a pure CSS workaround:

.gm-style-iw { 
  outline:none;
}
like image 42
nth-child Avatar answered Nov 09 '25 08:11

nth-child