Tutorial: Google Map Basics
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.
Go to Google.com
and sign in.
Log in with your Google account. If you do not have an account you can create your free account here.
in the top navigation.
Bring up an address
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.
In the location balloon click Save to My Maps
In the pop-up menu select Create a new map.
Click the Save
This displays the address in your own map. Note that you are in the My Maps
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
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).
Change the Title
of the map and add a description and click the Done button.
This displays the edited map information.
Note the new map Title
is displayed (1), and the new Listing Title
(2) matches the Location Title
Copy the embed code.
Click Link to this page
(1), then select and copy the embed text (2).
Using the code
In your WordPress page go to the Code editing tab. This will enable you to use the embed code that you copied.
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).
Paste in the Google Maps embed code that you copied.
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.
In WordPress Admin click to view the page you used to embed the map.
Congratulations! Your Google map is displayed.
About this Tutorial
Tutorial presented by the Knight Digital Media Center at the University of California, Berkeley
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/.