Welcome to the last tutorial on CS50. Today we will cover the remainder of Mashup from Problem Set 8. We will focus on writing all the JavaScript code that well make this web application fully functional. As I go through this one, I will implore you to take things a step further than what you see here. It is important that you learn how to read software documentation and how to apply it to your needs. So, let’s get started.

The first thing that you want to do, is put in the default coordinates for the map you are using. Note: If you are using the US.txt file, this must be the coordinates of a US city. If you look at line 90 of the code below, you will see that a changed the latitude and longitude from Cambridge, Mass. to Reno, Nev. I chose Reno, because this is where I am located. Look up the coordinates of your city in Google and plug them in to center the map above your home city.

Before we dig in any further to the JavaScript code below, it is a good idea to check out the Google Maps API documentation. Throughout this tutorial I will direct you to certain areas of the documentation. However, it is a good idea to snoop around in it before hand so you get a feel for how the API works. So, the first TODO that we have is we need the ability to add markers to our map. Within the documentation is an area about adding markers, which we will be expanding on. Now, let’s start by looking at line 113 from the code below. Our addMarker function takes one argument that is place. The first thing that we want to do is create the latitude and longitude for the marker. This will help us position the map over the marker later. Next, we are setting a string variable equal to the City and State for the place that is passed into the function. Remember, the names place_name and admin_name1 are coming from the database schema that we developed last week.  Next, I am adding an image that will act as the marker. Here, I am using a red push pin. But, there are a wholes host of other icons to choose from to fit your style. Simply right click the image that you like, select copy image address, and substitute the URL that I have listed with the one for the marker you would like to use.

Now, we can create our new marker. Notice that when we create the marker we are setting the position equal to the myLatLng that we created earlier. We are also using the name variable that we created to act as the label for the marker. Go ahead and mess around with the color of the label so that is fits your map design. You will also notice that I added some animation to this marker. I added the DROP animation when the marker is created, so you will see the pin fall from the top top of the screen. Below I also added some animation when the mouse hovers over the marker it will start to BOUNCE. You can mess with all these features by looking at the documentation for animating markers. Also, notice that I set the icon of the image equal to my red push pin image that I created earlier.

Now that we are done creating and configuring our marker, let’s look at how we can add the list of articles to the marker when it is clicked. Look at line 145. Here we are using JQuery, which is just a JavaScript library. The syntax looks a little weird at first, but the more you see it the easier it will become. Here we are getting the JSON objects, or list of articles, that we created in our application.py code from last week. Then we are dynamically building an unordered html list of all the articles. Notice, that each list item, or <li>, will have a link to the article (created by the href attribute) and the title of the article.   Next, we add an event listener that will execute when the marker is clicked, and show the list of articles. Finally, we add the marker to our global array markers by using the push array method.

Now, take a look at line 199, within the configure function.  All we are doing here, is adding the City, State, and Zip Code (place_name, admin_name1, and postal_code from our database schema) to the search bar. So, when a user types in a place to search, they will see a list of places in this format. Now, we must add functionality to remove all the markers. Here, we are simply iterating through our array, and using the remove marker documentation to set all the markers to null.  There are also array functions that allow you to complete this by calling a method that will iterate through the array for you. Take a look at the JavaScript map array method and see if you could rewrite this line of code using this method.

Now, you have met all the requirements to complete Mashup. However, I would like you to do a little bit more. There are all sorts of things you can mess around with inside the Google Maps API. One of them is that you can style your map however you want.  Take a look at lines 16 to 83. Here I have styled the map with some different colors for roads, highways, and parks. Take a look at the documentation on styling the map and give it some of your own flare.

That is is for Mashup. You have now worked through all the CS50 problem sets. Good Job! Now go out there and create something awesome for your final project. Remember to comment below with any questions and share this post on your favorite social media site. Beginning next week, we will begin working on some real world applications to apply the skills that you have learned. Until then…Happy Programming!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s