Multiple markers

[frojd]

Multiple markers

[marteinn]

@khashashin No, you can only add one marker per input, its a builtin limitation.

But there are other ways to accomplish multiple markers by either:

• Using a stream field where you create a new Geo block per marker (https://github.com/Frojd/wagtail-geo-widget/blob/develop/example/geopage/models.py#L73)
• Or using a InlinePanel where every marker is a new model (example: https://github.com/Frojd/wagtail-geo-widget/blob/develop/example/geopage/models.py#L52)

Hope this answers you question!

[khashashin]

Yeah thanks that is what I done. In case if some one needed. I've did following:

#models.py

from wagtail.admin.edit_handlers import StreamFieldPanel
from wagtail.core.fields import StreamField
from wagtail.core.models import Page
from wagtail.core import blocks
from django.db import models

CENTER_LTD = 47.5545913
CENTER_LGT = 7.5594406


class AddressBlock(blocks.StructBlock):
	latitude = blocks.FloatBlock(blank=True, default=0)
	longitude = blocks.FloatBlock(blank=True, default=0)

	street = blocks.CharBlock(max_length=255, blank=True, default='')
	street_number = blocks.CharBlock(max_length=20, blank=True, default='')
	zip = blocks.CharBlock(max_length=20, blank=True, default='')
	city = blocks.CharBlock(max_length=255, blank=True, default='')
	country = blocks.CharBlock(max_length=255, blank=True, default='')

	title = blocks.CharBlock(max_length=255, blank=True, default='')
	description = blocks.TextBlock(blank=True, default='')

	class Meta:
		icon = 'site'


class MapSection(Page):
	template = 'home/sections/map_section.html'

	center_latitude = models.FloatField(
		"Latitude", default=CENTER_LTD, help_text="Default to Basel", blank=True)
	center_longitude = models.FloatField(
		"Latitude", default=CENTER_LGT, help_text="Default to Basel", blank=True)
	map_zoom = models.IntegerField("Map Default Zoom Setting", default=13, blank=True)

	addresses = StreamField([
		('address', AddressBlock())
	], blank=True)

	content_panels = Page.content_panels + [
		StreamFieldPanel('addresses'),
	]

In your template:

{% block content %}
    <div class="map-content">
        <div id="map">

        </div>
    </div>
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={{ settings.home.GoogleApiSettings.google_api_key }}"></script>
    <script type="text/javascript">
        let addresses = [];
        {% for address in self.addresses %}
            addresses.push([
                {{ address.value.latitude }},
                {{ address.value.longitude }},
                "{{ address.value.title }}",
                "{{ address.value.description }}"
            ]);
        {% endfor %}

        const map = undefined;
        const markers = [];

        function addMarker(lat, long, title, text) {
            const latLng = new google.maps.LatLng(lat, long);
            const marker = new google.maps.Marker({
                position: latLng,
                map: map,
                title: title,
                desc: "<h3>" + title + "</h3>" + text
            });
            const popup = new google.maps.InfoWindow();
            google.maps.event.addListener(marker, 'click', function() {
                popup.setContent(marker.desc);
                popup.open(map,marker);
            });
            markers.push(marker);
        }

        // Initialize and add the map
        function initMap() {

            const center = {lat: {{ self.center_latitude }}, lng: {{ self.center_longitude }}};

            const map = new google.maps.Map(document.getElementById("map"), {
                zoom: {{ self.map_zoom }},
                center: center,
            });

            addresses.forEach(function (address) {
                addMarker.apply(undefined, address);
            });
        }

        google.maps.event.addDomListener(window, 'load', initMap());
    </script>
{% endblock %}

[marteinn]

Just to clarify to anyone who would be reading this issue, the solution above is a custom solution that do not use "wagtail-geo-widget".