If you look at the Change Location form in the browser, you will see a Map shown in a fieldset, followed by the fieldset containing the address fields, as shown in the following screenshot:

Under the map, there are two buttons: Locate address and Remove from map.

When you click on the Locate address button, the geocoding is called in order to search for the geographical coordinates of the entered address. The result of performing geocoding is one or more addresses listed in a nested dictionary format. We'll represent the addresses as a list of clickable links, as follows:

To view the structure of the nested dictionary in the console of the developer tools, put the following line at the beginning of the autocompleteAddress() function:

console.log(JSON.stringify(results, null, 4));

When you click on one of the selections, the marker appears on the map showing the exact geoposition of the location. The Latitude and Longitude fields will be filled in like so:

Then, the administrator can move the marker on the map by dragging and dropping it. Also, double-clicking anywhere on the map will update the geographical coordinates and the marker position.

Finally, if the Remove from map button is clicked, the geographical coordinates are cleaned and the marker is removed.

Administration uses a custom LocationModelForm that excludes the geoposition field, adds the Latitude and Longitude fields, and handles saving and loading their values.