CODEWITHSUNDEEP
jquerygoogle-mapsjquery-mobilejquery-mobile-ajaxjquery-mobile-panel
You Hock Tan
You Hock Tan

Reputation: 1015

Google map disappears after JQuery panel pushes

I'm using Google Maps on JQuery Mobile and I havethis problem of the map disappearing when I click the menu (panel) for it to slide open.

home

enter image description here

This is my JS function:

function loadSearch(input) {
var mapOptions = {
    center: new google.maps.LatLng(1.300000,103.800000),
    zoom: 11,
    mapTypeId:google.maps.MapTypeId.ROADMAP,
    zoomControl: false,
    panControl:false
};
var map = new google.maps.Map(document.getElementById("content"),
    mapOptions);

switch(input)
{
    case 1:
        loadOptionsFooter();
        break;
    case 2:
        break;
    default:
        break; 
}
}

I've tried adding

    google.maps.event.addListenerOnce(map, 'idle', function() {
   google.maps.event.trigger(map, 'resize');
});

But somehow it does not work. Appreciate if anyone can help me with this.

Thanks!

edited:

function loadOptionsFooter(){
var output = ['<div data-role="navbar"><ul>'];
output.push('<li><a href="#" data-icon="gear">Filter</a></li>');
output.push('<li><a href="#" data-icon="search">Search</a></li>');
output.push('<li><a href="#" data-icon="navigation">Locate</a></li></ul></div>');

$('[data-role="footer"]').html(output.join('')).trigger('create');
}

Now it show the map but the menu created through ajax call is covered

enter image description here

The code of the menu as follows:

    <h6 class="menu-header">MAIN MENU</h6>
    <ul data-role="listview">
            <li><a href="../search/region.html">Home</a></li>
            <li><a href="#">About GeoVid</a></li>
            <li><a href="#">Contact Us</a></li>
    </ul>
    <h6 class="menu-header">USER MENU</h6>
    <ul data-role="listview">
            <li><a href="#">Log In</a></li>
    </ul>

The HTML markup looked like this:

    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
      <div id="page" data-role="page">
    <div data-role="panel" data-position-fixed="true" data-display="push" data-theme="a" id="panelLeft">
    </div><!-- /panel -->

    <header data-role="header" data-position="fixed">
      <h1>test</h1>
      <a href="#panelLeft" data-icon="bars" class="ui-btn-left" data-iconpos="notext">Menu</a>
      <a href="/static/viewer/views/user/login.html" data-icon="user" class="ui-btn-right" data-iconpos="notext">Login</a>
    </header>

    <div data-role="content" id="alert">
    </div>
    <div data-role="content" id="content" class="ui-panel-wrapper">
    </div>

    <footer data-role="footer" data-position="fixed" data-tap-toggle="false">
    </footer>
  </div>
</body>
</html>

and this is how I call the menu.html

function loadMenu(){
$.get('../../views/common/menu.html', function(data){
    var divData = $(data).filter('#defaultMenu')[0];
    $('#panelLeft').html(divData).trigger('create');
});
}

Upvotes: 0

Views: 925

Answers (1)

beRoberto
beRoberto

Reputation: 134

Your page structure should look like this.

  <div data-role="page" id="mapPage"> 
  <div id="mapHeader" data-role="header" data-theme="a">

  </div>
  <div id="mapPageContent" data-role="content">
     <div role="main" class="ui-content" id="map-canvas">
            <!-- map loads here... -->
      </div>
   </div>
   <footer data-role="footer" data-position="fixed" data-tap-toggle="false">
   </footer>
</div>

And make sure to set your CSS properties

#mapPageContent, #map-canvas { width: 100%; height: 100%; padding: 0; }

Then initialize the map to the map-canvas id.

var map = new google.maps.Map(document.getElementById("#map-canva"), mapOptions);

Upvotes: 0

Related Questions