Gmap3 - Forum

Gmap3 exchange platform

You are not logged in.

Ads
(server costs 27.50€ per month)


#1 2012-10-14 02:26:43

shimi
Member
Registered: 2012-10-12
Posts: 3

Partially greyed out maps in tab content

I am using map in a tab but the map is partially greyed out, after searching the forum I found that it can be fixed by using following line of code.

google.maps.event.trigger($("#map").gmap3("get"), "resize");

However I am not a coder and don't know where I have to insert the line of the code for it to work and was looking for some assistance. My sample site and the code is below.

Link to Sample Site


<script type="text/javascript">
      $(function(){
      
        $('#map').gmap3(
          { action: 'addMarker',
            address: "place de l'étoile, Paris",
            map:{
              center: true,
              zoom: 15,
            },
            marker:{
              options:{
                draggable: false
              }
            },
            infowindow:{
              options:{
                content: "place de l'étoile, Paris"
              },
              events:{
                closeclick: function(){
                  alert("closing : " + $(this).attr("id"));
                }
              }
            }
          }
          );
      });
</script>

Thank you.

Offline

Ads
(server costs 27.50€ per month)


#2 2012-10-28 12:58:03

raarce
Member
Registered: 2012-10-23
Posts: 1

Re: Partially greyed out maps in tab content

I am also having the same problem. Did you find a way to fix it?
--
Rafael

Offline

#3 2012-10-29 06:44:15

jbdemonte
Administrator
From: Pourrières, France
Registered: 2011-11-21
Posts: 580

Re: Partially greyed out maps in tab content

This event trigger is required if window is first hidden and once it is displayed or on window resize event.

In you example, you have to trigger it after the tab is displayed

Offline

#4 2012-11-07 21:23:05

shimi
Member
Registered: 2012-10-12
Posts: 3

Re: Partially greyed out maps in tab content

How to fix this issue in version 5 of gmap?

Offline

#5 2012-11-08 06:36:51

jbdemonte
Administrator
From: Pourrières, France
Registered: 2011-11-21
Posts: 580

Re: Partially greyed out maps in tab content

The same way, trig the resize once the div containing the map is either resized or displayed

Offline

#6 2012-12-01 12:46:45

jbdemonte
Administrator
From: Pourrières, France
Registered: 2011-11-21
Posts: 580

Re: Partially greyed out maps in tab content

Bootstrap fires 2 events on tab module: show and shown.

Shown: This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.

I had a quick look on its code to check if target div may had an event to handle it nativelly in gmap3, but its not.

So you have to handle it by your own with this code:

          $('a[href="#tab2"]').on('shown', function (e) {
              google.maps.event.trigger($("#map").gmap3("get"), "resize");
          });

Think about updating to the version 5 of gmap3...

Offline

#7 2012-12-05 23:25:56

shimi
Member
Registered: 2012-10-12
Posts: 3

Re: Partially greyed out maps in tab content

Thank you, updated to version 5.

Offline

Board footer

Powered by FluxBB