Hello. Is it possible to somehow get coordinates into a form using Google Maps Api? For example, I have some frame with a map, I put a label there, and the coordinates of that label are transferred to my form?

There is a code from my old project. But here I enter point A and B, and a path is drawn between them, here I can pull out lng and lat. But can I find out the coordinates without entering a point, and just move the label on the map?

function GetMap($inCity, $outCity) { echo '<center> <iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/directions?origin='.$outCity.'&destination='.$inCity.'&key=ХХХ_CEjbAbKb0Lfqjlk" allowfullscreen></iframe> </center>'; } $request_params = array('origin' => $out ->street, 'destination'=> $in ->street, 'key'=>'ХХХ_HHpeZGjfgPpsFTBVPHXu4' ); $get_params = http_build_query($request_params); $str = json_decode(file_get_contents('https://maps.googleapis.com/maps/api/directions/json?'.$get_params)); foreach ($str->routes[0]->legs[0]->steps as $item) { $item->end_location->lng; // узнаем lng }
  • Give an example of the code that you already have. - Maxim Zasorin
  • This is applied in the Latitude and Longitude of a Point tool itouchmap.com/latlong.html - nikant25

2 answers 2

Can. The working example is below.

 function updateCoordinates(lat, lng) { document.getElementById('lat').value = lat; document.getElementById('lng').value = lng; } function initMap() { var map, marker; var myLatlng = { lat: 55.74, lng: 37.63 }; document.getElementById('lat').value = myLatlng.lat; document.getElementById('lng').value = myLatlng.lng; map = new google.maps.Map(document.getElementById('map'), { zoom: 4, center: myLatlng }); marker = new google.maps.Marker({ position: myLatlng, map: map, draggable: true }); marker.addListener('dragend', function(e) { var position = marker.getPosition(); updateCoordinates(position.lat(), position.lng()) }); map.addListener('click', function(e) { marker.setPosition(e.latLng); updateCoordinates(e.latLng.lat(), e.latLng.lng()) }); map.panTo(myLatlng); } 
 #map { margin: 10px; height: 400px; } 
 <div id="coordinates"> Click somewhere on the map. Drag the marker to update the coordinates. </div> <div> <label> lat <input type="text" id="lat"/> </label> <label> lng <input type="text" id="lng"/> </label> </div> <div id="map"></div> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBbz9SsxmvvV-mXRkRGTH8F4cENndiecOk&libraries=places&callback=initMap" async defer></script>

JSFiddle example

    I did not use the google API (I prefer osm and leaflet), but the documentation contains the following information:

    UI events in the Google Maps JavaScript API usually pass their argument, which can be received by the event listener. This argument reports the state of the user interface at the time of the event. For example, a user interface 'click' event typically dispatches a MouseEvent event with the latLng property, denoting the point of depression on the map. This behavior is typical only for user interface events, no arguments are passed for MVC state change events.

    Consequently, the coordinates of the point at which the click was made can be obtained by listening to the click event on the map:

     map.addListener('click', function(e) { console.log(e.latLng); /* do something */ });

    In general, it is necessary to look towards listening to events. Well, if we are talking about the label and tracking its movements, you can create a floating marker (in latLng - any coordinates)

     marker = new google.maps.Marker({ position:latLng, map:map, draggable:true );

    and hang an event handler on it. If the endpoint is interesting, the dragend event (when the marker movement ends):

     marker.addListener('dragend', function(e) { console.log(e.latLng); /* do something */ });

    Well, you can directly get lat and lng by replacing e.latLng with

     e.latLng.lat(); e.latLng.lng();