This topic contains 4 replies, has 2 voices, and was last updated by Sean Sean 1 year, 6 months ago.

Gmaps is either blank or works on resizing the browser.


  • pixelbird
    Participant

    Posts: 2
    Member Reply #7445

    I have actually tried to get this to work now for about 4 hours, I have tried everything stack overflow and nothing works, its really annoying that it doesnt work as it is suppose too.

    Sometimes I get a white box, sometimes I get a grey box and if I resize the browser it shows, sometimes the div overflow is not set to visable and both width and height are 0.

    I have even tried to use examples from the discussion in themeforest, but nothing works.

    What do you have to do to get this to work as simple as it is meant too?

    This is my script.

     
    <table>
    <tbody>
    <tr>
    <td class=”line-content”>
    <table>
    <tbody>
    <tr>
    <td class=”line-content”><span class=”html-tag”><script <span class=”html-attribute-name”>type</span>=”<span class=”html-attribute-value”>text/javascript</span>”></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>$(document).ready(function () {</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>map = new GMaps({</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>div: ‘#map’,</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>lat: -13.004333,</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>lng: -38.494333</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>});</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>var marker = map.addMarker({</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>lat: -13.004333,</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>lng: -38.494333,</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>title: ‘Loop, Inc.’,</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>infoWindow: {</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>content: “<b>Loop, Inc.</b> 795 Park Ave, Suite 120<br>San Francisco, CA 94107″</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>}</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>});</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>marker.infoWindow.open(map, marker);</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>});</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-tag”></script></span></td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>

    Sean
    Sean
    Keymaster

    Posts: 4226
    Support Staff Reply #7455

    Hi,

    Can you please provide us a test link to your developing page in a private reply ? We will need to check your code online in order to investigate the issue. Please note this can be google maps API issue or your own code issue. However if you can provide us a test link we will check and try to point you out.

    Thanks.


    pixelbird
    Participant

    Posts: 2
    Member Reply #7460
    This reply has been marked as private.

    pixelbird
    Participant

    Posts: 2
    Member Reply #7461

    Hey, I moved it to the first active tab and it now works!

    How do I make it work if its in another tab thats not active when the document loads?

    Sean
    Sean
    Keymaster

    Posts: 4226
    Support Staff Reply #7481

    Hi,

    Yes, this is known issue of the google maps API. You can initialize the map only on visible container so you will need to use the bootstrap tab’s event API to initialize the once on other invisible tab is shown:

    var init = false;
    $('#mytab a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
      if (init === false) {
         // init here the map;
         init = true;
      }
    });
    
    

    If you need any further help please let us know.

    Thanks.

You must be logged in to reply to this topic.