jQuery Mobile double popup for Google Maps contact us page -

the intent:

i have single-template jqm page want have list of different stores have.

here live example: http://bit.ly/wu7n1p

i want have 1 reusable div container popup , update src of nested iframe users tap on 1 location or another. base of implementation jqm google map plugin , have added it.

i'm creating parameter of latitude , longitude of location gets tapped, passing in url showmap.html file iframe src , google map getting loaded in iframe. i've added marker map users can see exact location of store.

---

the issue:

when user taps button open map appears there 2 (2) popups loaded? when close map popup , second blank popup remains , needs closed.

note: of times can recreate issue on first 'open map' button may need tap second, different, 'open map' button recreate issue

i've been stuck on couple of weeks , hoping can shed light on issue me.

here jsfiddle work well. http://jsfiddle.net/hmqzk/3/

---

thank in advance!

wizzyboom

your problem in popupbeforeposition state , line:

    $('#popupmap iframe').attr('src', 'http://map.matchstickcrew.com/showmap.html?latlng=' + latlng); 

i have removed , put inside :

$('.btnshowmap').on('click', function() {      latlng = $(this).attr('data-latlng');      $('#popupmap iframe').attr('src', 'http://map.matchstickcrew.com/showmap.html?latlng=' + latlng); }); 

here's working example: http://jsfiddle.net/gajotres/hmqzk/5/

but if listen advise, should abandon iframe solution , switch gmap v3 api. same thing without using iframe proxy.