1

After pulling multiple allnighters I have finally submitted my last problem set before turning to the final project. I hope someone can shed some light on my last questions in regard to problem set 8 before I move on:

  1. Within configure() and addMarker(place) from scripts.js there are occasions where html is needed. For instance, contents of the info window are written in html -- in html in scripts.js. How does the computer recognize that those few lines inside a JavaScript file is actually html and not JavaScript codes?

  2. We made our project work by relying on both application.py and scripts.js; is it possible (or is it indeed common industry-wide) to combine the two files and, rather than writing part of the program in python and part in JavaScript, have everything written in the same language?

  3. Compared to what we were told in the lecture, I notice that the specifications in this problem set handle event listeners differently. For instance, in dom1.html from the lecture, a "submit" event is handled by something like document.getElementByID(‘xxx’).onsubmit = function() {}; here in the problem set, however, a "click" event is handled by marker.addListener("click", function() {});, without using the wording of onclick or the like. Are they just alternatives to each other?

  4. How does it work in the problem set such that when (1) I click on a marker, (2) zoom in or out, or (3) drag the map, not only is that an info window opens on top of it, but also that any open info window closes automatically? As suggested in link A and link B, this is possible by calling the close() method on the infowindow constructor. This action is not embedded within showInfo() though.

  5. Last but not least, I figured that when any of my action as a user of the app prompts an update, update() does do its part by deleting previous markers and adding new ones, the number of which is limited by /update in application.py to ten. However, it seems that I as a app developer do not have much power over controlling markers from which cities get added. Accordingly, it can be the case where all ten new markers are those from small towns or tiny cities. How can we as programmers better play the cards so that, for instance, no matter how the app user zooms in or out of the map in the greater LA area, s/he at least always sees the "Los Angeles" marker? The real Google Maps certainly has this capability -- however you drag the map within Illinois, you always see Chicago.

THANKSSSSSSSS!

2
  1. How does the computer recognize that those few lines inside a JavaScript file is actually html and not JavaScript codes? It doesn't. It's not javascript or html to the function, it's data. When it is (finally) rendered by the browser, it is "recognized" as html.
  2. rather than writing part of the program in python and part in JavaScript, have everything written in the same language?. Absolutely. Remember pset6/7? No JavaScript at all. Here is one of the 14 million articles Mr. Google returned when asked "web server vs client languages".
  3. Are they just alternatives to each other?. addListener is a function supplied by the Google APIs with prescribed arguments to abstract the DOM manipulation. onsubmit is an attribute of a DOM object and document.getElementByID(‘xxx’).onsubmit = function() {} is direct manipulation of the object.
  4. How does it work in the problem set ...... that any open info window closes automatically?. Maybe removeMarker called from update?
  5. The simple answer to this complex question is you, the app developler have total control. You likely have to do much more detailed and intense study of the Google APIs and all the available functions and options. You may have to tweak the selects used to get places. If you don't want markers from small towns/cities, add a "population" column to places and use it in the query. If you always want a marker on LA, evaluate the returned coordinates to determine if they are within some distance of LA, and add a marker for LA (is there a setting/API for a "sticky" marker?). (And I disagree that however you drag the map within Illinois, you always see Chicago, but that's a discussion for another day :).
3
  • One quick question @Dino, in this same problem set, how did application.py and scripts.js "communicate" with each other? For instance, how does update() in application.py work with the update() in scripts.js? I did not see, atop application.py, any such thing as from scripts.js import *... Thanks!
    – Alex Chan
    Jul 13 '17 at 7:37
  • python can only import python libraries. This line in index.html <script src="{{ url_for('static', filename='scripts.js') }}"></script> is what gives the browser "access" to script.js. application.py and script.js do not communicate with each other; the browser communicates with the server via HTTP. The update func in script.js tells the server (flask) to "call" the update route here Flask.url_for("update"). Other information here Jul 13 '17 at 12:57
  • THANKS!!!!!!!!!!!!!!
    – Alex Chan
    Jul 14 '17 at 6:31

You must log in to answer this question.

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