Google map mashup

ISP 121 Activity 14 Google Map Mashup This activity will give you experience working with Google maps and creating what people in the industry call mashups. A mashup is a web-based application that combines content from two or more sources into an integrated experience. In particular, we will examine how to take a Google map of our region and insert one or more address markers onto the map. While this concept is a relatively easy one, the creation of a Google map mashup requires multiple steps. Let’s take a look at each of these steps. To create a Google map mashup, we must create a web page. Creating a web page is fairly easy when using a tool such as Microsoft’s FrontPage. One small problem is that we have to have space on a web server so that we can store the web page and then view it. For this activity, you have been granted access to server space on the qrc.depaul.edu web server. More precisely, you will be saving your web page at qrc.depaul.edu/ISP121students. Open the program FrontPage, click on the drop-down menu File, click on Open Site, and enter http://qrc.depaul.edu/ISP121students. Enter the Username: ISP121user and the Password: isp121 You will need to create a new web page, so again click on File, but this time click on New and under New Page (in the right frame) click on Blank Page. Usually when you request that FrontPage create a new web page, it begins by inserting some default HTML code into it. We don’t want to use this default code, so you will want to delete it before proceeding. If you need to, on the bottom of the screen you see four buttons: Design Split - Code - Preview. Make sure the Code button is pressed. Then select all the HTML code and hit the Delete key. Now let’s insert our own HTML code. HTML (HyperText Markup Language) is the code that is used to display a web page. Normally, HTML is fairly easy to understand, but we will need to use some fairly advanced HTML code for this activity. More precisely, we are using a type of language called JavaScript. Since JavaScript is a little more difficult to create, we’ve created most of the code for you. Go to the file Google Map Source Code under the ISP 121 Links on the qrc.depaul.edu website. It is probably easiest if you right-click on this file and save it to your desktop or to My Documents. Put away the QRC website and browser and double-click on the file you just saved. Now click on View and click on Source. Copy (Ctrl-C) the contents of this file. Then go back to FrontPage and paste (Ctrl-V) these contents into your newly created web page. The code you just copied should look something like the following (it will not be exactly the same): My Map Example As we proceed with this activity, you will be asked to add a couple lines of code to the above file, display your web page, then add a couple more lines, and so on. On the blank line after the statement if (GBrowserIsCompatible()) add the following two lines of code: var map = new GMap2(document.getElementById("map")); // Set the center of the map map.setCenter(new GLatLng(X , Y), 13); { Make sure you enter these statements exactly as you see them (spacing and upper-lower case sensitive). These two statements set the center of the map to the coordinates you specify. More precisely, the coordinates are latitude and longitude values, in that order. These values are substituted in place of the X and Y variables in the second statement. (The 13 tells Google maps the resolution of the map. A value of 1 shows the entire earth, a value of 17 shows the map at street level.) Where do you want to center the map? Why not center the map to your home? You know the address of your home, but do you know the latitude and longitude of your house? Probably not. So let’s go to the website http://www.geocoder.us and enter your street address as requested. If you enter your information correctly, you should get a map of your house and the appropriate latitude and longitude. (Don’t be surprised if the map doesn’t exactly point to your house. Latitude and longitude values are accurate within so many feet.) Copy the longitude and latitude values and insert them into the HTML code back in your webpage (be careful not to mix them up – X is the latitude and Y is the longitude). For example, your two newly inserted JavaScript statements might look something like the following: var map = new GMap2(document.getElementById("map")); // Set the center of the map map.setCenter(new GLatLng(41.883395, -87.819417), 13); Now let’s see what your map looks like. On the bottom of the screen, click on Preview. If there are no errors, you should see a map of the area around your home. If there are errors, more than likely you typed something incorrectly. Be careful – JavaScript is upper case / lower case sensitive! Now let’s add two more statements right after the previous two statements. Click on Code on the bottom of the page and enter the following: map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); // Allow user to switch between map and satellite Preview your webpage. You should now see three buttons on your map: Map Satellite Hybrid. Click on them and see what happens. While you are at it, try playing with the zoom in (+) and zoom out (-) buttons on the left side of the map. It would be really neat to put a balloon marker over your house. Insert the following two lines of code into your HTML file: var point = new GLatLng(X, Y); // Set a point using this lat long map.addOverlay(new GMarker(point)); But make sure you use the same latitude and longitude values (for X and Y) that you used in the map.setCenter statement from above. Again click on Preview and see what happens. Another cool thing would be to have a pop-up marker appear when you move the cursor over the balloon over your house. Insert the following two statements into your HTML code: var marker = createMarker(point,'This is my house!!') map.addOverlay(marker); // This creates a pop-up Once again, Preview your webpage and move the cursor over your balloon marker. Let’s add another marker to the map. You can add any location you want, but if you can’t think of any other location to map, you can use the following one (it’s the CTI building on DePaul’s downtown campus): var point = new GLatLng(41.878965, -87.626130); map.addOverlay(new GMarker(point)); // Set a point using this lat long Preview your map. Do both markers show up on the map? If not, you may have to zoom out a little. A better way to do this is to alter the value 13 in the map.setCenter statement. Finally, let’s put a pop-up marker over our second balloon marker. var marker = createMarker(point,'This is CTI in the loop.') map.addOverlay(marker); Add a third marker. You may choose any location you like. Show your map to your instructor to receive credit. What kind of mashups do you think would be useful as a website?