How do I get the location of a bookmark and save it to the database using google map?

Question

How do I get the location of a bookmark and save it to the database using google map?

Navigation

#1 by (0 votes)

1

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 it in the database.

I have read the documentation of google map api but have not found how to do this.

@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 it adds a marker, I thought of returning an array with latitude and longitude, but I'm confused as to how I'll get the latitude and longitude back through this function.

php mysql google-maps

asked by anonymous 08.05.2018 / 19:16

1 answer

Validate Captcha for site with accessibility Property 'catch' does not exist on type 'ObservableHttpEventany' ANGULAR 6

score 0 · Accepted Answer

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

First, place two inputs somewhere you want, below mine:

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

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

So, in your <script> or .js file of your map, somewhere within your initMap function 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 so, do not forget to reference this in your google maps api link, I'll add mine and you can see that you have some references using & , so you add &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 in 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, please let me know below that we are working together to align everything.