Google Map Basics

Tutorial: Google Map Basics

Introduction

google map This tutorial will show you how to create your first Google map. These step-by-step instructions are guaranteed to get you started in one of the coolest—and easiest—Web technologies.

Getting there

Step 1 Go to Google.com and sign in.   bar Step 2 Log in with your Google account. If you do not have an account you can create your free account here. bar Step 3 Click Maps in the top navigation.

Bring up an address

  Step 4 This is the Google Maps starting point. Enter the address you want to map and then click the search maps button. Note the address on the left sidebar and the green locator icon on the map. bar Step 5 In the location balloon click Save to My Maps.   bar Step 6  In the pop-up menu select Create a new map. Click the Save button. bar Step 7 This displays the address in your own map. Note that you are in the My Maps tab.
Note that the Location Title(1) for the icon in the pop-up is the 1807 address as is the Title of the map (2) & (3) and the Listing of the icon point in the sidebar (4) is also the 1807 address.
 

Getting the code

Step 8 Change the information in the pop-up window. Change the Title of the location (1), click the icon and make a selection (2), Use the text formatting tools (3) to change the appearance of the text. Use the link tool (4) to create a link to the Web site of your choice (in our example, we’ve created a link to Brewed Awakenings’ Web site). bar   Step 9   Change the Title of the map and add a description and click the Done button.   title                   bar Step 10 This displays the edited map information. Note the new map Title is displayed (1), and the new Listing Title (2) matches the Location Title (3).   bar   Step 11 Copy the embed code.   Click Link to this page (1), then select and copy the embed text (2).

Using the code

Step 12
In your WordPress page go to the Code editing tab. This will enable you to use the embed code that you copied.
        bar Step 13
Identify that you are going to enter code by clicking the “code” button. Click the code button (1) and the beginning HTML code tag is automatically inserted (2). code barStep 14
Paste in the Google Maps embed code that you copied.
bar
Step 15
Close the open code tag.
Notice that the code button has automatically changed to a /code button (1). Click the /code button and the closing tag is inserted (2). Click Save.
              bar Step 16 In WordPress Admin click to view the page you used to embed the map.                     bar Step 17 Congratulations! Your Google map is displayed.

About this Tutorial

Tutorial presented by the Knight Digital Media Center at the University of California, Berkeley

Republishing Policy

This content may not be republished in print or digital form without express written permission from Berkeley Advanced Media Institute. Please see our Content Redistribution Policy at multimedia.journalism.berkeley.edu/content_redistribution/.