Leaflet with geocoder

<div class="row">
    <div class="col-md-12">
        <div class="form-field-default">
            <label>Localização:</label>
            <div id="location-map" style="background:#fff;border:none;height:440px;width:100%;box-sizing:border-box"></div>
            <input type="hidden" name="endereco_latlng" value="">
        </div>
        <div class="clear"></div>
    </div>
</div>
<div class="row">
    <div class="col-md-3">
        <div class="form-field-default">
            <label>CEP</label>
            <input class="maskcep" type="text" name="endereco_cep" placeholder="CEP" value="">
        </div>
    </div>
    <div class="col-md-7 col-xs-9">
        <div class="form-field-default">
            <label>Rua</label>
            <input type="text" name="endereco_rua" placeholder="Rua" value="">
        </div>
    </div>
    <div class="col-md-2 col-xs-3">
        <div class="form-field-default">
            <label>Nº</label>
            <input type="text" name="endereco_numero" placeholder="Nº" value="">
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="form-field-default">
            <label>Bairro</label>
            <input type="text" name="endereco_bairro" placeholder="Bairro" value="">
        </div>
    </div>
</div>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder@3.1.3/dist/esri-leaflet-geocoder.css">
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<script src="https://unpkg.com/esri-leaflet@3.0.8/dist/esri-leaflet.js"></script>
<script src="https://unpkg.com/esri-leaflet-geocoder@3.1.3/dist/esri-leaflet-geocoder.js"></script>
<script>
    function showMap() {
      setTimeout(function() {
        const targetId = "location-map";
        const $map = $('#' + targetId);
        const $latlng = $("[name='endereco_latlng']");
        const $nome = $("[name='nome']");
        const latlng = JSON.parse($latlng.val());
        const origin = L.marker(latlng);
        const apikey = "ARCGIS_API_KEY";
        if ($map.data('already-mounted')) {
          return;
        }
        $map.attr('data-already-mounted', true)
        const map = L.map(targetId, {
          maxZoom: 16,
          minZoom: 12,
          zoomControl: false
        });
        const geocodeService = L.esri.Geocoding.geocodeService({
          apikey
        });
        const providers = [
          L.esri.Geocoding.arcgisOnlineProvider({
            apikey,
            countries: ['BRA'],
          })
        ];
        map.setView(origin.getLatLng(), 16).on("click", handleClick);
        origin.addTo(map);
        L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
          attribution: "Map data &copy;  < a href = \"https://openstreetmap.org\">OpenStreetMap < /a>",
        }).addTo(map);
        L.control.zoom({
          position: 'bottomright'
        }).addTo(map);
        L.esri.Geocoding.geosearch({
          providers,
          expanded: true,
          useMapBounds: false,
          collapseAfterResult: false,
          placeholder: 'Pesquisar',
        }).addTo(map).on("results", handleClick);

        function handleClick(e) {
          geocodeService.reverse().latlng(e.latlng).run(function(error, result) {
            if (Boolean(error) == false) {
              $("[name='endereco_cep']").val(result.address.Postal).trigger("change");
            }
            map.setView(e.latlng, 16);
            origin.setLatLng(e.latlng);
            $latlng.val(JSON.stringify(Object.values(e.latlng)));
          });
        }
      }, 100);
    }
</script>