How to bind GoogleMaps to GeoDjango?

Question

Django

models.py:

class Location(models.Model):
    name = models.CharField(max_length=100)
    coords = gis_models.PointField(srid=4326, blank=True, null=True)

forms.py:

class LocationForm(gis_forms.ModelForm):
    class Meta:
        model = Location
        fields = ['coords', 'name']

In add_location.html for 'coords' the following code is automatically generated:

<div id="div_id_coords" class="form-group">
    <div class="controls ">
        <div id="id_coords_div_map">

            <div id="id_coords_map"></div>

            <span class="clear_features">
                <a href="javascript:geodjango_coords.clearFeatures()">Delete</a>
            </span>
            <textarea id="id_coords" class="vSerializedField required" cols="150" rows="10" name="coords"></textarea>

            <script type="text/javascript">
                    var map_options = {};
                    var options = {
                        geom_name: 'Point',
                        id: 'id_coords',
                        map_id: 'id_coords_map',
                        map_options: map_options,
                        map_srid: 4326,
                        name: 'coords'
                    };

                    var geodjango_coords = new MapWidget(options);
            </script>

        </div>
    </div>
</div>

In the js file, I tried to bind the Gmap to this generated form and get the coordinates of the marker:

$(document).ready(function(){
    var mapOptions = {...};
    map = new google.maps.Map($('#id_coords_map')[0], mapOptions);

    map.addListener('click', function(e){
            placeMarker(e.latLng, map);
            var position = marker.getPosition();
            $('#id_coords').val(position.lng(), position.lat());

    });

    var marker;
    function placeMarker(latLng, map) {
        marker = new google.maps.Marker({...});
        return marker
    }
});

But it didn't work, in chrome console I get - Uncaught ReferenceError: MapWidget is not defined
Error location - var geodjango_coords = new MapWidget(options);
Please help me figure out how to bind the Gmap and save marker coordinates.
Thanks!!!
PySy is in the head on the page:

<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/25/5/intl/ru_ALL/common.js"></script>

<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/25/5/intl/ru_ALL/map.js"></script>

<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/25/5/intl/ru_ALL/util.js"></script>

<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/25/5/intl/ru_ALL/onion.js"></script>

<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/25/5/intl/ru_ALL/stats.js"></script>

<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/25/5/intl/ru_ALL/controls.js"></script>

<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/25/5/intl/ru_ALL/marker.js"></script>

<script async="" src="//kitbit.net/kb.js" type="text/javascript"></script>

<script async="" src="//t.insigit.com/assets/dct.js" type="text/javascript"></script>

<script async="" src="//kitbit.net/s.js?u=http%3A%2F%2F127.0.0.1%3A8000%2Fadd_location%2F" type="text/javascript"></script>

Answer 1

Такое ощущение, что GoogleMaps не подключен на странице.