I need to pass latitude and longitude variables to my template in order to display a location on Google Maps. To do this, I am using template variables within JavaScript:
<script type="text/javascript">
var map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: {lat: {{ m_city.location.y }}, lng: {{ m_city.location.x }}},
zoom: 10
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=KEY&callback=initMap"
async defer></script>
While everything works fine in Firefox, Chrome (v.42) does not display the map at all. Strangely enough, when I hard code the generated latitude and longitude values into the template, Chrome shows the map as expected.
Can anyone help me understand why this discrepancy is occurring?
UPDATE
After Selcuk pointed out in the comments, it became clear that the issue was with the decimal separator being a comma instead of a period. This discrepancy arose due to different language settings in different browsers. By setting USE_L10N to False, the problem was resolved.