CODEWITHSUNDEEP
pythondjango
Louis
Louis

Reputation: 370

Need suggestions : Django UserProfile geographic address to connect with others users

I hope you're well,

I'm looking for a plugin or a tutorial for : a- allow my users to fill in their address on their profile. The best would be to have a map on which they can identify their address or like on the UberEats site. b- to be able to find the closest users according to their address.

If you have any ideas, I'm interested,

I have already made the profile on Django, all I need is the address field.

Upvotes: 0

Views: 97

Answers (1)

Neo
Neo

Reputation: 208

The below code will do. You will need Javascript to play around a bit and set your form fields with the returned address.

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    #map {
      height: 100%;
    }

    .controls {
      margin-top: 10px;
      border: 1px solid transparent;
      border-radius: 2px 0 0 2px;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      height: 32px;
      outline: none;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }

    #pac-input {
      background-color: #fff;
      font-family: Roboto;
      font-size: 15px;
      font-weight: 300;
      margin-left: 12px;
      padding: 0 11px 0 13px;
      text-overflow: ellipsis;
      width: 300px;
    }

    #pac-input:focus {
      border-color: #4d90fe;
    }

    .pac-container {
      font-family: Roboto;
    }

    #type-selector {
      color: #fff;
      background-color: #4d90fe;
      padding: 5px 11px 0px 11px;
    }

    #type-selector label {
      font-family: Roboto;
      font-size: 13px;
      font-weight: 300;
    }
  </style>
  <title>Places Searchbox</title>
  <style>
    #target {
      width: 345px;
    }
  </style>
</head>

<body>
  <input id="pac-input" class="controls" type="text" placeholder="Search Box">
  <div id="map"></div>
  <script>
    // This example adds a search box to a map, using the Google Place Autocomplete
    // feature. People can enter geographical searches. The search box will return a
    // pick list containing a mix of places and predicted search terms.

    function initAutocomplete() {
      var map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: -33.8688, lng: 151.2195 },
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      // Create the search box and link it to the UI element.
      var input = document.getElementById('pac-input');
      var searchBox = new google.maps.places.SearchBox(input);
      map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

      // Bias the SearchBox results towards current map's viewport.
      map.addListener('bounds_changed', function () {
        searchBox.setBounds(map.getBounds());
      });
      map.addListener('click', function (locationdata) {
        console.log(locationdata.latLng.lat());
        console.log(locationdata.latLng.lng());
        var myLatlng = new google.maps.LatLng(locationdata.latLng.lat(), locationdata.latLng.lng());
        var myOptions = {
          zoom: 13,
          center: myLatlng
        }

      });

      var geocoder = new google.maps.Geocoder();

      google.maps.event.addListener(map, 'click', function (event) {
        geocoder.geocode({
          'latLng': event.latLng
        }, function (results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            if (results[0]) {
              alert(results[0].formatted_address);
            }
          }
        });
      });


      var markers = [];
      // [START region_getplaces]
      // Listen for the event fired when the user selects a prediction and retrieve
      // more details for that place.
      searchBox.addListener('places_changed', function () {
        var places = searchBox.getPlaces();

        if (places.length == 0) {
          return;
        }

        // Clear out the old markers.
        markers.forEach(function (marker) {
          marker.setMap(null);
        });
        markers = [];

        // For each place, get the icon, name and location.
        var bounds = new google.maps.LatLngBounds();
        places.forEach(function (place) {
          console.log("lat: " + place.geometry.location.lat() + " lng: " + place.geometry.location.lng())

          var icon = {
            url: place.icon,
            size: new google.maps.Size(71, 71),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(17, 34),
            scaledSize: new google.maps.Size(25, 25)
          };

          // Create a marker for each place.
          markers.push(new google.maps.Marker({
            map: map,
            icon: icon,
            title: place.name,
            position: place.geometry.location
          }));

          if (place.geometry.viewport) {
            // Only geocodes have viewport.
            bounds.union(place.geometry.viewport);
          } else {
            bounds.extend(place.geometry.location);
          }

        });

        map.fitBounds(bounds);
      });
      // [END region_getplaces]
    }

  </script>
  <script
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAkwr5rmzY9btU08sQlU9N0qfmo8YmE91Y&libraries=places&callback=initAutocomplete"
    async defer></script>
</body>

</html>

You will need to add markers on map for each select. The code will console log the long and lat also, and return an alert with the address once you click it.

Credit goes to these two threads Link1 and Link2.

I managed to combine both codes and give results as you have mentioned.

Upvotes: 1

Related Questions