Multiple Image-maps, one not working?

[Spunky]

Ok, there has got to be something so minute that is causing an issue I am having with running two image maps on the same HTML page, which I know is possible.

 

I am using Google Static Maps for my images and they are getting their data using AngularJS from an Object, so for simplicity, I will be providing an actual image.

<div id="mapWrap" ng-controller="Ctrl">	  <div id="BigMap" class="myStaticMap">	  	<img ng-src="https://maps.googleapis.com/maps/api/staticmap?" usemap="#map1">	  	<h4 class="mapTitle">Area</h4>	</div>  <div id="OffSite" class="myStaticMap">  	<img src="https://maps.googleapis.com/maps/api/staticmap?" usemap="#map2">  <h4 class="mapTitle">Site</h4>  </div>    <map name="map1" id="map1">    <area ng-repeat="x in allSites" alt="{{x.name}}" title="{{x.name}}" ng-click="allClick(x.name,x.address,x.link)" shape="poly" coords="{{x.htmlcoords}}" />    <area alt="{{Object[0].name1 + Object[0].name2}}" title="{{Object[0].title}}" ng-click="thisClick(Object[0].name1,Object[0].name2,Object[0].address1,Object[0].address2,Object[0].link1,Object[0].link2)" shape="poly" coords="{{Object[0].htmlcoords}}" />    <area alt="{{Object2[0].name1 + Object2[0].name2 + Object2[0].name3}}" title="{{Object2[0].title}}" ng-click="thisClick(St127th[0].name1,Object2[0].name2,St127th[0].name3,Object2[0].address1,Object2[0].address2,Object2[0].address3,Object2[0].link1,Object2[0].link2,Object2[0].link3)" shape="poly" coords="{{Object2[0].htmlcoords}}" />    <area alt="{{Object3[0].name}}" title="{{Object3[0].name}}" href="#" shape="poly" coords="{{Object3[0].htmlcoords}}" id="SpecialMarker" />    </map>    <map name="map2" id="map2">    	<area ng-repeat="y in Group1" alt="{{y.name}}" title="{{y.name}}" ng-click="allClick(y.name,y.address,y.link)" shape="poly" coords="{{y.htmlcoords}}" />    	<area ng-repeat="z in Group2" alt="{{z.name}}" title="{{z.name}}" ng-click="allClick(z.name,z.address,z.link)" shape="poly" coords="{{z.htmlcoords}}" />    </map></div>

So, everything in "map2" is what is not working. What I have is 2 maps with markers. map2 actually starts out hidden:

div#map2{  display:none;}

Then, when a certain marker on map1 is clicked, map1 fades out and map2 fades in:

$(document).ready(function(){$('#SpecialMarker').click(function(e){       $('div#BigMap').fadeOut('slow', function(){        $('div#OffSite').fadeIn('slow');    });    	$("#tagWrap").collapse('hide');});

SpecialMarker you will notice is the 3rd <area> tag located on map1.

 

Ok, so, all of that works BEAUTIFULLY. The clicking, the switching, blah blah. The problem is, when map2 is on the screen, nothing happens when the markers appear. They appear all right. And the <area> tags for map2 are even set right as far as their alt="", title="", and coords="" go. They are filled up as expected via the Object build for them, which for the record incase it is important, I use the object to fill in the map coordinates to create the Google Static Map.

 

What doesn't go as planned is the ng-click="(x.name,x.address,x.link)". Only for map2. map1, although exactly the same (seemingly), works fine. I am used to AngularJS giving me trouble, but the weird part about it all is that the following CSS doesn't get applied to the <area> tag for map2:

area:hover{  cursor: pointer;}

Now, that could be simply because the coordinates aren't being placed correctly ofcourse since the <area> tag seems to be malfunctioning.

 

So, to sum up a bit. The <area> tags for map2 are appearing in the HTML correctly, the amount they're supposed to with ng-repeat, etc. And their properties are being filled fine too EXCEPT for ng-click. As well as the CSS not working, which possibly is because the coordinates are malfunctioning BUT the coordinates appear just fine in the HTML when I inspect element in the browser.

 

And no, I am not getting any errors.

 

I hope I explained my scenario well enough. Any suggestions?

Edited April 9, 2015 by Spunky

[justsomeguy]

<map name="map1" id="map2">

That's a problem. Also, there's no "div#map1" or "div#map2" element.

[Spunky]

<map name="map1" id="map2">

That's a problem. Also, there's no "div#map1" or "div#map2" element.

 

 

If that's all you found then I don't know what the problem is. I changed all the element/property names because this is for work and trying to keep it simple but instead I caused other errors to show which aren't in my code! My fade in and out work fine and the name and id are equal. I just failed to keep it consistent in the code I pasted here.

[justsomeguy]

If the code you're actually running is different than the code you posted here then we can't really help you. We can help you with only what we see, if that happens to somehow coincide with another problem you're having that you can fix, great, but if that code above is not what you are using then you would have to somehow make sure that both pieces of code have the exact same bug in order for anyone here to help. If you're changing things before you post it then you might have changed something causing the problem. I can only comment on what you're showing me. If you absolutely need to replace things then use a find and replace tool to make sure that everything gets replaced correctly. If you're doing it on your own then you might be hiding the original bugs and introducing new ones.

[Spunky]

If the code you're actually running is different than the code you posted here then we can't really help you. We can help you with only what we see, if that happens to somehow coincide with another problem you're having that you can fix, great, but if that code above is not what you are using then you would have to somehow make sure that both pieces of code have the exact same bug in order for anyone here to help. If you're changing things before you post it then you might have changed something causing the problem. I can only comment on what you're showing me. If you absolutely need to replace things then use a find and replace tool to make sure that everything gets replaced correctly. If you're doing it on your own then you might be hiding the original bugs and introducing new ones.

 

FYI I fixed that above in my code, I am changing the code in here, so no it is not causing the errors to occur in my own code..that doesn't even make any sense otherwise new errors would occur than the one I would originally need to post about. It was just 2 things I messed up so calm down they're called human errors.

[Spunky]

Got it

[justsomeguy]

I'm perfectly calm. But I see people do that a lot - they post one piece of code, people offer help, then they say that was just a typo and their actual code is different. We can't help you with code that we're not seeing, that's all I'm saying.