Geocoding

The Search bar should be placed at the top of the map. It should include the following features:

  • Button menu to select search type (address or coordinates)
  • Input text box to enter either address or coordinates
  • Get Current Location button
  • Reset map to Nationwide view
Example & Code
<div class="search-field input-group">
    <div class="search__group">
        <div class="search__input">
            <div class="input-group">
                <div class="input-group-btn">
                    <button aria-expanded="false" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button"><span id="btn-label">Address</span> <span class="caret"></span></button>
                    <ul id="input-search-switch" role="menu" class="dropdown-menu">
                        <li><a href="#" data-value="loc">Address</a></li>
                        <li><a href="#" data-value="latlon-decimal">Coordinates</a></li>
                    </ul>
                </div>
                <input id="input-location" class="form-control ui-autocomplete-input ui-corner-all" type="search" placeholder="Enter Address" style="display: block" autocomplete="off">
                <div id="input-latlon-decimal" class="form-control" type="search" placeholder="Enter Latlon decimal" style="display: none">
                    <table id="table-latlon-decimal">
                        <tbody>
                            <tr>
                                <td>Latitude:
                                    <input id="latitude" placeholder="41.234567" style="width: 150px; height: 20px; border: solid 1px #eee">
                                </td>
                                <td width="75"></td>
                                <td>Longitude:
                                    <input id="longitude" placeholder="-91.234567" style="width: 150px; height: 20px; border: solid 1px #eee">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <span class="input-group-btn" id="span-location-search" style="display: table-cell">                        
<button class="btn__search btn btn-default" type="submit" id="input-loc-search" title="Location Search" data-toggle="tooltip" data-placement="top"><span class="icon icon-search"></span><span class="sr-only">Location Search</span></button>
                </span>
                <span class="input-group-btn" id="span-latlon-decimal-search" style="display: none">                        
<button class="btn-search btn btn-default" id="input-latlon-decimal-search" title="Decimal Latlon Search" data-toggle="tooltip" data-placement="top"><span class="icon icon-search"></span><span class="sr-only">Decimal Lat/Lon Search</span></button>
                </span>
            </div>
        </div>
        <div class="btn__groupLoc">
            <span class="input-group-btn">  
<button class="btn__geoLocation btn btn-default st" title="Get Current Location" data-toggle="tooltip" data-placement="top" id="btn-geoLocation" type="button" data-original-title="Get Current Location">
<span class="icon icon-location-arrow"></span><span class="sr-only">Get Current Location</span></button>
            <button class="btn__nationLocation btn btn-default st" title="Nationwide" data-toggle="tooltip" data-placement="top" id="btn-nationLocation" type="button" data-original-title="Nationwide"><span class="icon icon-globe"></span><span class="sr-only">Nationwide</span></button>
            </span>
        </div>
    </div>
</div>
.btn-group {
  display: table-cell;
}

.search-field {
  margin: 15px 0;
  width: 100%;
}

.search-field .btn.btn__geoLocation {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  padding: 7px 12px 5px;
}

.search-field .btn.btn__nationLocation {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}

.search-field .btn__search {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  margin: 0 0px 0 -1px;
}

.search-field .search__group {
  display: table-row;
}

.search-field .search__input,
.search-field .btn__groupLoc {
  display: table-cell;
}

.search-field .search__input {
  width: 100%;
}

.search-field .search__input .input-group {
  width: 98%;
}

.search-field .dropdown-menu {
  z-index: 1001;
}

/* Get current location */
$('#btn-geoLocation').click(function(event) {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            var geo_lat = position.coords.latitude;
            var geo_lon = position.coords.longitude;
            var geo_acc = position.coords.accuracy;

            geo_lat = Math.round(geo_lat * 1000000) / 1000000.0;
            geo_lon = Math.round(geo_lon * 1000000) / 1000000.0;
            locationLat = geo_lat;
            locationLon = geo_lon;

            setPosition(geo_lat, geo_lon);            

        }, function(error) {            
            alert('Sorry, your current location could not be found. \nPlease use the search box to enter your location.');
        }, {
            timeout: 4000
        });
    } else {
        alert('Sorry, your current location could not be found. \nPlease use the search box to enter your location.');
    }

    return false;
});