简体   繁体   中英

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.

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, eg:

onclick="accordClick(0);return false"

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM