1.1 Getting Started with Google Maps API

For this week’s assignment, you will set up your own website, and perform the following tasks

  1. Create a Maproom using Google Maps API
  2. Add markers
  3. Add an infowindow
  4. Upload to BOL

Part 1:  Creating Your Google Maps Mash-up

  1. Open a text editor (Dreamweaver is preferred, but NotePad++, Wordpad are alternatives)
  2. Create a new file.  If using Dreamweaver, make sure you are in “code view”.  If Dreamweaver automatically generates code based on their templates, makes sure to delete it and start with a blank sheet (press Ctrl-A, then Delete).
  3. Copy and paste the code sample below:
  4. Save your file in a local directory and name it “maproom.html”.
  5. Navigate to your file with windows explorer (or My Computer), and open the file in a browser.  What do you see?
  6. Let’s change the default location.  First, find the following lines of code in your maproom.html:
  7. 1
    var latlng = new google.maps.LatLng(-34.397, 150.644);
  8. Notice the latitude and longitude values.  This determines the default center location of your map. These are the numbers you want to change.
  9. Changing the center of the map: Go to http://getlatlon.yohman.com.  Enter your home address (or any desired location).  Copy the latitude, longitude numbers and replace the values from the step above.  Save the file, and refresh your web browser.  Is your map now centered on your home?
  10. Setting the zoom level: Find the line that sets the zoom level.  It should be set at “8”.  Change this number to a value between 0 and 20.  Save and refresh.  What number is the “most” zoomed in?  What number is the “most” zoomed out?
  11. Change the basemap: Find the line that sets the basemap:
    1
    mapTypeId: google.maps.MapTypeId.ROADMAP

    You can change the MapTypeId from ROADMAP to other values.  Here are the valid map types:

    • ROADMAP displays the normal, default 2D tiles of Google Maps.
    • SATELLITE displays photographic tiles.
    • HYBRID displays a mix of photographic tiles and a tile layer for prominent features (roads, city names).
    • TERRAIN displays physical relief tiles for displaying elevation and water features (mountains, rivers, etc.).
  12. Adding a point marker: The following code produces a marker icon on the center of your map.  REPLACE the LatLng values with the latitude longitude coordinates you used for the center of your map.
  13. 1
    2
    3
    4
    5
    6
    7
    var marker_latlng = new google.maps.LatLng(-34.397, 150.644);

    var marker = new google.maps.Marker({
    position: marker_latlng,
    map: map,
    title:"Hello World!"
    });

    Make sure to position this code within the initialize() function (ie, inside the opening “{“ and closing “}”, preferably right before the closing “}”.

  14. Save your file, and refresh the map.  You should see a Marker at the center of your map.
  15. Now let’s add an “info” window to your google marker point. Just below the marker code from the previous step, add the following:
  16. 1
    2
    3
    4
    5
    6
    7
    8
    9
    var contentString = 'My info window content';

    var infowindow = new google.maps.InfoWindow({
    content: contentString
    });

    google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
    });
  17. Refresh your map, and click on the marker icon.  Feel free to change the Info content by editing the contentString portion of the marker code.
  18. Now you know how to create a google mash-up!  You have learned how to create a map, center the map, and apply a default zoom level.  You also know how to add marker points and create info windows with content.

Part 2:  Upload your files to your BOL account

In order to make your website public to the world, you need to upload it to a web server.  Fortunately, as a member of the UCLA community, you are granted 100MB of free web space on BOL!  Let’s take advantage of this.

  1. Go to http://mail.ucla.edu and log in.
  2. Click on “File Manager” on the left menu bar.
  3. Now click on the “browse” button and upload the following files:
    • maproom.html
  4. Now let’s have a look at your website. Your website should be:http://your_bol_username.bol.ucla.edu/maproom.html

Challenge Tasks

What?  This is too easy?  Want to do more?  Ok, see if you can do some or all of the following tasks on your own:

  1. Add  more point markers to your map
  2. Aren’t you tired of that google icon?  Go to http://mapicons.nicolasmollet.com/ and change the icon

2 thoughts on “1.1 Getting Started with Google Maps API

  1. Part 1, #5: I’ve uploaded the maproom.html file using both Chrome and Firefox and it only displays the code. I cannot see where there are any errors.

Leave a Reply