Objectives

  • Introduction to JavaScript, Ajax, JSON.

  • Exposure to objects and methods.

  • Grapple with real-world APIs and libraries.

Getting Ready

Your mission for this project is to implement "mashup" that integrates Google Maps with Google News with a MySQL database containing thousands of postal codes, GPS coordinates, and more. Quite like this here version by the staff!

Not only can you search for places via the text box up top, you can also click on and drag the map elsewhere. Scattered across the map, meanwhile, are newspaper icons that, when clicked, provide links to local news!

You may notice that some markers (and labels) overlap others or are otherwise at the wrong coordinates. The GeoNames geographical database is actually imperfect, whereby some places' coordinates are off. For instance, East Boston isn’t in Back Bay. And Readville isn’t in Boston Harbor. Not to worry if you see those same symptoms in your mashup, assuming the source of the problem is indeed the data itself!

Anyhow, how neat! But where to begin?

Google Maps

Odds are you’re already familiar, but surf on over to Google Maps anyway at https://www.google.com/maps. Input 42.3770, -71.1256 into the search box up top, and you should find yourself near Harvard. Interesting! It seems Google Maps understands GPS coordinates (i.e., latitude and longitude). In fact, search for 28.410, -81.584. Perhaps you’d rather be there? (You might need to zoom out.)

It turns out that Google Maps offers an API that allows you to embed Google’s maps into your own web apps. Hey, that’s one of the ingredients we need! Go ahead and familiarize yourself with Google Maps Javascript API v3 by perusing the three sections below of its Developer’s Guide. Read through any sample code carefully, clicking View example below it, if present, to see the code in action.

Google News

Okay, now we need us some news. If you happen to have a Google Account (e.g., Gmail), head to https://news.google.com/ and click the gear icon at top-right. Below the icon should appear Personalize Google News, below which is Advanced. Click the latter, and Add a local section should appear at right. Input, say, Cambridge, Massachusetts into that box, then click Add. You should find yourself at the URL below?

Not to worry if you don’t have a Google Account. Just head straight to that URL.

Interesting, it looks like our input is now the value of an HTTP parameter, geo, though there’s a bunch of other parameters too. (Recall that + is one way a browser can encode a space in a URL. Another way is with %20.) One at a time, delete each of those other key-value pairs plus one ampersand (e.g., first pz=1&, then cf=all&, then &ned=us, then &redirect=true, hitting Enter after each deletion so as to reload the page via a shorter and shorter URL. You should find that Google still returns news for Cambridge even when the URL is just the below?

Nice! +1 for trial and error. Now try changing the value of geo to, say, 02138 and then hit Enter again. You should find yourself at the URL below? The articles might change (since Cambridge has more than one postal code), but the news should still be about Cambridge?

Nice. Though the page you’re looking at, of course, is written in HTML. And all we want, if the staff’s solution is any indication, is a bulleted list of articles' titles and links. How to get those without "scraping" this page’s (surely complicated) HTML? Scroll down to the page’s bottom and look for RSS. Click that link, and you should find yourself at the URL below?

As before, delete any parameters that don’t feel core to the mission at hand, leaving only, say, geo and, now, output. You should find yourself at the (still fully functional) URL below.

Deleting those parameters probably isn’t necessary (and, who knows, their absence might break things eventually), but whittling a URL down to its essence does feel like better design, so let’s stick with simple.

Now, what’s all this markup that’s now on your screen? It looks a bit like HTML, but you’re actually looking at an "RSS feed," a flavor of XML (a tag-based markup language). For quite some time, RSS was all the rage insofar as it enabled websites to "syndicate" articles in a standard format that "RSS readers" could read. RSS isn’t quite as hip anymore these days, but it’s still a terrific find for us because it’s "machine-readable". Because it adheres to a standard format, we can parse it (pretty easily!) with software. Here’s what an RSS feed generally looks like (sans actual data):

<rss version="2.0">
    <channel>
        <title>...</title>
        <description>...</description>
        <link>...</link>
        <item>
            <guid>...</guid>
            <title>...</title>
            <link>...</link>
            <description>...</description>
            <category>...</category>
            <pubDate>...</pubDate>
        </item>
        ...
    </channel>
</rss>

In other words, an RSS feed contains a root element called rss, the child of which is an element called channel. Inside of channel are elements called title, description, and link, followed by one or more elements called item, each of which represents an article (or blog post or the like). Each item, meanwhile, contains elements called guid, title, link, description, category, and pubDate. Of course, between most of these start tags and end tags should be actual data (e.g., an article’s actual title). For more details, see http://cyber.law.harvard.edu/rss/rss.html.

Ultimately, we’ll parse RSS feeds from Google News using PHP and then return articles' titles and links to our web app via Ajax as JSON. But more on that in a bit.

jQuery

Recall that jQuery is a super-popular JavaScript library that "makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers." To be fair, though, it’s not without a learning curve. Read through a few sections of jQuery’s documentation.

jQuery’s documentation isn’t the most user-friendly, though, so odds are you’ll ultimately find Google and Stack Overflow handier resources.

Recall that $ is usually (though not always) an alias for a global object that’s otherwise called jQuery.

typeahead.js

Now take a look at a demo of Twitter’s typeahead.js library, a jQuery "plugin" that adds support for autocompletion to HTML text fields. See The Basics specifically:

And now skim the documentation for that same library, which (surprise, surprise) isn’t as user-friendly as would be ideal. But, again, not to worry.

Underscore

Finall, skim the documentation for Underscore, another popular JavaScript library that offers functions that many folks wish were built into JavaScript itself! In particular, take note of template. Admittedly, this documentation isn’t very user-friendly either, so not to worry if usage is non-obvious for the moment.

Much like jQuery uses $ as its symbol (because it looks cool), Underscore uses _ is its symbol. For instance _.template means that Underscore has a method (i.e., function) called template.

Getting Started

Phew, that was a lot! But think of it this way: that’s a lot of functionality you don’t need to implement yourself! Indeed, implementing autocompletion alone could be a project unto itself. We just need to figure out how to wire (or, if you will, "mash") all of these components together in order to build our own amazing web app.

Anyhow! Download this project’s distribution code from http://cdn.cs50.net/2016/summer/projects/4/project4.zip into ~/workspace/ in your Cloud9 account, unzip it, and then delete project4.zip. (Remember how?)

Next, execute ls within ~/workspace/project4/, and you should see three subdirectories: bin, includes, and public. Ensure that permissions are as follows:

  • 700

    • bin

    • bin/import

    • includes

  • 711

    • public

    • public/css

    • public/fonts

    • public/img

    • public/js

  • 600

    • includes/*.php

    • public/*.php

  • 644

    • public/css/*

    • public/fonts/*

    • public/img/*

    • public/index.html

    • public/js/*

(Remember how? Remember why?)

And now execute:

apache50 stop
apache50 start ~/workspace/project4

Okay, time for a test! Open up Chrome visit https://cscip14300-jharvard.c9users.io/, where jharvard is your own username.

You should find yourself at a map (without much of anything going on)! (If you instead see "Forbidden," odds are you missed a step earlier; best to try all those chmod steps again.) Feel free to click on the map and drag it around. Or try searching for your home town via the text box up top. It won’t find it yet! Indeed, the mashup itself doesn’t do much just yet!

Head to https://cscip14300-jharvard.c9users.io/phpmyadmin/ (where jharvard is, again, your own username) to access phpMyAdmin. Log in with your username and a blank password. You should then find yourself at phpMyAdmin’s main page.

In a separate tab, open up project4.sql, which is among the files you unzipped earlier. Then click phpMyAdmin’s SQL tab, and copy and paste the contents of project4.sql into the SQL tab’s big text box (which is below Run SQL query/queries on server "localhost"). Skim what you just pasted to get a sense of the commands you’re about to execute, then click Go. You should then see a greenish banner indicating success. In phpMyAdmin’s top-left corner, you should now see link to a database called project4, beneath which is a link to a table called places. (The latest version of phpMyAdmin is a bit buggy, though, so you might need to reload the tab first.) But more on those later. If you click places, you’ll find (gasp!) that this table is empty. But we have defined its "schema" (i.e., structure) for you. Click phpMyAdmin’s Structure tab to see.

Let’s now download the data that we’ll ultimately import into this table. Head to http://download.geonames.org/export/zip/, where you’ll see a whole bunch of ZIP files, "data dumps" (in .txt format) from the GeoNames geographical database, which "covers all countries and contains over eight million placenames that are available for download free of charge." Click US.zip to download a dump of postal codes (and more) for the United States. Alternatively, you’re welcome to download another country’s data, though this spec will assume the US for the sake of discussion. See http://en.wikipedia.org/wiki/ISO_3166-1_alpha-2#Officially_assigned_code_elements if unsure how to interpret the ZIP files' 2-letter "base names." (They’re "ISO 3166-1 alpha-2" country codes.)

Next, unzip US.zip, which should yield US.txt, which you should upload to your Cloud9 workspace. Then delete US.zip.

Per http://download.geonames.org/export/zip/readme.txt, US.txt is quite like a CSV file except that fields are delimited with \t instead of a comma. To see the file’s contents, you’re welcome to open it, but take care not to change it.

Walkthrough

Shall we take a stroll?

And now a closer look at the distribution code.

import

Navigate your way to ~/workspace/project4/bin and open up import. Not much there yet! Just a shebang and TODO. It’s in this file that you’ll ultimately write a PHP script that iterates over the lines in US.txt, INSERTing data from each into places, that MySQL table. But more on that later.

index.php

Next navigate your way to pset4/public and open up index.html. Ah, there we go. If you look at the page’s head, you’ll see all those CSS and JavaScript libraries we’ll be using (plus some others). Included in HTML comments are URLs for each library’s documentation.

Next take a look at the page’s body, inside of which is div with a unique id of map-canvas. It’s into that div that we’ll be injecting a map. Below that div, meanwhile, is a form, inside of which is an input of type text with a unique id of q that we’ll use to take input from users.

styles.css

Now navigate your way to project4/public/css and open up styles.css. In there is a bunch of CSS that implements the mashup’s default UI. Feel free to tinker (i.e., make changes, save the file, and reload the page in Chrome) to see how everything works, but best to undo any such changes for now before forging ahead.

scripts.js

Navigate next to project4/public/js and open up scripts.js. Ah, the most interesting file yet! It’s this file that implements the mashup’s "front-end" UI, relying on Google Maps and some "back-end" PHP scripts for data (that we’ll soon explore). Let’s walk through this one.

Atop the file are some global variables:

  • map, which will contain a reference (i.e., a pointer of sorts) to the map we’ll soon be instantiating;

  • markers, an array that will contain references to any markers we add atop the map; and

  • info, a reference to an "info window" in which we’ll ultimately display links to articles.

Below those global variables is an anonymous function that will be called automatically by jQuery when the mashup’s DOM is fully loaded (i.e., when index.html and all its assets, CSS and JavaScript especially, have been loaded into memory).

Atop this anonymous function is a definition of styles, an array of two objects that we’ll use to configure our map, as per https://developers.google.com/maps/documentation/javascript/styling. Recall that [ and ] denote an array, while { and } denote an object. The (very pretty) indentation you see is just a stylistic convention to which it’s probably ideal to adhere in your code as well.

Below styles is options, another collection of keys and values that will ultimately be used to configure the map further, as per https://developers.google.com/maps/documentation/javascript/reference#MapOptions.

Next we define canvas, by using a bit of jQuery to get the DOM node whose unique id is map-canvas. Whereas $("#map-canvas") returns a jQuery object (that has a whole bunch of functionality built-in), $("#map-canvas").get(0) returns the actual, underlying DOM node that jQuery is just wrapping.

Perhaps the most powerful line yet is the next one in which we assign map (that global variable) a value. With

new google.maps.Map(canvas, options);

we’re telling the browser to instantiate a new map, injecting it into the DOM node specified by canvas), configured per options.

The line below that one, meanwhile, tells the browser to call configure (another function we’ve written) as soon as the map is loaded.

addMarker

Uh oh, a TODO. Ultimately, given a place (i.e., postal code and more), this function will need to add a marker (i.e., icon) to the map.

configure

This function, meanwhile, picks up where that anonymous function left off. Recall that configure is called as soon as the map has been loaded. Within this function we configure a number of "listeners," specifying what should happen when we "hear" certain events. For instance,

google.maps.event.addListener(map, "dragend", function() {
    update();
});

indicates that we want to listen for a dragend event on the map, calling the anonymous function provided when we hear it. That anonymous function, meanwhile, simply calls update (another function we’ll soon see). Per https://developers.google.com/maps/documentation/javascript/reference#Map, dragend is "fired" (i.e., broadcasted) "when the user stops dragging the map."

Similarly do we listen for zoom_changed, which is fired "when the map zoom property changes" (i.e., the user zooms in or out).

On the other hand, upon hearing dragstart, we ultimately call removeMarkers so that all markers disappear temporarily as a user drags the map, thereby avoiding the appearance of a flicker that might otherwise happen as markers are removed and then re-added after the maps bounds (i.e., corners) have changed.

Below those listeners is our configuration of that typeahead plugin. Take another look at https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md if unsure what autoselect, highlight, and minLength do here. Most importantly, though, know that the value of source (i.e., search) is the function that the plugin will call as soon as the user starts typing so that the function can respond with an array of search results based on the user’s input. For instance, if the user types foo into that text box, the function should ultimately return an array of all places in your database that somehow match foo. How to perform those matches will ultimately be left to you! The value of templates, meanwhile, is an object with two keys: empty, whose value is the HTML that should be displayed when search comes back empty (i.e., returns an array of length 0), and suggestion, whose value is a "template" that will be used to format each entry in the plugin’s dropdown menu. Right now, that template is simply <p>TODO</p>, which means that every entry in that dropdown will literally say TODO. Ultimately, you’ll want to change that tvalue to something like

<p><%- place_name %>, <%- admin_name1 %></p>

so that the plugin dynamically inserts those values (place_name and admin_name1) or some others for you. In contrast to <%=, which Underscore also supports, the <%- ensures that the value will be escaped, a la PHP’s htmlspecialchars, per http://underscorejs.org/#template.

Next notice these lines, which are admittedly a bit cryptic at first glance:

$("#q").on("typeahead:selected", function(eventObject, suggestion, name) {
    map.setCenter({lat: parseFloat(suggestion.latitude), lng: parseFloat(suggestion.longitude)});
    update();
});

These lines are saying that if the HTML element whose unique id is q fires an event called typeahead:selected, as will happen when the user selects an entry from the plugin’s dropdown menu, we want jQuery to call an anonymous function whose second argument, suggestion, will be an object that represents the entry selected. Within that object must be at least two properties: latitude and longitude. We’ll then call setCenter in order to re-center the map at those coordinates, after which we’ll call update to update any markers.

Below those lines, meanwhile, are these:

$("#q").focus(function(eventData) {
    hideInfo();
});

If you consult http://api.jquery.com/focus/, hopefully those lines will make sense?

Below those are these:

document.addEventListener("contextmenu", function(event) {
    event.returnValue = true;
    event.stopPropagation && event.stopPropagation();
    event.cancelBubble && event.cancelBubble();
}, true);

Unfortunately, Google Maps disables ctrl- and right-clicks on maps, which interferes with using Chrome’s (amazingly useful) Inspect Element feature, so these lines re-enable those.

Last up in configure is a call to update (which we’ll soon look at) and a call to focus, this time with no arguments. See http://api.jquery.com/focus/ for why!

hideInfo

Thankfully, a short function! This one just calls close on our global info window.

removeMarkers

Hm, a TODO. Ultimately, this function will need to remove any and all markers from the map!

This function is called by the typeahead plugin every time the user changes the mashup’s text box, as by typing or deleting a character. The value of the text box (i.e., whatever the user has typed in total) is passed to search as query. And the plugin also passes to search a second argument, cb, a "callback" which is a function that search should call as soon as it’s done searching for matches. In other words, this passing in of cb empowers search to be "asynchronous," whereby it will only call cb as soon as it’s ready, without blocking any of the mashup’s other functionality. Accordingly, search uses jQuery’s getJSON method to contact search.php asynchronously, passing in one parameter, geo, the value of which is query. Once search.php responds (however many milliseconds or seconds later), the anonymous function passed to done will be called and passed data, whose value will be whatever JSON that search.php has emitted. (Though if something goes wrong, fail is instead called.) Finally called is cb, to which search passes that same data so that the plugin can iterate over the places therein (assuming search.php found matches) in order to update the plugin’s drop-down. Phew.

Notice that we’re using getJSON's "Promise" interface, per http://api.jquery.com/jquery.getjson/. Rather than pass an anonymous function directly to getJSON (to be called upon success), we’re instead "chaining" together calls to getJSON, done (whose argument, an anonymous function, will be called upon success), and fail (whose argument, another anonymous function, will be called upoon failure). See http://api.jquery.com/jquery.ajax/ for some additional details. And see http://davidwalsh.name/write-javascript-promises for an explanation of promises themselves.

Notice, too, that we’re using console.log much like you might use printf in C to log errors for debugging’s sake. You may want to do so as well! Just realize that console.log will log messages to the browser’s console (i.e., the Console tab of Chrome’s developer tools), not to your terminal window. See https://developer.mozilla.org/en-US/docs/Web/API/Console.log for tips.

showInfo

This function opens the info window at a particular marker with particular content (i.e., HTML). Though if only one argument is supplied (marker), showInfo simply displays a spinning icon (which is just an animated GIF). Notice, though, how this function is creating a string of HTML dynamically, thereafter passing it to setContent. Perhaps keep that technique in mind elsewhere!

update

Last up is update, which first determines the map’s current bounds, the coordinates of its top-right (northeast) and bottom-left (southwest) corners. It then passes those coordinates to update.php via a GET request (underneath the hood of getJSON) a la:

GET /update.php?ne=42.42783050736053%2C-71.00200380859377&sw=42.32612831530431%2C-71.24919619140627 HTTP/1.1

The %2C are just commas that have been "URL-encoded." Realize that our use of commas is arbitary; we’re expecting update.php to parse and extract latitudes and longitudes from these parameters. We could have simply passed in four distinct parameters, but we felt it was semantically cleaner to pass in just one parameter per corner.

As we’ll soon see, update.php is designed to return a JSON array of places that fall within the map’s current bounds (i.e., cities within view). After all, with those two corners alone can you define a rectangle, which is exactly what the map is!

As soon as update.php responds, the anonymous function passed to done is called and passed data, the value of which is the JSON emitted by update.php. (Though if something goes wrong, fail is instead called.) That anonymous function first removes all markers from the map and then iteratively adds new markers, one for each place (i.e., city) in the JSON.

Phew and phew!

update.php

Now navigate your way to project4/public and open up update.php. Ah, okay, here’s the "back-end" script that outputs a JSON array of up to 10 places (i.e., cities) that fall within the specified bounds (i.e., within the rectangle defined by those corners). You won’t need to make changes to this file, but do read through it line by line, Googling any function with which you’re not familiar. Of particular interest should be preg_match, which allows you to compare strings against "regular expressions." While cryptic at first glance, our two calls to preg_match in update.php are simply ensuring that both sw and ne are comma-separated latitudes and longitudes.

Oh, and yes, this file’s SQL queries assume that the world is flat for simplity.

search.php

Next open up search.php. Ah, not much in there now. Just an eventual TODO!

articles.php

Now open up articles.php. This one we’ve implemented for you. Read through its lines and then take a look at the implementation of articles in functions.php, Googling for insights as needed. Notice how articles.php expects a GET parameter called geo, which it passes (via articles) to Google News for localized news, thereafter returning a JSON array of objects, each of which has two keys: link and title.

You can actually see this file in action. Go ahead and visit URLs like

where jharvard is your own username. You should see a (pretty-printed) JSON array of articles!

config.php

Let’s now take a quick peek at the file that all those other PHP files have required. Navigate your way to project4/includes and open up config.php. Ah, a file quite like Project 2’s own config.php, albeit simpler.

constants.php

Next open up constants.php. Ah, another familiar sight, albeit with a database called project4. Do paste in your MySQL password here, as you did for Project 2.

functions.php

And now take a look at functions.php. In there that same function, query, from Project 2, albeit slightly modified. For all intents and purposes, though, you can call it the same as before. And there’s that other function, articles, via which you can retrieve articles for a given geography (by city and state or by zip code). Notice, if you didn’t already, that it uses a "cache" so as to reduce the frequency of (potentially identical) queries to Google News.

cache.php

Ah, there’s that cache. It happens to use $_SESSION as simple (if imperfect!) way of "remembering" for which geographies we’ve already recently queried for news. If curious, more sophisticated applications would typically use something like Memcached or Redis instead.

What To Do

Alright, it’s time to mash Google’s two APIs together.

import

Recall that places, that MySQL table you imported earlier, is currently empty. The data that needs to be in it, meanwhile, is in US.txt.

Write, in import, a command-line script in PHP that accepts as a command-line argument the path to a file (which can be assumed to be formatted like US.txt) that iterates over the file’s lines, inserting each as new row in places. We leave the overall design of this script to you, but be sure to perform rigorous error-checking, leveraging file_exists, is_readable, and/or similar. Odds are you’ll find fopen, fgetcsv, and fclose of particular help, along with query from functions.php. Note that fgetcsv takes an optional third argument that allows you to override the default delimiter from a comma to something else.

To run this script, you’ll want to execute a command like

./import /path/to/US.txt

where /path/to/US.txt is indeed the (relative or absolute) path to that file (that you added to your Cloud9 workspace earlier).

Odds are the first several runs of your script won’t be quite right, so you’ll likely want to empty places between runs, as by executing

TRUNCATE places

in phpMyAdmin’s SQL tab or by clicking Empty the table (TRUNCATE) in phpMyAdmin’s Operations tab. If you take the latter approach, be sure that you’ve first selected places (as by clicking it in phpMyAdmin’s lefthand column) so that you don’t truncate some other table. And be sure not to click Delete the table (DROP), else you’ll have to re-import project4.sql and re-create any changes you’d made.

Either now or later on, you should probably add one or more additional indexes to places in order to expedite searches (for search.php). See http://dev.mysql.com/doc/refman/5.5/en/mysql-indexes.html and http://dev.mysql.com/doc/refman/5.5/en/fulltext-search.html (and Google!) for tips. (We defined places in project4.sql as using a MyISAM engine so that a FULLTEXT index is an option.)

Even though data can sometimes be imported in bulk via phpMyAdmin’s Import tab, you must indeed (in case wondering!) implement import as prescribed!

search.php

Implement search.php in such a way that it outputs a JSON array of objects, each of which represents a row from places that somehow matches the value of geo. The value of geo, passed into search.php as a GET parameter, meanwhile, might be a city, state, and/or postal code. We leave it to you to decide what constitutes a match and, therefore, which rows to SELECT. Odds are you’ll find SQL’s LIKE and/or MATCH keywords helpful. Again see http://dev.mysql.com/doc/refman/5.5/en/string-comparison-functions.html and http://dev.mysql.com/doc/refman/5.5/en/fulltext-search.html (and Google!) for tips.

To test search.php, even before your text box is operational, simply visit URLs like

and other such variants to see if you get back the JSON you expect. Again, though, we leave it to you to decide just how tolerate search.php will be of abbreviations, punctuation, and the like. The more flexible, though, the better! Try to implement features that you yourself would expect as a user!

configure

Now that search.php and your text box are (hopefully!) working, modify the value of suggestion in configure, the function in scripts.js, so that it displays matches (i.e., place_name, admin_name1, and/or other fields) instead of TODO. Recall that a value like

<p><%- place_name %>, <%- admin_name1 %></p>

might do the trick, perhaps coupled with some CSS.

addMarker

Implement addMarker in scripts.js in such a way that it adds a marker for place on the map, where place is a JavaScript object that represents a row from places, your MySQL table. See https://developers.google.com/maps/documentation/javascript/markers for tips. But also see http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.10/ for an alternative to Google’s own markers, which add support for labels beneath markers. (Recall that we’re already loading markerwithlabel_packed.js for you in index.html.)

When a marker is clicked, it should trigger the mashup’s info window to open, anchored at that same marker, the contents of which should be an unordered list of links to article for that article’s location (unless articles.php outputs an empty array)!

Again, not to worry if some of your markers (or labels) overlap others, assuming such is the result of imperfections in US.txt and not your own code!

If you’d like to customize your markers' icon, see https://developers.google.com/maps/documentation/javascript/markers#simple_icons. For the URLs of icons built-into Google Maps, see http://www.lass.it/Web/viewer.aspx?id=4. For third-party icons, see http://mapicons.nicolasmollet.com/category/markers/.

removeMarkers

Implement removeMarkers in such a way that it removes all markers from the map. Odds are you’ll need addMarker to modify that global variable called markers in order for removeMarkers to work its own magic!

How to Submit