Multiple Markers for Google Maps

CMS > Custom Modules
1

I’m setting up Custom Modules so that my client can add multiple locations to a google map. I’ve set-up name, address, tel, email. I’ve also added the Longitude and Latitude within Custom Modules rather than in the Settings/Site Information as in the Lawyers website.

I’m using the code (map.inc in includes) from the example Lawyer websites with Google Maps.

To get multiple address I’ve changed:

{% for item in map.items -%}
{% if forloop.last == true -%}
[’{{map.items[0].Name}}’, +’{{map.items[0].LocationLat}}’, +’{{map.items[0].LocationLng}}’]
{% else -%}
[’{{map.items[0].Name}}’, +’{{map.items[0].LocationLat}}’, +’{{map.items[0].LocationLng}}’],
{% endif -%}
{% endfor -%}
];

…to…

{% for item in map.items -%}
{% if forloop.last== true -%}
[’{{map.items[0].Name}}’, +’{{map.items[0].LocationLat}}’, +’{{map.items[0].LocationLng}}’],
[’{{map.items[1].Name}}’, +’{{map.items[1].LocationLat}}’, +’{{map.items[1].LocationLng}}’],
[’{{map.items[2].Name}}’, +’{{map.items[2].LocationLat}}’, +’{{map.items[2].LocationLng}}’],
[’{{map.items[3].Name}}’, +’{{map.items[3].LocationLat}}’, +’{{map.items[3].LocationLng}}’],
[’{{map.items[4].Name}}’, +’{{map.items[4].LocationLat}}’, +’{{map.items[4].LocationLng}}’],
[’{{map.items[5].Name}}’, +’{{map.items[5].LocationLat}}’, +’{{map.items[5].LocationLng}}’],
[’{{map.items[6].Name}}’, +’{{map.items[6].LocationLat}}’, +’{{map.items[6].LocationLng}}’],
[’{{map.items[7].Name}}’, +’{{map.items[7].LocationLat}}’, +’{{map.items[7].LocationLng}}’],
[’{{map.items[8].Name}}’, +’{{map.items[8].LocationLat}}’, +’{{map.items[8].LocationLng}}’],
[’{{map.items[9].Name}}’, +’{{map.items[9].LocationLat}}’, +’{{map.items[9].LocationLng}}’],
[’{{map.items[10].Name}}’, +’{{map.items[10].LocationLat}}’, +’{{map.items[10].LocationLng}}’],
[’{{map.items[11].Name}}’, +’{{map.items[11].LocationLat}}’, +’{{map.items[11].LocationLng}}’],
[’{{map.items[12].Name}}’, +’{{map.items[12].LocationLat}}’, +’{{map.items[12].LocationLng}}’],

                    {% else -%}
                    	
                   
                 
              
                {% endif -%}
                {% endfor -%}
            ];

Unfortunately, I can only get a maximum of 10 Markers on the map which I think is being limited by Google Maps.

I know there are third-party options available but I’d like to try and keep the same format.

Is there a workaround or can anything be changed within map.inc?

Any help would be much appreciated.

2

@Dave I’m not familiar with that specific template, or function, but seeing a limit of ten makes me think default module limit. If no item limit is defined for a module, then the default limit is 10 items displaying. I’m not sure if you’re rendering a collection on the page or if this is in a module layout.

Perhaps defining a higher limit in the module insertion would display more map items. If there is a module insertion try adding limit: "100" to it.
So it might look something like this:
{% component source: "Map Markers", layout: "List", limit: "100", type: "module" %}
(this is just for illustration purposes, I don’t know what the actual module insertion might look like)

If it’s not a module that you’re working with then maybe I’m really off base.

3

Changing the limit fixed it, thanks.

1 Like
4

Adding a comment here as it may be useful for some sites requiring custom mapping. Activ’Map is a jQuery/Bootstrap plugin using Google Maps API V3 to display multiple custom map markers sorted by category. We’ve successfully used it a couple of times via custom module. E.g. see Garden Gifts – NZ plant gifts, plant delivery, sympathy gifts, pot plants and housewarming gifts.

1 Like
5

@on.works - We use that plugin as well :+1: