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
        highlight: false,
        minLength: 1
        display: function(suggestion) { return null; },
        limit: 10,
        source: search,
        templates: {
            suggestion: Handlebars.compile(
                "<div>" +
                "{{postal_code}}, {{place_name}}, {{admin_name2}}" +

// 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

// 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)

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

{% 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 %}

1 Answer 1


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


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.

  • I have edited my code so that the search box now gives options of places, so my search function definitely works and part of the configure function works too. However, the map still doesn't load and you cannot select the results from the searchbox.
    – M. Alex
    Aug 17, 2018 at 10:43
  • answer edited with another possibility. Aug 17, 2018 at 14:16
  • following your advice I have copied some of the parts of styles.css into my stylesheet; the height is 100% - what should it be.
    – M. Alex
    Aug 17, 2018 at 15:44
  • The height should be a non-zero number of pixels (with pset8 styling). When you select the div in the elements pane it should display the size over the element in the browser pane. FYI: I built a document_root with pset8:index.html, pset8.styles.css, this script.js with the 4 errors corrected. Running with apache50 as web server, it renders the map after the 4 corrections to script.js. The four corrections were: comment line 15 (styles: styles,); add }); at line 28 to terminate ready; add } line 70 to terminate configure; add } line 85 to terminate search. Aug 17, 2018 at 17:10

You must log in to answer this question.

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