Dynamically Multiple marker google map doesn't show with Django - django

Question

I have a model class name Restaurant with Latitude and Longitude and inserted many data already in this class and by these fields, I wanna show multiple markers of google map.
# restaurant.html
<div id="map"></div>
{% for i in restaurents %}
<script>
var locations = [
[{{ i.restaurant }}, {{ i.latitude }}, {{ i.longitude }}, {{ i.id }}]
];
{#var locations = [#}
{# ['Bondi Beach', -33.890542, 151.274856, 4],#}
{# ['Coogee Beach', -33.923036, 151.259052, 5],#}
{# ['Cronulla Beach', -34.028249, 151.157507, 3],#}
{# ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],#}
{# ['Maroubra Beach', -33.950198, 151.259302, 1]#}
{#];#}
// When the user clicks the marker, an info window opens.
function initMap() {
var myLatLng = {lat: -33.90, lng: 151.16};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: myLatLng
});
var count=0;
for (count = 0; count < locations.length; count++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[count][1], locations[count][2]),
map: map
});
marker.info = new google.maps.InfoWindow({
content: locations [count][0]
});
google.maps.event.addListener(marker, 'click', function() {
// this = marker
var marker_map = this.getMap();
this.info.open(marker_map, this);
// Note: If you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.
});
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBqEz7ozYxKa53JAeN4GFN2HfilyiFCbvw&callback=initMap">
</script>
{% endfor %}
Initially, I have defined some data and it's working good that has commented out in this code. But when I retrieved data via looping from my database then map doesn't work.
I don't understand from where and how I can access this data.
access
var locations = [
[{{ i.restaurant }}, {{ i.latitude }}, {{ i.longitude }}, {{ i.id }}]
];
many time I searched and also got some answer but doesn't work properly.
Thanks for Advance.

Answer 1

{% for i in restaurents %}
<div id="map" style="padding-bottom: 140px; padding-top: 140px"></div>
<script>
function initMap() {
var locations = [];
locations.push({name: {{ i.restaurant }}, latlng: new google.maps.LatLng( {{ i.latitude }}, {{ i.longitude }}) });
locations.push({name: 'Bondi Beach', latlng: new google.maps.LatLng( -33.890542, 151.274856) });
locations.push({name: 'Coogee Beach', latlng: new google.maps.LatLng( -33.923036, 151.259052) });
var uluru = { lat: {{ i.latitude }}, lng: {{ i.longitude }} };
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 8, center: uluru});
for(var j=0; j<locations.length; j++){
var marker = new google.maps.Marker({
position: new google.maps.LatLng({position: locations[j].latlng, map: map, title: locations[j].name}),
});
bounds.extend(locations[j].latlng);
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBqEz7ozYxKa53JAeN4GFN2HfilyiFCbvw&callback=initMap">
</script>
{% endfor %}
Several kinds of steps already I've followed. For example the above code. When I'm gonna access that data then don't work but if I initially define those data it's working fine.