Geocoder does not show marker and fly to result location when it is added to HTMLElement.

[ishikawa915]

mapbox-gl-geocoder version: v4.7.0 mapbox-gl-js version: v2.3.1

browser: Chrome, Firefox and Edge

Steps to Trigger Behavior

1. Create geocoder and add to the map.
2. Search location and click a result.
3. Maker is added at the result location and fly to the location.
4. Add the geocoder to HTMLElement.
5. Search location and click a result.
6. Nothing happens. No marker, no fly to.

Link to Demonstration

https://jsbin.com/pokuhabayo/edit?html,output

Expected Behavior

Show marker at the result location and fly to the location.

Actual Behavior

No marker, no fly to.

If this behavior is intended, I request to provide option to enable marker and fly to function.

[WillTisdale]

I had this problem as well. Originally I was adding the geocoder to an HTML element because I wanted it on the top left of the map and it successfully added but would not fly to the result like this:

geocoder.addTo(.mapboxgl-ctrl-top-left)

I found on the mapbox website a reference to adding it with javascript like this:

document.getElementById('geocoder').appendChild(geocoder.onAdd(map));

I needed to use jQuery so my code looked like the following and works just fine with flying to the result:

$('.mapboxgl-ctrl-top-left').append(geocoder.onAdd(map))

[ishikawa915]

Thanks for the comment.

When I try the code you suggest, my app works.

I paste a link to a sample on the mapbox website if someone will face same problem and check this thread.

• Place the geocoder input outside the map