<p>At a glance, it sounds like it's just a matter of waiting for everything to finish loading. You are trying to call a map which has not yet been initialized.</p>
<p>Good news! The <code>tag</code> method includes a <a href="https://plugins.doublesecretagency.com/google-maps/dynamic-maps/twig-php-methods/#tag-options" rel="nofollow noreferrer"><code>callback</code> option</a> which allows you to specify a JavaScript function to be called <em>after</em> the map has finished loading...</p>
<pre><code>{{ map.tag({
    'callback': 'moreJavascript'
}) }}

{% js %}
    function moreJavascript() {
        var map = googleMaps.getMap('mapAlpha');
        console.log(map);
    }
{% endjs %}
</code></pre>
<p>Take a look at this <a href="https://plugins.doublesecretagency.com/google-maps/guides/clustering-markers/" rel="nofollow noreferrer">practical example</a> of how someone could use the <code>callback</code> option to enable marker clustering... I know that you aren't trying to cluster your markers, but the broader execution is the same.</p>

CC BY-SA 4.0
2021-04-11T21:54:16.003Z
Pefect — I've successfully added a KML layer, is there an example of toggling a map layer on/off?
Charlie Triplett
CC BY-SA 4.0
2021-04-12T22:30:09.427Z
That's a separate question, but the answer might be no. I've added a [feature request on GitHub](https://github.com/doublesecretagency/craft-googlemaps/issues/24), so feel free to follow along there for developing information.
Lindsey D
CC BY-SA 4.0
2021-04-11T19:45:42.643Z
2021-04-11T19:45:42.643Z
Lindsey D
<p>I love the new Google Maps plugin, it seems really promising.</p>
<p>I am really struggling to manipuluate the map in JS in the new Google Maps plugin.</p>
<p>I have a dynamic map that filters fatal and serious injury crashes (by mode of transportation, outcome, and year) and adds KML layers.</p>
<p>I'm successfully loading the map in Twig — Now I am working through manipulating it in JS but can't seem to get past the first step.</p>
<blockquote>
<p>Console: [GM] Unable to find map &quot;mapAlpha&quot;</p>
</blockquote>
<pre><code>  {% set fatalities = craft.entries.section('crashes').outcome('fatal').all() %}
  {% set injuries = craft.entries.section('crashes').outcome('injury').all() %}

  {% set options = {
    'id' : 'mapAlpha'
  } %}

  {% set map = googleMaps.map([], options)
    .zoom(12)
    %}

  {% do map.markers(fatalities, {
    'icon': '/assets/images/ui/red-dot.png',
    'infoWindowTemplate' : '/modules/info-bubble.twig'
  }) %}
  {% do map.markers(injuries, {
    'icon': '/assets/images/ui/blue-dot.png',
    'infoWindowTemplate' : '/modules/info-bubble.twig'
  }) %}


  {{ map.tag() }}

  &lt;script&gt;
  {% js %}
    var map = googleMaps.getMap('mapAlpha');
    
  {% endjs %}
  &lt;/script&gt;
</code></pre>

<plugin-googlemaps>
Manipulating the map in JS - [GM] Unable to find map
# Manipulating the map in JS - [GM] Unable to find map

(Asked by: username_0 on 2021-04-11)

I love the new Google Maps plugin, it seems really promising.
I am really struggling to manipuluate the map in JS in the new Google Maps plugin.
I have a dynamic map that filters fatal and serious injury crashes (by mode of transportation, outcome, and year) and adds KML layers.
I'm successfully loading the map in Twig — Now I am working through manipulating it in JS but can't seem to get past the first step.

Console: [GM] Unable to find map "mapAlpha"

  {% set fatalities = craft.entries.section('crashes').outcome('fatal').all() %}
  {% set injuries = craft.entries.section('crashes').outcome('injury').all() %}

  {% set options = {
    'id' : 'mapAlpha'
  } %}

  {% set map = googleMaps.map([], options)
    .zoom(12)
    %}

  {% do map.markers(fatalities, {
    'icon': '/assets/images/ui/red-dot.png',
    'infoWindowTemplate' : '/modules/info-bubble.twig'
  }) %}
  {% do map.markers(injuries, {
    'icon': '/assets/images/ui/blue-dot.png',
    'infoWindowTemplate' : '/modules/info-bubble.twig'
  }) %}


  {{ map.tag() }}

**Tags:** plugin-googlemaps

---

## 1 answers

### Answer by username_1 on 2021-04-11. Score: 2 | Accepted answer

At a glance, it sounds like it's just a matter of waiting for everything to finish loading. You are trying to call a map which has not yet been initialized.
Good news! The tag method includes a callback option which allows you to specify a JavaScript function to be called after the map has finished loading...
{{ map.tag({
    'callback': 'moreJavascript'
}) }}

{% js %}
    function moreJavascript() {
        var map = googleMaps.getMap('mapAlpha');
        console.log(map);
    }
{% endjs %}

Take a look at this practical example of how someone could use the callback option to enable marker clustering... I know that you aren't trying to cluster your markers, but the broader execution is the same.

> **Comments:**
> **username_0**: Pefect — I've successfully added a KML layer, is there an example of toggling a map layer on/off?  
> **username_1**: That's a separate question, but the answer might be no. I've added a [feature request on GitHub](https://github.com/doublesecretagency/craft-googlemaps/issues/24), so feel free to follow along there for developing information.  

---

