Creighton Students
Manual Home  >  Typo3 assistance  >  Help working with content  >  Types of Content  >  Special content   >  Add a Google map to a page
Add a Google map to a page

Get the code from Google

Go to Google Maps (http://maps.google.com/) and search for the address you need. The click the "Link" link at the upper right corner of the map.

Click image for full size:

Highlight and copy the contents of the second textbox.

Click image for full size:

 

HTML Content - what is it and what can it do?

 If you want to add a Picasa Gallery, a YouTube video, a Facebook widget, an addthis.com widget on your page, or something else like this you will use the HTML content element to hold the code that they gave you to add it to your site. 

You might think that you could use the Regular text element and change the Rich text editor to HTML view to do this but you can't always rely on the integrity of the code.  It's possible to add HTML via the HTML view and have Typo3 honor that, but it's also possible that the rich text editor will make a mess out of the HTML when trying to save it as a text element. 

To prevent this, there is a straight HTML content element.

To top

General Tab

  1. Type - this would change the Text element to another of the different content elements available.  You can choose Text, Insert records, Site Map, Header only, HTML, Mail form, and Plugin.
  2. Columns - what column you want the content in, Normal, Left, Right or Border.  At Creighton we almost always use Normal for the center/main content.  Left and Right columns are obvious and Border usually is below the Normal content with styling separating it from the main content.
  3. Index - if you are using a Section Index Menu (creating bookmarks to the content on the page), that menu would show only the content elements with Index checked.
  4. Hide this content element
  5. Name, this is for your convenience so you can identify what that element is.  It shows up in List or Page.  
  6. To Top - this will create a "To Top" link below this content element.

To top

HTML Tab


Not much to it, just a large text area.  In here you would put your HTML.  

Note:  Text entered here will show up on the page as it would from the Regular text element.  However it will not get the tags usually assigned to it and may not get any styles.  Text that you want to show up on your page should be put into a Regular text Element.

Please do not use this to add content from another site.  Many other sites especially those created with a wysiwig editor like Front Page or Dreamweaver have tags that are no longer considered valid and may, indeed, cause problems with your site.  The webteam cannot support content pulled from other sites.  

The code that you are adding will vary greatly but below is an example of a Facebook widget.

Click image for full size:

 

The contents in an HTML area might look like (this is a Picassa embed):

 

To top

Access Tab

The Creighton Typo3 trainers do an excellent job of covering this in the Typo3 class.  You can find it in the handout from that class on page 20.  If you cannot find your copy you may download one from here (pdf, doc).  The class is also available in Bluetrain.

One thing to note is that the content will appear/disappear at midnight of the date entered.

  1. Start - If you want this page hidden but to show on a certain date, you can put that date here. NOTE: the format is Day/Month/Year.  And the effective time is midnight of that date.  
  2. Stop - If you wanted this page to become hidden on a certain date, you can put that date here. NOTE: the format is Day/Month/Year.  And the effective time is midnight of that date.
  3. Selected (and Items) - Not seen on the Medschool Server - this is used when there is information on that page that would be limited to a certain group of people who had to login to see it.  It is used in conjunction with a login.

To top

Paste in the Google Maps code

Paste the Google Maps code into the HTML text area and save.

Click on image for full size:

Results

The map will then show up on your page:

You can customize the look a bit through Google by clicking the "Customize and preview embedded map" link at the bottom of the pop up where you got the code.

Results

The map will then show up on your page:

You can customize the look a bit through Google by clicking the "Customize and preview embedded map" link at the bottom of the pop up where you got the code.

Creighton University