CODEWITHSUNDEEP
jqueryjquery-mobilejquery-pluginsgoogle-maps-api-3jquery-mobile-popup
WizzyBoom
WizzyBoom

Reputation: 940

jQuery Mobile double popup for Google Maps contact us page

THE INTENT:

I have a single-template jQM page that I want to have list of the different stores we have.

Here is a live example: http://bit.ly/WU7N1P

I want to have one reusable DIV container for the popup and then update the src of the nested iframe as users tap on one location or the another. The base of my implementation is from the jQM Google Map plugin and I have added to it.

I'm creating a parameter of the latitude and longitude of the location that gets tapped, then passing it in the URL to the showMap.html file which is the iframe src and where the Google Map is getting loaded in the iframe. I've also added a marker to the map so users can see the exact location of the store.

THE ISSUE:

When a user taps a button to open a map to it appears that there are two (2) popups that get loaded? So when you close the map popup and second blank popup remains and it too needs to be closed.

Note: Most of the times you can recreate this issue on the first 'open map' button but may need to tap a second, different, 'open map' button to recreate the issue

I've been completely stuck on this for a couple of weeks and am hoping someone can shed some light on this issue for me.

Here is a jsFiddle to work with as well. http://jsfiddle.net/hmQZk/3/

Thank You very much in advance!

WizzyBoom

Upvotes: 1

Views: 1005

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Your problem was in popupbeforeposition state and line:

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

I have removed it and put it inside a :

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

Here's a working example: http://jsfiddle.net/Gajotres/hmQZk/5/

But if you would like to listen my advise, you should abandon this iframe solution and switch to gMap v3 api. Basically you will get the same thing without using iframe as a proxy.

Upvotes: 1

Related Questions