Google Map Basics

Tutorial: Google Map Basics


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 and sign in.



Step 2

Log in with your Google account. If you do not have an account you can create your free account here.


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.


Step 5

In the location balloon click Save to My Maps.



Step 6 

In the pop-up menu select Create a new map. Click the Save button.


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).



Step 9


Change the Title of the map and add a description and click the Done button.













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).




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.






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).
barStep 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.









Step 16

In WordPress Admin click to view the page you used to embed the map.












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