leaflet control geocoder positioning as texfield and icon

Question

i am using leaflet control geocoder, i cannot figure out two things, the first is i want to position it in a div, not on the map, is there a way i can do that? if yes then how?

i have only come across the positioning method but it only lets me select it in the form of topleft topright etc. the second problem is that i want to set an icon both for when the marked location that pops up when geocoder gives result and for the actual geocoder (like a little search icon ), heres what i have.

I am relatively new to this.

 var geocoder = L.Control.geocoder({
        collapsed:false,
        position:"topright"
})
    .on('markgeocode', function(e) {
    document.getElementById("currentLocation").value=e.geocode.name;
    e.geocode.icon=MarkerIcon;

    })
    .addTo(mymap);

Answer 1

Here is some of my code, I have a side panel with textboxes, when they hit the submit button, I form the url pass it to the geocoder, grab the first Lat/Lng response, and plot it as a marker. I used the Font_AwesomeMarkers so you will want to modify the marker it uses.

<label for="dtb">Str.</label> <input type="text" id="txtbx2"  /></br></br>
<label for="dtb">City</label> <input type="text" id="txtbx3" /></br></br>
<label for="dtb">State</label> <input type="text" id="txtbx4" class="txtbx" />
<label for="dtb">Zipcode</label> <input type="text" id="txtbx5" class="txtbx" />&nbsp;

<input type="submit" name="submit" value="Save"/>


var EurlA = theStr + "," + theCit + "," + theState + "&category=&outFields=*&forStorage=false&f=pjson";
var EurlB = "http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/findAddressCandidates?SingleLine=";
var EurlC = (EurlB + EurlA).replace(/ /g, "%20");;
console.log(EurlC);
EloadXMLDoc(EurlC)

    function EloadXMLDoc(url) {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var data = this.responseText;
                EFunction(data);
            }
        };
        xhttp.open("GET", url, true);
        xhttp.send();
    }

    function EFunction(response) {
        var obj4 = JSON.parse(response);
        var Ex = obj4.candidates[0].location.x;
        var Ey = obj4.candidates[0].location.y;
        console.log(Ex + ", " + Ey + " Esri Point");
        drawpt(Ey,Ex,"E");
    }

    function drawpt(theY, theX, who) {

    esr = new L.Marker([ theY, theX ],{icon: L.AwesomeMarkers.icon({
      icon: 'certificate',
      prefix: 'glyphicon', // fa
      markerColor: setColor2('E')}) 
      }).addTo(map);
    var source = "<span class='box-blue'></span>Esri";
    layerControl.addOverlay(esr,source); 
}   
});