<script>
    var event_markers = [
        {% if map_location %}
            { lat: {{ location.coords.y }}, lng: {{ location.coords.x }} },
        {% elif map_locations %}
            {% for location in map_locations %}
                { lat: {{ location.coords.y }}, lng: {{ location.coords.x }} },
            {% endfor %}
        {% endif %}
    ];

    function initMap() {
        var map = new google.maps.Map(
            document.getElementById('map'),
            {
                zoom: {{ map_zoom|default:6 }},
                center:
                    {% if map_location %}
                        event_markers[0],
                    {% else %}
                        { lat: -41, lng: 174 },
                    {% endif %}
            }
        );
        for (var i = 0; i < event_markers.length; i++) {
            var marker = new google.maps.Marker({ position: event_markers[i], map: map });
        }
    }
</script>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key={{ GOOGLE_MAPS_API_KEY }}&callback=initMap">
</script>

<script>
    var event_markers = [
        {% if map_location %}
            { lat: {{ location.coords.y }}, lng: {{ location.coords.x }} },
        {% elif map_locations %}
            {% for location in map_locations %}
                { lat: {{ location.coords.y }}, lng: {{ location.coords.x }} },
            {% endfor %}
        {% endif %}
    ];

    function initMap() {
        var map = new google.maps.Map(
            document.getElementById('map'),
            {
                zoom: {{ map_zoom|default:6 }},
                center:
                    {% if map_location %}
                        event_markers[0],
                    {% else %}
                        { lat: -41, lng: 174 },
                    {% endif %}
            }
        );
        var map_markers = event_markers.map(function (location, i) {
            return new google.maps.Marker({
                position: location,
                map: map
            });
        });
        {% if map_locations %}
            var markerCluster = new MarkerClusterer(map, map_markers,
                { imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' });
        {% endif %}
    }
</script>

{% if map_locations %}
    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
{% endif %}

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key={{ GOOGLE_MAPS_API_KEY }}&callback=initMap">
</script>

Add map clustering when multiple nodes are displayed
Add map clustering when multiple nodes are displayed
