How to focus input on map , not page scrolling

I have successfully added a the google map plugin to my app but I am having a problem with the map controls.
In one page, things work fine, so I believe I have done correctly.
However, in a second location, I add a div dynamically to a list item, so that I can see the map which coincides with the location details I am saving. The second map shows up fine but when I try to use the controls, they do not work. If I try to scroll the map, the page scrolls. I think maybe this is because the map is inside a list item. I tried adding no-fastclick class to the new div (from search), but no change.
If it is not possible, I guess I will open another page over top but maybe someone has a solution ?

essentially, it is inside something like this :
<div class=“list inline-labels”>
<ul>
<li class=“item-content item-input”>
<div class=“item-inner”>
<div class=“item-title item-label fit-normal”>Map Coordinates:
<div class=“float-right”>
<a id=“mapAnchor-field12” href="#" class=“margin float-left” onclick=“newBugShowMap(this)”><i class=“icon f7-icons ios-only”>placemark</i></a>
</div>
</div>
<div class=“item-input-wrap”>
<input style=“background-color:lightgrey;” type=“text” readonly="" name=“field12” placeholder="…map coordintates as text.">
<div id=“nb-map-wrapper-field12” class=“fitmap”>map goes here when I press placemark</div>
</div>
</div>
</li>

</ul>
</div>

I have also tried putting the map in both a sheet modal and a popup but in each case, the map seems to play with transparency and I have a transparent window with no map. Only worked in a full page. Is there a reason you can think why this would happen also?
thanks