Rggooglemap

From TYPO3Wiki

<< Back to Extension manuals page

[edit]

This document is published under
the Open Content License

The content is related to TYPO3 - a GNU/GPL
CMS/Framework available from www.typo3.com

This is a draft version. You're welcome to edit it.

When the content is good enough, please change the {{draft}} tag to {{review}} .

Introduction

What does it do?

Screenshots

Uploads via Special:Upload

Users manual

Installation

Please follow these steps

• Install the following extensions:
  • xajax: is needed for all the ajax calls
    (you might have a look at bugs.typo3.org, changing the code to the last suggested variant on line 454 fixed the xajax javascript error for me)
  • NEW de_addbodyjscript is needed to load the map, more information afterwards

• To be able to display any Google Maps at your website, you need a valid key! This key is unique for every domain! Get your key(s) at http://code.google.com/apis/maps/signup.html and enter it in the Extension Manager after installation rggooglemap.
  

Upgrade from 2.1.3 to 3.0.0

• Install de_addbodyjscript, required to load map
• Category references get lost
  • old field tx_rggooglemap_cat, new field tx_rggooglemap_cat2 in table tt_address
  • sync fields once after upgrade with: <SQL> :

     USE your_typo3_db; UPDATE tt_address SET tx_rggooglemap_cat2 = tt_address.tx_rggooglemap_cat;

• Category images get lost
  • set new images in the category records

Create a record

By default rggooglemap works with tt_address but it can work with every table you want to (more information).

Create a googlemap category record

To be able to show any record, you need to create a category first!

• Create a sys folder or use an existing one
  

• create a record POI Category.
  

• Enter at least a name and an image!
  

• The image is required because this ifs the icon which will be shown on the map later on.
  

Using the Backend Module "Google-Map"

• Choose the BE-Module "Google-Map"
  

• Choose in the dropdown-menu at the right side "1. Map & Saving Point"
  

• Move the Marker around until you have found the position you want
  

1. 1. Use the Geocoding by enabling the additional options: Just enter an adress and press "Search"
   2. Load an existing position with the 2nd input field in the additonal options. It is an auto-complete field

• Press Save

1. 1. a) ... to a new record: Click the link to get an empty record with prefilled coordinates
   2. b) ... to an existing record: Override an existing field by using the auto-complete field

Fill the coordinates in the record itself

• Open a new or existing record (e.g. of tt_address)
  

• Click on the icons next to the longtitude/latitude fields to open the wizard
  

• Search for the position you want (geocoding is also available in the options)
• Press Save & Close
  

• Don't forget to press "Save" at the record itself!
  

Insert the plugin into a page

• Include the static TS from the extension (use an ext. template)
  

• If you want to display a map: Create a record of type Body onEvents Javascript in the page where your map should be displayed by using the WEB>LIST menu:
  

• In this record, enter "makeMap();" in the field Java Script Call (This is necessary to load the js function which loads the map) use onLoad as on the picture
  

• Be sure that you have somewhere at least a tt_address record with at least one rggooglemap category

• Insert the Plugin and choose as mode Map and select the sysfolder with the tt_address records at the starting point!
  

• Select Menu to show just the records with a link to the map
  

Templates

The manual is surely quite short because of lack of time but do get an idea what you can do with rggooglemap, please take a look at the following pages! I did all of these ones and included the templates of the used rgooglemap in the extension's folder res/help/templateSamples/

• http://www.gosau.org/uebernachten-in-gosau/hotels-und-gasthoefe.html
• http://www.hotel-koller.com/interaktiv/historische_hotels.html
• http://www.einkaufsstrassen.at/vereinsuebersicht.html & http://www.einkaufsstrassen.at/erdberg/unternehmen.html

What do to

• Finish up the extension
  • Manual
  • Code
• Add more features

You used this extension?

Feel free to add the link to your website here

Configuration (Typoscript reference)

plugin.tx_rggooglemap_pi1

Property	Description	Data Type	Default	BE flexform parameter
templateFile	Template for FE rendering	String	EXT:rggooglemap/template.html
mapId	ID of the page which displays the map; mandatory!	Integer
pidList	List of page IDs where the tt_address records are stored	String
recursive	If set, will look for records on all subpages of the pages in pidList
mapDiv	id of the div where the map is loaded		map
mapWidth	Width of map in FE (px)	Integer	300	Width of map
mapHeight	Height of map in FE (px)	Integer	450	Height of map
mapLng	Starting longitude	Float	13.537216186523438	Start Longtidude
mapLat	Starting longitude	Float	47.585673399138294	Start Latidude
mapZoom	Starting zoom level	Integer	11	Start Zoom
mapKey	Your Google API key	String	Googlemap Key
mapType	Basic map type (Map/Satellite/Hybrid)	String	G_MAP_TYPE	Type of map
mapControl	?		show
mapNavigation	?		small
mapOverview	Display overview in the lower right corner of the map	Boolean	0
recursive
mapNavigationOnMouseOver			0
mapActiveCats			emtpy
mapAvailableCats			emtpy
enableDoubleClickZoom			1
enableContinuousZoom			1
enableScrollWheelZoom			1
recordsPerPage			10
poi.name.wrap			empty
imageFields			image
linkFields			email,www
menu.orderByCat			title
menu.orderByRecord			name
search.minChars			3
search.tt_address			title,description,name
search.fe_users			comments,name,first_name,last_name,company
activateCluster			0
geocodeDefaultCountry			germany
_CSS_DEFAULT_STYLE			empty

plugin.tx_rggooglemap_pi1.catIcon

These configurations will be applied to the Image Icon shown in the CatTree Template (###CAT_MENU###)

• Note: These configurations WON'T BE APPLIED to the icons INSIDE the map.
• If you want to change the icon size of the icons in the map, you'll have to edit the javascript file-> Note: The changes in the javascript file will be lost if/when you update the extension!

The path to the JavaScript File is: EXT:rggooglemap/res/gm.js

The line you'll have to change is: baseIcon.iconSize = new GSize(16, 16); -> the default is 16 x 16 px, as you can see

Property	Description	Data Type	Default	BE flexform parameter
file.maxW	Width in px		11
file.maxH	Height in px		11
stdWrap.spaceAfter			0

plugin.tx_rggooglemap_pi1.poiImage

The poiImage, is the Image File given in the tt_address item. The configuration of width and height you configure here, will be applied to the POIinfo Template and to the InfoBox Template (there's no separated confiuration yet)

Property	Description	Data Type	Default	BE flexform parameter
file.maxW	Width in px		60
file.maxH	Height in px		80

More to follow soon

Known problems

• IE6 won't load the page where google-maps is inserted: «Die Internetsite http://page-where-google-map-is.com kann nicht geöffnet werden. Vorgang abgebrochen»

This results because IE6 tries to load a javascript before the loading of the page itself.

• The PIDLIST MUST be configured in the BE FLEXFORM, just a TYPOscript global-configuration doesn't work. It wont show the icons in the map.

• The Cat Tree doesn't show a category with undercategories, all shown categories must be parent categories.

not used yet

=== FAQ ===

== Adminstration ==

=== FAQ ===



=== FAQ ===
=== Reference ===

{| {{DesignTable|background-color:white}}
| '''Property:'''
| '''Data type:'''
| '''Description:'''
| '''Default:'''

|-
|yourproperty
|[[TSrefDataTypes#string|string]] / [[TSref/stdWrap|stdWrap]]
|Your Property description - [[Help:Contents#Wiki-Table|more about wiki-table]]
|the default value

|-
|
|
|

|}

== Tutorial ==

== To-Do list ==

== Changelog ==

== Whishlist ==