Hello everyone, I am currently working on a form that is functioning well. However, I am facing an issue with setting the localization of a place manually using latitude and longitude values. To address this, I decided to create a map with a draggable marker. When I move the marker, the lat and lng values change in the console. Now, my goal is to dynamically set these updated values in the form so that they can be saved properly. Specifically, I want the latitude field to reflect the lat value and the longitude field to reflect the lng value.
Below is the HTML structure of my form (using Twig with Symfony):
{% extends 'base.html.twig' %}
{% block body %}
<!-- Left and right buttons -->
<div class="col-8 mx-auto">
<br/><br/><br/><br/>
<div class="card">
<div class="card-header header-elements-inline">
<h6 class="card-title">Create a place</h6>
</div>
<br/>
<div class="card-body">
{{ form_start(form) }}
<div class="form-group">
<label for="form_username">Content :</label>
{{ form_widget(form.content) }}
</div>
// Other form fields here...
<div class="form-group">
<label for="form_username">Longitude:</label>
{{ form_widget(form.longitude) }}
</div>
<div class="form-group">
<label for="form_username">Latitude:</label>
{{ form_widget(form.latitude) }}
</div>
<div class="card px-3">
<br/>
<div class="map-container" id="map_marker_simple"></div>
{% block javascripts_map %}
{% endblock %}
<br/>
</div>
</div>
// Submit button and ending form tag
</div>
</div>
</div>
// Additional content
In addition, below is my JS script handling the form:
{% extends 'admin/user/new_place.html.twig' %}
{% block javascripts_map %}
<script type="text/javascript">
// JavaScript code for working with Google Maps and markers
// Initialize module functions
var GoogleMapMarkerBasic = function() {
var _googleMapMarkerBasic = function() {
if (typeof google == 'undefined') {
console.warn('Warning - Google Maps library is not loaded.');
return;
}
function initialize() {
var map_marker_simple_element = document.getElementById('map_marker_simple');
var myLatlng = new google.maps.LatLng(('{{ place.latitude }}'), ('{{ place.longitude }}'));
var mapOptions = {
zoom: 10,
center: myLatlng
};
var map = new google.maps.Map(map_marker_simple_element, mapOptions);
var contentString = 'Marker';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
draggable: true,
title: ('{{ place.title }}'),
animation: google.maps.Animation.DROP
});
marker.addListener('drag', function() {
infowindow.open(map,marker);
var lat = marker.getPosition().lat();
var lng = marker.getPosition().lng();
console.log(lat, lng)
});
};
google.maps.event.addDomListener(window, 'load', initialize);
};
return {
init: function() {
_googleMapMarkerBasic();
}
}
}();
document.addEventListener('DOMContentLoaded', function() {
GoogleMapMarkerBasic.init();
});
</script>
{% endblock %}
This screenshot shows how the form appears visually:
https://i.sstatic.net/fdd0l.png
Thank you in advance to anyone who can provide assistance with this matter. :)