This topic contains 11 replies, has 3 voices, and was last updated by Sean Sean 1 year, 5 months ago.

Google Maps with maximum heigh


  • martamensi
    Participant

    Member Reply #5882

    Hi,

    I want to have a page with a map that takes up the whole content body. I have tried changing in _gmaps.scss the height attribute to 100% but it doesn’t seem to work.

    I would really appreciate the help.

    Thanks

    Sean
    Sean
    Keymaster

    Posts: 4526
    Support Staff Reply #5889

    Hi,

    With CSS you can not set 100% height. You will need to set it dynamically with JS code in order to fit the map into available content area. Let say you have follow gmap container:

    <div id=”gmap”  style=”height: 615px;”></div>

    Before you initialize the above map you will need to set the height dynamically by calculating the available content area. You can use below code:

    var map_height = $(‘.page-content’).height();
    $(‘#gmap’).css(‘height’, map_height);

    If you need any further clarification please let us know.

    Thanks.


    xarion
    Participant

    Posts: 8
    Member Reply #9313

    I’m also having a problem, I have tried the suggestion but I get a JS error: Uncaught ReferenceError: $ is not defined
    my code:

    <div class=”page-content-wrapper”>
    <!– BEGIN CONTENT BODY –>
    <div class=”page-content”>
    <!– BEGIN PAGE HEADER–>
    <!– BEGIN PAGE TITLE–>
    <div id=”gmap”>a</div>
    <script type=”text/javascript”>
    var map_height = $(‘.page-content’).height();
    $(‘#gmap’).css(‘height’, map_height);
    </SCRIPT>

    <!– END PAGE TITLE–>
    <!– END PAGE HEADER–>

    </div>
    <!– END CONTENT BODY –>
    </div>

    TIA

    Xarion

    Sean
    Sean
    Keymaster

    Posts: 4526
    Support Staff Reply #9325

    Hi @xarion,

    Please make sure that your JS code is placed after the jquery plugin include. Otherwise your code can not use jquery since its not defined. If you need any further clarifications please provide us a test link to your site by creating a new post and private reply.

    Thanks.


    xarion
    Participant

    Posts: 8
    Member Reply #9330

    HI Sean

    Thanks that helped a lot, so i’m 50% there, I am using now using:

    <script type=”text/javascript”>

    var map_height = $(‘.page-content’).height();

    $(‘#gmap’).css(‘height’, map_height);

    var startPoint = [-26,28];

    map = init_leaflet(map, startPoint, ‘osm’);

    </SCRIPT>

    and getting the attached, how can I make it fit the full height of the container?

    here is a screenshot: Screenshot

    I have the following in custom.min.css:

    .page-content-wrapper .page-content{margin-left:235px;margin-top:0;margin-bottom:0;padding:0px 0px 0px;height:100%;}

     

    • This reply was modified 1 year, 5 months ago by  xarion.

    xarion
    Participant

    Posts: 8
    Member Reply #9332

    I seem to have sorted out by changing rather the page-content instead of my map div:

    var map_height = $(‘.page-wrapper’).height()-30;

    $(‘.page-content’).css(‘height’, map_height);

    it now works for all versions 🙂

    Next questions in the mobile version how can I remove the margin around the map: screenshot


    xarion
    Participant

    Posts: 8
    Member Reply #9333

    Sorry no, I thought it was fixed but its not 🙁 ignore my previous post

    Sean
    Sean
    Keymaster

    Posts: 4526
    Support Staff Reply #9357

    Hi,

    Can you provide us a test link to your site in a private reply by opening a new post ? By referring your code it will be hard guessing the issue. Basically you should be able to fix it using jquery(to dynamically set the full height map) and apply margin for mobile mode in the custom.min.css file using media query for responsive styling.

    Thanks.


    xarion
    Participant

    Posts: 8
    Member Reply #9371
    This reply has been marked as private.
    Sean
    Sean
    Keymaster

    Posts: 4526
    Support Staff Reply #9399

    Looks quite OK. I think this workaround seems fine at the moment. Good luck with your project 🙂


    xarion
    Participant

    Posts: 8
    Member Reply #9407

    Hey Sean thanks, any idea what css i need to change to remove the padding in the mobile version, as in the screenshot I attached above? ie, the gap around the map.

    Thanks 🙂

    Sean
    Sean
    Keymaster

    Posts: 4526
    Support Staff Reply #9417

    Hi,

    Sorry, its hard to point you out on this. I suggest you to try some CSS customizations right the chrome’s dev tool and apply required css code in custom.min.css to override it.

    Thanks.

     

     

Tagged: 

You must be logged in to reply to this topic.