Area map linked to IFrame embeded in it - iphone

Question

I have worked and searched on finding a solution to this iPhone issue for almost a week. I need some help please. I have never done any programming for a smart phone. This is a first. This web page works great on all browsers but not on smart phones. Can you give me some advice on how to fix it or convert it?
I want to update this page so that it works on the iPhone\androdes devices. http://www.westernagencyinc.com/contact_us.html. I have a test page setup http://www.westernagencyinc.com/test.html to work on it and not effect the real page.
The way the "Contact Us" page\map works is it has an map in its top and another html file called location_info.html embeded in an IFRAME below it. The location_info.html file is a list of location with each having a unique anchor name for a city\pin on the map.
The map has pins on each city that are clickable areas with its target being the IFrame and the code look like this:
You can see that When you press on a button/pin on the map a variable anchor is set for that pin (city name) which matches one of the anchors in the location_info.html and that is sent to the IFrame html file so it will move\scroll to the correct location.
The IFRAME that holds the location currently has no scroll bars on it.
<area shape="rect" coords="145,-6,200,48" href="locations_infotest.html#kenmare" alt="Kenmare" target="location_content">
<div id="apDiv10" style="width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch;" >
<iframe scrolling="no" name="location_content" src="locations_infotest.html" width="625" height="190"></iframe>
</dov>
#apDiv8
{
position: absolute;
left: 30px;
top: 255px;
width: 627px;
height: 18px;
z-index: 8;
text-align: left;
}
#apDiv9
{
position: absolute;
left: 30px;
top: 20px;
width: 625px;
height: 409px;
z-index: 9;
text-align: left;
}
#apDiv10
{
position: absolute;
left: 30px;
top: 448px;
width: 625px;
height: 190px;
z-index: 10;
text-align: left;
}