In my final project, I am integrating a map and search box based on the Google Maps API used in Pset8 Mashup. My search box is creating a list of places, however the results it produces only fill part of the screen and the scroll bar is on the extreme right as shown in the picture at the bottom. My map is also not successfully loading and it may be related.

This is the HTML file in which the map and search box is displayed:

{% extends "layout.html" %}

{% block title %}
{% endblock %}

{% block main %}

    <!-- Fill viewport -->
    <div class="container-fluid">

        <!-- https://developers.google.com/maps/documentation/javascript/tutorial -->
        <div id="map-canvas"></div>

        <!-- http://getbootstrap.com/css/#forms -->
        <form id="form">
            <div class="form-group">
                <label class="sr-only" for="q">City, County or Postcode</label>
                <input class="form-control" id="q" placeholder="City, County or Postcode" type="text"/>

{% endblock %}

As you can see this file extends layout.html inspired by Pset7, and I think this could be part of the problem. This file creates a navbar at the top of the web app.

<main class="container p-5">
        {% block main %}{% endblock %}

I don't know what the class="container p-5attribute does exactly as I have simply copied it from Pset7's layout.html.

enter image description here

Please can someone tell me if there is something wrong with my code and if they know why my map isn't loading.

1 Answer 1


This <main class="container p-5"> is significant. The class="container p-5" defines the styling to use. In the context of pset7 it is using styling from bootstrap. Regardless of whether this app is using bootstrap or not, the main element (or the container class?) needs a height: 100%; style.

There are many ways to do that including: add it inline in layout.html, add it to the styles.css, etc. This will def fix the "map not loading" problem. (Actually, the map is loading, it's just not "displaying" because the height of main is 0px).

This may or may not solve the search box problem. However, that is absolutely a styling problem too. You probably need an overflow: hidden on that element. (Review the first block of pset8 styles.css). Of course, any style changes can have unintended consequences on other parts of the app. You are likely to get very familiar with the browser dev tools Elements tab during the course of this exercise. Good luck.

  • Thanks a lot, it works well now
    – M. Alex
    Commented Aug 21, 2018 at 8:56

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .