Limit on a services area module

1

Hey everyone Im trying to do a services area page with google maps but I cant get more then 10 on the limits

{% component source: "Service Areas"
  , limit: "10"
  , object: "collection"
  , collectionVariable: "serviceAreas"
  , type: "module" %}

<div class="container mx-auto my-8">

  <div
    id="map"
    class="w-full bg-gray-300 rounded-xl"
    style="height: 1200px;"></div>
</div>

<script>
  var serviceAreas = [
    {% for item in serviceAreas.items %}
    {
      name: "{{ item.name }}",
      postcode: "{{ item.postcode }}",
      placeId: "{{ item.placeID }}",
      lat: {{ item.Coordinateslatitude }},
      lng: {{ item.Coordinateslongitude }}
    },
    {% endfor %}
  ];

  function initMap() {

    var mapStyles = [
      {
        featureType: "poi",
        elementType: "labels",
        stylers: [{ visibility: "off" }]
      },
      {
        featureType: "poi.business",
        stylers: [{ visibility: "off" }]
      },
      {
        featureType: "road",
        elementType: "labels.icon",
        stylers: [{ visibility: "off" }]
      }
    ];

    // Initial map setup with styles
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: { lat: -26.785616, lng: 153.057947 },
      styles: mapStyles
    });

    // Add markers for each service area
    serviceAreas.forEach(function(area) {
      var marker = new google.maps.Marker({
        position: { lat: area.lat, lng: area.lng },
        map: map,
        title: area.name,
        icon: '/assets/icons/map-marker-radius.png'
      });

      // Optionally, add info window for each marker
      // var infowindow = new google.maps.InfoWindow({
      //   content: '<h3>' + area.name + '</h3><p>' + area.postcode + '</p>'
      // });

      // marker.addListener('click', function() {
      //   infowindow.open(map, marker);
      // });
    });
  }
</script>
<script
  src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap"
  async
  defer></script>
2

Hi @luke
Is it because you have the component limit set to 10, ie limit: "10"
Have you tried increasing this?

1 Like
3

Yes when I have it at 10 the pin display on the map but if I increase it it displays nothing

4

Ok, that sounds like one of your items is outputting data that is breaking the javascript.
Try increasing the limit gradually to pin point which item I causing the issue, then look in the page code/browser console/inspect to see if you can identify where the script is breaking.
This is often caused by a special character or quotation mark in your module item data that conflicts with the javascript object structure.

1 Like
5

Ok will do. Thanks Adam

6

ok my problem was what ever I did to the data file it didn’t import all the LAT and LONG and if any were blank it would go into error hence why it would only display the 10.

Thanks again Adam