Creating a Google Mash-up

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 your own data from ArcMap to the Maproom as a KML file
  3. Add demographic data to your Maproom using ArcGIS Online

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. 1
    <!DOCTYPE html>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        html { height: 100% }
        body { height: 100%; margin: 0px; padding: 0px }
        #map_canvas { height: 100% }
    <script type="text/javascript" src="">

    <script type="text/javascript">
    function initialize() {
        var latlng = new google.maps.LatLng(34.07, -118.444);
        var myOptions = {
            zoom: 15,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    <body onload="initialize()">
        <div id="map_canvas" style="width:100%; height:100%"></div>
  5. Save your file in a local directory and name it “maproom.html”.
  6. Navigate to your file with windows explorer (or My Computer), and open the file in a browser.  What do you see?
  7. Let’s change the default location.  First, find the following lines of code in your maproom.html:
  8. var latlng = new google.maps.LatLng(34.07, -118.444);
  9. Notice the latitude and longitude values.  This determines the default center location of your map. These are the numbers you want to change.
  10. Changing the center of the map: Go to  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?
  11. Setting the zoom level: Find the line that sets the zoom level.  It should be set at “15”.  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?
  12. Change the basemap: Find the line that sets the basemap:
    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.).
  13. 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.
  14. 1
    var marker_latlng = new google.maps.LatLng(34.07, -118.444);

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

    [TBS_BADGE class=”warning”]NOTE![/TBS_BADGE] Make sure to position this code within the initialize() function (ie, inside the opening “{“ and closing “}”, preferably right before the closing “}”.

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

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

    google.maps.event.addListener(marker, 'click', function() {,marker);
  18. 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.
  19. 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 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:

Part 3:  Adding data from a point shapefile to your Maproom

Next, let’s add your own data to your maproom.  These are the steps you will take:

  • Convert a shapefile to a layer
  • Style it
  • Convert the layer to kml/kmz
  • Upload the KMZ file to your bol account.
  • Link your maproom to the kml file.
  1. Download LACounty_retail_center.shp from the class website.
  2. Open ArcCatalog and navigate to find LACounty_retailcenter.shp.  Right click and select Create layer….
  3. Now let’s select a symbol style for your points.  Right click on the layer you created (LACounty_retailcenter.lyr) and go to properties, symbology.  Select a symbol style for your layer.
  4. Open ArcToolbox, click on Conversion Tools, To KML and double click on Layer to KML.  Enter the following values:
    1. Layer:  Add your newly created layer
    2. Output File:  click on the folder icon, find a location and name your file “LARetail.kmz”
    3. Layer Output Scale: enter “1”
  5. Upload the newly created kmz file to your bol account.  Follow the steps from the previous section to do so.
  6. Adding a KMZ layer to your Maproom is very easy.  As long as the KMZ file is located on the “web”, all you need to do is link to it.  Add the following lines of code to your Maproom.html file:
  7. var kmlLayer = new google.maps.KmlLayer('');
  8. Save Maproom.html, upload it again to your BOL account, and refresh your maproom.

Part 4: Embed your map and write about it in the class website

Now you are ready to publish your map. Why not embed it as an interactive map as part of a blog entry on this class website?

  1. Log in to the class website and create a new post
  2. Copy the URL to your maproom, and enter the following in your post:
            [ iframe_loader src="your_URL" width="550" height="400" ]

    [TBS_BADGE class=”warning”]NOTE![/TBS_BADGE] Notice that I have purposefully added two whitespaces after the first square bracket “[” and before the closing square bracket “]”. Make sure to delete these when you insert in your post.

  3. Below your iframe code, write a paragraph that describes your map.