0

I am doing the 2017 version of this course which uses Python instead of PHP. My addMarker function doesn't seem to get called however if I execute the same commands in the Chrome Dev Console, the marker is added.

I am not sure which part of the JS is breaking so I am going to post the whole thing below:

    // Google Map
    var map;

    // markers for map
    var markers = [];

    // info window
    var info = new google.maps.InfoWindow();

    // execute when the DOM is fully loaded
    $(function() {

        // styles for map
        // https://developers.google.com/maps/documentation/javascript/styling
        var styles = [

            // hide Google's labels
            {
                featureType: "all",
                elementType: "labels",
                stylers: [
                    {visibility: "off"}
                ]
            },

            // hide roads
            {
                featureType: "road",
                elementType: "geometry",
                stylers: [
                    {visibility: "off"}
                ]
            }

        ];

        // options for map
        // https://developers.google.com/maps/documentation/javascript/reference#MapOptions
        var options = {
            center: {lat: 37.4220, lng: -122.0841}, //Googleplex, California
            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
        var 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);

    });

    /**
     * Adds marker for place to map.
     */
     function addMarker(place)
    {   
        var myLatLng={lat:Number(place.latitude),lng:Number(place.longitude)};
        var marker = new google.maps.Marker({
        position: myLatLng,
        map:map,
        });
        markers.push(marker);


    }

    /**
     * Configures application.
     */
    function configure()
    {
        // update UI after map has been dragged
        google.maps.event.addListener(map, "dragend", function() {

            // if info window isn't open
            // http://stackoverflow.com/a/12410385
            if (!info.getMap || !info.getMap())
            {
                update();
            }
        });

        // update UI after zoom level changes
        google.maps.event.addListener(map, "zoom_changed", function() {
            update();
        });

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

            // update UI
            update();
        });

        // hide info window when text box has focus
        $("#q").focus(function(eventData) {
            info.close();
        });

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

        // update UI
        update();

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

    /**
     * Removes markers from map.
     */
    function removeMarkers()
    {
        // TODO
    }

    /**
     * Searches database for typeahead's suggestions.
     */
    function search(query, syncResults, asyncResults)
    {
        // get places matching query (asynchronously)
        var parameters = {
            q: query
        };
        $.getJSON(Flask.url_for("search"), parameters)
        .done(function(data, textStatus, jqXHR) {

            // call typeahead's callback with search results (i.e., places)
            asyncResults(data);
        })
        .fail(function(jqXHR, textStatus, errorThrown) {

            // log error to browser's console
            console.log(errorThrown.toString());

            // call typeahead's callback with no results
            asyncResults([]);
        });
    }

    /**
     * Shows info window at marker with content.
     */
    function showInfo(marker, content)
    {
        // start div
        var div = "<div id='info'>";
        if (typeof(content) == "undefined")
        {
            // http://www.ajaxload.info/
            div += "<img alt='loading' src='/static/ajax-loader.gif'/>";
        }
        else
        {
            div += content;
        }

        // end div
        div += "</div>";

        // set info window's content
        info.setContent(div);

        // open info window (if not already open)
        info.open(map, marker);
    }

    /**
     * Updates UI's markers.
     */
    function update() 
    {
        // get map's bounds
        var bounds = map.getBounds();
        var ne = bounds.getNorthEast();
        var sw = bounds.getSouthWest();

        // get places within bounds (asynchronously)
        var parameters = {
            ne: ne.lat() + "," + ne.lng(),
            q: $("#q").val(),
            sw: sw.lat() + "," + sw.lng()
        };
        $.getJSON(Flask.url_for("update"), parameters)
        .done(function(data, textStatus, jqXHR) {

           // remove old markers from map
           removeMarkers();
           // add new markers to map
           for (var i = 0; i < data.length; i++)
           {
               addMarker(data[i]);
           }
        })
        .fail(function(jqXHR, textStatus, errorThrown) {

            // log error to browser's console
            console.log(errorThrown.toString());
        });
    };
0

If addMarker does not get called it could indicate that latitude and longitude are defined as TEXT in the database. If they are not NUMERIC, addMarker will not get called because the SELECT query in the update route will return an empty array.

2
  • You're awesome! This did the trick :) Mar 9 '17 at 18:53
  • Hi, I have the same issue, but declared it as a NUMERIC. What could be the issue? I am thinking about fts4 not being installed correctly. But I am all ears there. Thanks!
    – khal_tech
    Dec 9 '17 at 9:02

You must log in to answer this question.

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