Map Not Loading

Question

In my final project, users can create an account as used in Pset7 Finance and I am including a map using the Google Maps API as used in Pset8 Mashup, however the map isn't loading.

I have used code that worked in my Pset8 map for scripts.js:

// Google Map
let map;

// Execute when the DOM is fully loaded
$(document).ready(function() {

// Options for map
// https://developers.google.com/maps/documentation/javascript/reference#MapOptions
let options = {
    center: {lat: 51.5074, lng: 0.1278}, // London, England
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    maxZoom: 14,
    panControl: true,
    styles: styles,
    zoom: 13,
    zoomControl: true
};

// Get DOM node in which map will be instantiated
let canvas = $("#map-canvas").get(0);

// Instantiate map
map = new google.maps.Map(canvas, options);

// Configure UI once Google Map is idle (i.e., loaded)
google.maps.event.addListenerOnce(map, "idle", configure);



// Configure application
function configure()
{
    // Configure typeahead
    $("#q").typeahead({
        highlight: false,
        minLength: 1
    },
    {
        display: function(suggestion) { return null; },
        limit: 10,
        source: search,
        templates: {
            suggestion: Handlebars.compile(
                "<div>" +
                "{{postal_code}}, {{place_name}}, {{admin_name2}}" +
                "</div>"
            )
        }
    });

// Re-center map after place is selected from drop-down
$("#q").on("typeahead:selected", function(eventObject, suggestion, name) {

    // Set map's center
    map.setCenter({lat: parseFloat(suggestion.latitude), lng: parseFloat(suggestion.longitude)});

});

// Re-enable ctrl- and right-clicking (and thus Inspect Element) on Google Map
// https://chrome.google.com/webstore/detail/allow-right-click/hompjdfbfmmmgflfjdlnkohcplmboaeo?hl=en
document.addEventListener("contextmenu", function(event) {
    event.returnValue = true;
    event.stopPropagation && event.stopPropagation();
    event.cancelBubble && event.cancelBubble();
}, true);

// Give focus to text box
$("#q").focus();


// Search database for typeahead's suggestions
function search(query, syncResults, asyncResults)
{
    // Get places matching query (asynchronously)
    let parameters = {
        q: query
    };
    $.getJSON("/search", parameters, function(data, textStatus, jqXHR) {

    // Call typeahead's callback with search results (i.e., places)
    asyncResults(data);
});

Here is my HTML code for the map, all the required headers are in a file called Layout.html:

{% extends "layout.html" %}

{% block title %}
    Map
{% 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"/>
            </div>
        </form>
    </div>

{% endblock %}

Answer 1

Check developer console for errors? Are configure and search functions terminated properly?

--EDIT ADDITIONAL--

Assuming you have fixed the 4 syntax errors that this script.js produces (3 missing function close, 1 undefined parameter), the remaining problem is style.

To see for yourself: Use the inspector(firefox)/elements(chrome) in the dev console and highlight the map-canvas div. What is the height?

You need amap-canvas styler à la pset8 styles.css.