CODEWITHSUNDEEP
javascriptjquerysearchgeolocation
Chris Owens
Chris Owens

Reputation: 58

Auto detect location (city & state), and put that information into input and select fields, respectively

I've been looking over the Geolocation API, as well as the jQuery Geolocation API, and have yet to find a good solution to what I'm trying to do.

Ultimately, I want users to be able to click on an icon in the city location input, the browser to detect their city and state, and then that information automatically populated in the fields, with the city field being a basic input and the state being a select.

<div class="search">
  <a href="autodetect-here"><span class="fa fa-map-marker"></span></a>
  <input type="text" id="location" placeholder="City" />
  <select>

<option selected="state">State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>

Upvotes: 0

Views: 2526

Answers (1)

Justin Waite
Justin Waite

Reputation: 865

Use the HTML5 geolocation API to get the longitude and latitude, and then send those coordinates to an API such as Google's Geocoding API. This will return you an address which you can parse the city and state from.

HTML5 Geolocation

Google geocoding API

Note: As of Chrome 50, the Geolocation API will only work on secure contexts such as HTTPS. If your site is hosted on an non-secure origin (such as HTTP) the requests to get the users location will no longer function.

Upvotes: 2

Related Questions