Create element only on first mouseover

I suggest not creating it in onmouseover , but already have it in HTML - only hidden. So you can simply display / hide it with CSS without needing JavaScript:

#ex1 map {
  display:none;
}

#ex1 img:hover + map {
  display:block;
  border: 1px solid red; /* Só para ajudar a ver que funciona */
}

<span id="ex1" >
<img width="794px" height="593px" src="images/crateria.png" style="margin:0;" alt="Crateria" />
  <map name="crateria-map">
  </map>
</span>

If, on the other hand, you want the tag to remain there after the first mouse pass, one way to do this (not necessarily the best) is to reset the function used in onmouseover after it is first used:

function mostra(){
    var para = document.createElement("map");
    para.setAttribute("name", "crateria-map");
    document.getElementById("ex1").appendChild(para);

    mostra = function() { /* Não faz nada */ }
}

#ex1 map {
  border: 1px solid red; /* Só para ajudar a ver que funciona */
}

<span id="ex1" >
<img width="794px" height="593px" src="images/crateria.png" style="margin:0;" alt="Crateria" onmouseover="javascript:mostra();" />
</span>

Finally, if there are N images and not just one, a variation of the bfavaretto response should resolve your problem: check not a specific element (by id), but rather the parent of the image receiving hover (using event.target to get the image, parentElement to get span lastChild to get the last child element). Example:

function mostra(){
  if ( event.target.parentElement.lastChild.nodeName != "MAP" ) {
    var para = document.createElement("map");
    para.setAttribute("name", "crateria-map");
    event.target.parentElement.appendChild(para);
  }
}

map {
  border: 1px solid red; /* Só para ajudar a ver que funciona */
}

<span id="ex1" >
<img width="100px" height="100px" src="images/crateria.png" style="margin:0;" alt="Crateria" onmouseover="javascript:mostra();" />
</span>

<span id="ex2" >
<img width="100px" height="100px" src="images/crateria.png" style="margin:0;" alt="Crateria" onmouseover="javascript:mostra();" />
</span>

<span id="ex3" >
<img width="100px" height="100px" src="images/crateria.png" style="margin:0;" alt="Crateria" onmouseover="javascript:mostra();" />
</span>

You can check that <span> already contains a <map> at the end, and only create and insert the map if it is not already there:

function mostra(){
    var span = document.getElementById("ex1");
    // verifica se o último filho do span é um map
    var contemMapa = span.lastChild.nodeName === 'MAP';
    if(!contemMapa) {
        var para = document.createElement("map");
        para.setAttribute("name", "crateria-map");
        document.getElementById("ex1").appendChild(para);
    }
}

link

You could try putting a counter, checking if the function has already been run once and so it does not run anymore. Example below:

tag = 0;

function mostra(){
     if (tag != 1)
   {
   var para = document.createElement("map");
   para.setAttribute("name", "crateria-map");
   document.getElementById("ex1").appendChild(para);
   tag = 1;
   }

}