Creating & Publishing Maps Online with Google Maps Engine

After you have created Layers in Google Maps Engine, the next step is to create a Map and add several layers to it. Then you can publish your map internally or externally on the Internet. This tutorial will walk you through how to create maps, add layers to the maps, and publish the maps internally or online publicly.

In this tutorial, we will use two datasets: a vector shapefile of San Francisco Baylands in California (provided by the San Francisco Estuary Institute), and two digital topographic maps of the San Francisco Bay Area (available from the Cal-Atlas Geospatial Center).

Once you have a completed map of your data, consider submitting it to the Google Earth Gallery!

Prerequisites

  • Absolutely no programming skills needed!
  • We strongly recommend that you take the previous tutorial: "Creating Layers & Styling Vector Datasets in Google Maps Engine" before proceeding.
  • You will need a Google Maps Engine account. Find out more at here. If you are a 501(c)(3) or other equivalent nonprofit or charity organization, you may be eligible for a free Google Maps Engine software grant. Find out more here.

Let's Get Started!

  1. In your Internet browser, go to mapsengine.google.com. Log in with your Google account associated with your organization's Google Maps Engine account.
  2. For this tutorial we will use the same sample datasets and layers we used in the previous tutorial. If you haven't already done so, download the sample datasets, upload them to your Google Maps Engine account, and turn them into Layers:
    1. Download the sample vector data
    2. Download the sample image data
    3. Unzip both of them to a working directory on your computer.
    4. Follow the instructions in the first Maps Engine tutorial to upload these datasets to Google Maps Engine.
    5. Follow the instructions in the previous tutorial to create layers containing these datasets.


Create a Map

  1. Click on the Create Map button in the upper-left corner.
    Create Map
  2. In the Create new map dialog, give your map a name. For this exercise, type: "San Francisco Bay Map".
  3. Click the Create button to create your map.
    Create new map dialog

    You should now be on the page for your new map, titled "San Francisco Bay Map". If you are still on another page, and see a yellow bar at the top stating that your map has been created, click on the view details link to navigate to the new map's page.

  4. On the new map's page, click on the Add layers link, or the red Add button.
    New Map

    Note that there are alternative ways to create a new map. You can start on the Layer list, select the layer or layers you want to add to the map, and click Add to map on the left-hand list. You can also start on the layer details page of a layer you want to create a map with, and click Add to map.

  5. In the Add content dialog, select the layers you want to add to the map. For this exercise, select the "San Francisco Baylands" and "Topography" layers you created in the previous tutorials.
  6. Click the Add button to add the selected layers to your map.
    Add content dialog

    You should now see a preview of your map, with both your image and vector layers visible. You can click on the polygons to see the custom balloon content you set up in the previous tutorial.

    If you want to rearrange the order of the layers, simply grab the layer names in the layers list on the map, and drag them up or down to a new position.


    Map with layers
  7. Click the Switcth to map details view button at the top of the map (grey button with a list icon on it). This will switch you from the preview to the map details page, shown below.
    Map details page

    On the map details page you can make numerous changes, including:

    • Add more layers to your map using the Add layers link on the left.
    • Remove a layer from the map by selecting the layer in the Layers list at the bottom, and then clicking the Remove layer link on the left.
    • Add a folder to the map using the Create folder link.
    • Edit details for the map, including the name and description, through the Edit details link.
    • Define who has edit access and viewing access to the map, using the Shared with and Viewable by dropdowns.

  8. Change the order of the layers by clicking the arrows to the right of the Layers list, to move them up or down the list. Move the "Topography" layer to the top of the list.
    Changed layer order

    The layer at the top of the list is drawn first, so it will appear on the bottom on the map. The layer at the bottom of the list is drawn last, so it will appear on top of the other layers on the map.



Publish your map

  1. You are now ready to publish your map. Click the Publish map button on the Map detials page.
    Changed layer order

    You will see the message at the top of the page change to Publishing map, and then to Map was published, as shown below.


    Map was published

    Remember: this does not make map and layers public -- it only publishes the map to those users with which the map is shared or by whom it is viewable.

    If, at any time, you want to unpublish a map, click on the Unpublish map button.


    Unpublish map


Share your map in Google Earth

  1. Now that you have published a map, you can share it to be viewed in Google Earth and Google Maps. Notice how, on all published maps, the links to Google Earth, Google Maps, WMS, and the Google Maps Widget are all hyperlinked.

  2. Click on the Google Earth link, and copy the URL that appears.
    Google Earth URL
  3. Open Google Earth on your computer. To download the latest version of Google Earth, go here: www.google.com/earth/.
  4. Go to the File menu and select Sign in to Maps Engine....
    Google Earth sign in
  5. On the signin page that appears, log in with the email address and password you use to access your Google Maps Engine account.

    Once you log in, you will see a page with a tab for Private Maps and a tab for Advanced. On the Private Maps tab, you will see the pubilshed maps available to your Google Maps Engine account.

  6. From the Private Maps tab, click to select the map you just published: San Francisco Bay Map.
    Google Earth Private Maps
  7. Alternatively you can go to the Advanced tab and paste in the Google Earth URL which you copied from the Map details page in Google Maps Engine, and then click the Connect to globe button.
    Google Earth Advanced

    Both the above techniques will add a map to Google Earth. The second technique also works when you have the URL for a Publicly published map, which may not be explicitly shared with your account, but is available for anyone to view.

  8. Click the Back to Google Earth button at the top, to close the browser window and view the Google Earth Globe.
  9. Look at the Layers list in the bottom left and note that the map(s) you added now appear at the bottom of the list.
  10. Zoom in on the globe to find your map of the San Francisco Bay, where you will see the image data and the vector data. You can click on the polygons to see the info windows, as shown below.
    Google Earth Map View


Share your map in Google Maps

  1. Go back to the Map details page in Google Maps Engine.
  2. Click on the Google maps link.
  3. Click on the URL that appears.
    Google Maps URL

    A new browser window or tab appears, with your map displayed on Google Maps. Notice the legend in the upper-left corner of the map, with checkboxes to turn on and off each layer.


    Google Maps map view


Share your map in an embedded map widget

  1. On the Map details page, click on the Map widget link.
  2. Copy the HTML embed code (iframe) which appears.
    Map widget code
  3. Paste the code into your website's HTML, or in a blog post, or anyplace else on the web which accepts HTML code.
    Embed widget in blog

    The images here show the map widget embedded in a Blogger post. When you publish your blog post, or make your webpage live, the map will automatically be embedded in your page.


    Embedded map widget


Share your map via WMS

  1. On the Map details page, click on the WMS link.
  2. Copy the URL which appears.
    WMS URL
  3. This WMS URL can be used to load your map in any programs which can display WMS, or Web Mapping Services.


Using the Maps API ID

  1. The Maps API ID can be used to access the map when programming with the Google Maps Engine API and the Google Maps API.

  2. To access the Maps API ID, click the Maps API ID: Details link.
    Maps API ID Details link
  3. On the Maps API ID dialog which appears, you can find the Map ID for the map, and the Layer key for each of the layers. Copy these IDs for use in your API code.
    Maps API ID dialog


Discussion & Feedback

Have questions about this tutorial? Want to give us some feedback? Visit the Google Earth Outreach Discussion Group to discuss it with others.



What's Next?