Forum: F.A.Q

This forum is closed for new topics. However, you can still search for a solution in the old topics. For technical support and general questions related to GEO my WP plugin and its core add-ons please use the support forum.

[Resolved]Using Maps Shortcode in Bootstrap Modal

Home Forums F.A.Q Using Maps Shortcode in Bootstrap Modal

This topic contains 4 replies, has 2 voices, and was last updated by  jkkoenig 2 years, 7 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #51418

    jkkoenig
    Participant

    Hello,

    I have a problem showing a map in a bootstrap modal: http://www.grabrechner.de -> just click on a name or image in the list. It is just grey.

    The problem is known and a solution right here:
    http://stackoverflow.com/questions/11742839/showing-a-google-map-in-a-modal-created-with-twitter-bootstrap

    I inserted the suggested code:
    $(“#contact-modal”).on(“shown.bs.modal”, function () {
    google.maps.event.trigger(map, “resize”);
    });

    an adapted the id #contact-modal to my needs.

    Nwo it is said to alter the variable name of the map. This, I cannot find. What is the name of the map?

    I would be very glad if you help. I am not very good in javascript.

    Thank you!

    Jürgen

    #51558

    jkkoenig
    Participant

    Hm, I am still looking for a solution. I changed the code a bit, because it made a toolset views filter collapse. The code is now:

    <script src=”http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js”></script>
    <script type=”text/javascript”>
    <!–
    $(document).ready(function(){
    $(“#myModal[wpv-post-id]”).on(“shown.bs.modal”, function () {
    google.maps.event.trigger(map, “resize”);
    });
    }); –>
    </script>

    Still I get a grey map.

    Has anybody a solution for this?

    #51565

    jkkoenig
    Participant

    I had an javascript expert working on this, he found the following solution:

    <script src=”http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js”></script>
    <script type=”text/javascript”>

    $(‘a[data-target=”#myModal[wpv-post-id]”]’).on(“click”, function(){

    var duration = 1000;
    setTimeout(function() {

    var mapelement = $(‘#myModal[wpv-post-id] *[id^=”gmw-map-“]’)[1];
    var canv_id = mapelement.id;
    var mapid = canv_id.replace(/[^0-9]/g, ”);
    google.maps.event.trigger(gmwMapObjects[mapid].map, “resize”);

    }, duration);

    }
    );

    </script>

    #55560

    Landon
    Participant

    jkkoenig — thank you so much for posting this. But it didn’t work for me — are there some variables here that I need to change?

    #55565

    jkkoenig
    Participant

    Please check the identifier of the map object:
    [data-target=”#myModal[wpv-post-id]”]
    and
    var mapelement = $(‘#myModal[wpv-post-id] *[id^=”gmw-map-“]’)[1]
    and
    google.maps.event.trigger(gmwMapObjects[mapid].map, “resize”);

    This might be different in your installation.

    Regards
    Jürgen

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.