Setting the map ID dynamically doesn't work

[darylknight]

If you want to do anything with the map in JS or Twig, you have to know it's ID. In Smart Maps, this was reliably smartmap-mapcanvas-1. In Google Maps, it's random every time the page loads.

If I do this, it works fine:

{% set options = {
  id: 'map-21',
  height: 600,
} %}

But if I try to use the block's ID, so that it's still unique if the map matrix block is added twice,

{% set options = {
  id: 'map-' ~ block.id,
  height: 600,
} %}

Then I get a JS console error saying the block is missing DNA:

[lindseydiloreto]

Interesting. Are you creating multiple maps in a loop?

Would you mind sharing the Twig loop which is generating the map(s)?

[darylknight]

Realistically we're not, but it's theoretically possible so I need to make sure it works. For context, we usually build 90% of our pages with a Matrix field. So in that matrix field there's a map block. Usually when I do anything with JS or something that needs a unique identifier for javascript (like a carousel or map), I use the block.id. While in this case they'll probably only have one map on the whole site, there are other sites I still need to migrate to Google Maps which may have multiple maps on one page, so I need to be able to identify them uniquely rather than hard-coding. The full code would be something like this:

_includes/contentMatrix.twig:

{% if entry.contentMatrix|length %}
  {% for block in entry.contentMatrix.all() %}
    {% include '_includes/content/' ~ block.type %}
  {% endfor %}
{% endif %}

_includes/content/map.twig:

{% set options = {
  id: 'map-filterable',
  height: 600,
} %}

{% set locations = craft.entries.section('projects').projectAddress({ hasCoords: true }).all() %}

{% set map = googleMaps.map(locations, options) %}

{# Run through all markers before rending the map, and set icons #}
{% for marker in locations %}
  {% set iconUrl = '/assets/images/map-pin.png' %}
  {% set markerId = marker.id ~ '-projectAddress' %}

  {% if marker.projectAddress.hasCoords %}
    {# Only add the marker to the map if the project address has coordinates #}
    {% do map.setMarkerIcon(markerId, iconUrl) %}
  {% endif %}
{% endfor %}

{# Once all the marker icons are set, finally draw the map #}
{# using the .tag ends the map chaining and renders it #}
{{ map.tag() }}

That map-filterable needs to be dynamic somehow. And as far as I know, I can't leave it as default, because it's a random ID every time the page is generated, and I have to be able to target the markers to be able to change their icons.

[lindseydiloreto]

I'm having trouble reproducing the bug that you saw.

Let's take this to DM via Craft Discord, and we can report back here when we have more information.

[darylknight]

Thanks for your time on this Lindsey!

For future reference, using a dynamic ID works fine; this error was caused because I was already using 'map-' ~ block.id elsewhere on the page.

[lindseydiloreto]

Awesome, glad it's all sorted out! I'll see if I can refine the error message to prevent this issue from popping up in the future.

[lindseydiloreto]

Not live yet, but I've just refined the error message in cases where the id exists more than once...

[darylknight]

Thank you Lindsey!