当点击1然后谷歌地图不显示

Question

Click herer For JS-FIDDLE

first of all i put the google map on the top, its showing well, but when i click on 1 then open det1 and in the det 1 div google map is not showing well i think its jquery conflation error. please help, thanks in advance.

here is jquery code:

jQuery('a[id^="prod"]').on('click', function (e) {
    var id = $(this).attr('id').slice(-1);
    var previs = $('div.product-detail:visible');
    $('div.product-detail').hide();
    if (previs.is($('.det' + id))) {
        $('.det' + id).hide()
    }
    else
    {
        $('.det' + id).show();
    }

    e.preventDefault()
});

Answer 1

It's not a jquery error. It's a google maps issue. Once you render a google map, if you resize it or change it's visibility, you will frequently experience visual issues like partial rendering.

So, the problem is that you are generating the map while the iframe is still hidden, so when you show it, the map will have visual issues. Instead, load the map only after showing the iframe and it will work:

HTML:

<div class="product-detail det1 cf">
    <div class="product-detail-row cf">1</div>
    <div class="directoria-map">
            <iframe src="" width="600" height="450" frameborder="0" style="border:0"></iframe>
            </div><!-- directoria-map -->
    <!-- .product-detail-row -->
</div>

JS:

jQuery('a[id^="prod"]').on('click', function (e) {
    var id = $(this).attr('id').slice(-1);
    var previs = $('div.product-detail:visible');
    $('div.product-detail').hide();
    if (previs.is($('.det' + id))) {
        $('.det' + id).hide()
    }
    else
    {
        $('.det' + id).show();
        $('.det' + id).find("iframe").attr("src", "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3988.526251756596!2d-48.4791421!3d-1.4581948999999998!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x92a48e80253e4c21%3A0x2d5679c46276bb6!2sRua+dos+Mundurucus%2C+3100+-+Jurunas!5e0!3m2!1sen!2sbr!4v1402684785532");
    }

    e.preventDefault()
});

Try your fiddle updated: http://jsfiddle.net/hLd5W/25/

You can create a custom attribute on the tag, so you can specify a different url to each iframe :

HTML:

 <!-- .product-main -->
<div class="product-detail det1 cf">
    <div class="product-detail-row cf">1</div>
    <div class="directoria-map">
            <iframe maps-url="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3988.526251756596!2d-48.4791421!3d-1.4581948999999998!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x92a48e80253e4c21%3A0x2d5679c46276bb6!2sRua+dos+Mundurucus%2C+3100+-+Jurunas!5e0!3m2!1sen!2sbr!4v1402684785532" src="" width="600" height="450" frameborder="0" style="border:0"></iframe>
            </div><!-- directoria-map -->
    <!-- .product-detail-row -->
</div>

JS:

jQuery('a[id^="prod"]').on('click', function (e) {
    var id = $(this).attr('id').slice(-1);
    var previs = $('div.product-detail:visible');
    $('div.product-detail').hide();
    if (previs.is($('.det' + id))) {
        $('.det' + id).hide()
    }
    else
    {
        $('.det' + id).show();
        var url = $('.det' + id).find("iframe").attr("maps-url");
        $('.det' + id).find("iframe").attr("src", url);
    }

    e.preventDefault()
});

Updated fiddle: http://jsfiddle.net/hLd5W/26/