Placemark coordinates from Google Maps
Hello. Is it possible to somehow use the Google Maps Api to get the coordinates into the form? For example, I have a frame with a map, I put a label there, and the coordinates of that label are passed 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 placemark 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
}
2 answers
Can. Working example 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>Example on JSFiddle
I did not use the google API (I prefer osm and leaflet), but the documentation contains the following information:
User Interface events in the Google Maps JavaScript API they usually pass their own argument, which can be received by the event listening block. This argument reports the state of the user interface at the time of the event. For example, the event A user interface 'click' usually passes an event MouseEvent with the LatLng property, indicates the click point on the map. This behavior is typical only for user interface events, and for MVC state change events, the arguments are not specified. transmitted.
Therefore, the coordinates of the point where 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, we need to look in the direction of listening to events. Well, if we are talking about a placemark and tracking its movements, you can create a movable 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 get lat and lng directly by replacing e. LatLng with
e.latLng.lat();
e.latLng.lng();