How do I pick up the location of a marker and store it in the database using google map?

Question

I have a marker on my map, it is "draggable", I would like to know how I can find the latitude and longitude of this marker, and later store in the database.

I read the google map api documentation but couldn’t find how to do it.

@Edit:

  var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 15,
          center: franca
        });

        function CarregarEnderecoPorLatLng(latitude, longitude){
          var latlong = [latitude, longitude];
          var marker5 = new google.maps.Marker({
           position: new google.maps.LatLng(latitude, longitude),
           map: map
       });
        return latlong;
        }

        map.addListener('click', function (e) {
          CarregarEnderecoPorLatLng(e.latLng.lat(), e.latLng.lng());
        })

In this attempt to click he adds a marker, I thought of returning an array with latitude and longitude, but I’m confused on how I’m going to get the return of that latitude and longitude through that function.

Answer 1

Leticia, follows the function in which you do what you want, you just have to position it somewhere in your javascript where your initMap

First, position two inputs somewhere you want, follow below my:

<label for="latitude">Latitude:</label>
<input id="latMap"/>

<label for="longitude">Longitude:</label>
<input id="lngMap"/>

So in your <script> or file .js from your map, somewhere inside your map initMap you put this:

// Função de pegar as coordenadas com o clique no mapa
google.maps.event.addListener(map, 'click', function(event) {
                    document.getElementById('latMap').value = event.latLng.lat();
                    document.getElementById('lngMap').value = event.latLng.lng();
                });

            function mapDivClicked (event) {
                var target = document.getElementById('map'),
                    posx = event.pageX - target.offsetLeft,
                    posy = event.pageY - target.offsetTop,
                    bounds = map.getBounds(),
                    neLatlng = bounds.getNorthEast(),
                    swLatlng = bounds.getSouthWest(),
                    startLat = neLatlng.latitude(),
                    endLng = neLatlng.longitude(),
                    endLat = swLatlng.latitude(),
                    startLng = swLatlng.longitude();

                document.getElementById('posX').value = posx;
                document.getElementById('posY').value = posy;
                document.getElementById('latitude').value = startLat + ((posy/350) * (endLat - startLat));
                document.getElementById('longitude').value = startLng + ((posx/500) * (endLng - startLng));
            };

And then, don’t forget to reference this in your google maps api link, I’ll put mine and you can notice that there are some references using the &, you add so &libraries=geometry&callback=initMap

But I’ll put mine as it is for you to see, just put your API key there and put it on your index.

<script src="https://maps.googleapis.com/maps/api/js?key=SUA_CHAVE_API&v=3&libraries=geometry&callback=initMap" defer > </script>

If you have any questions, answer me below that we will work together to align everything.