Dynamically Multiple marker google map doesn't show with 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.

I think you should add JS tag to this question. Also shouldn't your loop be creating only this part: [{{ i.restaurant }}, {{ i.latitude }}, {{ i.longitude }}, {{ i.id }}] ]; and not the whole script for each location ? — Adam
– Adam, Commented Dec 13, 2018 at 22:25
This script included my HTML file. So how can I use here JS tag? — Prosenjit
– Prosenjit, Commented Dec 14, 2018 at 5:38

Prosenjit · Accepted Answer · 2018-12-14 07:36:31Z

{% 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.

Collectives™ on Stack Overflow

Dynamically Multiple marker google map doesn't show with Django

access

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

access

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related