First, this sounds like the kind of thing someone's likely already built.
Second, while it sounds like you mean HTML image maps and not geological maps, this ALA article might still help you, because it sounds like your areas are being dynamically created, right? (otherwise you'd just write this in static HTML):
<map id="pm0102" name="pm0102"> <area name="area" id="pa01021" shape="poly" alt="Sun" onclick="alert('bla')"/></map>
<map id="pm0102" name="pm0102"></map>
I need to create an area for it. So I first write (inside a function that I call)
map1 = document.getElementById("pm0101")
You know each element on the page needs its own id, right?
But yeah, you could make an array of map elements (getElementsByTagName("map")
and cycle through each map element and add your areas using
Ideally that would be a separate "helper" function, something that, all it does is make areas and all the attributes the tag has (id, name, shape).
As you cycle through each map of your nodeList (you'd get a nodeList of maps with getElementsByTagName), you add to each map an area, and set the special information of each area there (I don't know where you're getting the data, but again the linkk above might help with that). The onclick function would also be defined elsewhere, and referenced by the area elements.
Personally, I like CSS maps anyway... more accessible, usually load faster, and work even for me, who has scripts disabled most of the time. Only thing is, they cannot have dynamic properties. If possible, see if you can't start with a working HTML/CSS based image map, then layer JS on top of that.