Google Map Basics Tutorial | Google Map Basics

Tutorial: Google Map Basics

For updates and discussion on this tutorial, visit:
http://kdmc.berkeley.edu/tutorials/google-map-basics/

Introduction

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

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

Step 14

Paste in the Google Maps embed code that you copied.

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 KDMC. Please see our Content Redistribution Policy at kdmc.berkeley.edu/license.

Knight Digital Media Center Multimedia Training