Mapael + Raphael, can't be initialized : "cannot read property of undefined"

Question

I'm trying to set up a map using Rapheal (v2.1.4) and Mapael (v1.1.0) plugins but I get this error :

Uncaught TypeError: Cannot read property 'x' of undefined

I don't understand where my error is

DOM:

<div class="row">
    <div class="col-md-12">
        <div class="mapDepFr"></div>
    </div>
</div>

JS:

<script src="{{ asset('js/raphael-min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/jquery.mapael.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/maps/france_departments.js') }}" type="text/javascript"></script>
    <script>
        $(".mapDepFr").mapael({
            map: { name: "france_departments", }

        });
    </script>

The mapDepFr div is placed before the Js part and all the js files are well loaded.

Where is my mistake ?

Tanks.

Answer 1

You'll want to create the map after the DOM is loaded.

<script>
  $(function(){ // jQuery shorthand for DOM ready
    $(".mapDepFr").mapael({
      map: { name: "france_departments", }
    });
  });
</script>