How do I pick up the location in the google maps api according to the user’s click?

Asked

Viewed 459 times

1

I entered the site google maps api and saw how to put and use the api on my site, but only managed to make you register a location according to what the user types. For a better experience, I wanted when the user clicked on some point on the map, that latitude and longitude were saved in the database. Does anyone have any idea how I can do that?

Note: It is not the location that the user is, but the one that they click.

1 answer

0


<script>

    function initialize() {
       var latlng = new google.maps.LatLng(-19.949132746636568, -44.194307630538844);
        var map = new google.maps.Map(document.getElementById('map'), {
          center: latlng,
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        var marker = new google.maps.Marker({
          map: map,
          position: latlng,
          draggable: true,
          anchorPoint: new google.maps.Point(0, -29)
       });
        var input = document.getElementById('searchInput');
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
        var geocoder = new google.maps.Geocoder();
        var autocomplete = new google.maps.places.Autocomplete(input);
        autocomplete.bindTo('bounds', map);
        var infowindow = new google.maps.InfoWindow();   
        autocomplete.addListener('place_changed', function() {
            infowindow.close();
            marker.setVisible(false);
            var place = autocomplete.getPlace();
            if (!place.geometry) {
                window.alert("O local retornado pelo preenchimento automático não contém geometria!");
                return;
            }

            if (place.geometry.viewport) {
                map.fitBounds(place.geometry.viewport);
            } else {
                map.setCenter(place.geometry.location);
                map.setZoom(17);
            }

            marker.setPosition(place.geometry.location);
            marker.setVisible(true);          

            bindDataToForm(place.formatted_address,place.geometry.location.lat(),place.geometry.location.lng());
            infowindow.setContent(place.formatted_address);
            infowindow.open(map, marker);

        });
          google.maps.event.addListener(marker, 'dragend', function() {
            geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
              if (results[0]) {        
                  bindDataToForm(results[0].formatted_address,marker.getPosition().lat(),marker.getPosition().lng());
                  infowindow.setContent(results[0].formatted_address);
                  infowindow.open(map, marker);
              }
            }
            });
        });
    }
    function bindDataToForm(address,lat,lng){
       document.getElementById('location').value = address;
       document.getElementById('lat').value = lat;
       document.getElementById('lng').value = lng;
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  • You can explain what is being done in the code, or insert comments in the most relevant lines?

Browser other questions tagged

You are not signed in. Login or sign up in order to post.