Maps java script API to Django project - django

Question

I am creating a real estate web platform with Django and postgresql back-end. I have implemented maps API in my HTML template in order to show where the real estate is located.
The code:
<!--Map-->
<div class="row mb-5">
<div class="col-md-12">
<style>
#map{
height:250px;
width: 100%;
}
</style>
<div id="map"></div>
<script>
function initMap(){
var myLatLng = {lat:-33.90, lng:151.16};
var options = {
zoom:10,
center:myLatLng
};
var map = new
google.maps.Map(document.getElementById('map'),options);
}
</script>
</div>
</div>
Markers will be added in the next step because I have to figure out how I can retrieve my LAT and LNG values from the database and display them inside the script. Does anyone have the answer?
To explain that a bit further, I want to make something like
<script>
function initMap(){
var myLatLng = {lat:{{listing.geo_lat}}, {{listing.geo_lng}}};
var options = {
zoom:10,
center:myLatLng
};
But I have tried that and it seems that either google api cant read the proper format of my values or listing.geo_lat is not properly working inside the script.

Answer 1

Dont really know if it's an optimised solution but that works.
<div class="row mb-5">
<div class="col-md-12">
<style>
#map{
height:250px;
width: 100%;
max-width: none;
}
</style>
<div id="map"></div>
<script>
let lat = "{{listing.lat}}";
let lng = "{{listing.lng}}";
let geo_lat = parseFloat(lat);
let geo_lng = parseFloat(lng);
function initMap(){
var myLatLng = {lat:geo_lat, lng:geo_lng};
var options = {
zoom:11,
center:myLatLng
};
var map = new
google.maps.Map(document.getElementById('map'),options);
}
</script>
</div>
</div>