Translations
Info
All page names need to be in English.
en da  de  fr  it  ja  km  nl  ru  zh

Rggooglemap

From TYPO3Wiki
Jump to: navigation, search
Extension detail information
rggooglemap/ rggooglemap
the description for this extension
documentation state [[:Category:|]] [[Category:]] document state list
licence OCL
forgeproject
mailinglist
usergroups list of usergroups
author(s) Georg Ringer
TER category fe
dependency tt_address, xajax, de_addbodyjscript

<< Back to Extension manuals page

[edit]


notice - Open Content License

This document is published under the Open Content License

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


notice - Draft

Change the {{draft}} marker to {{review}} when you need a reviewer for text and TypoScript. info

Introduction

What does it do?

Screenshots

Uploads via Special:Uploads

Users manual

Installation

Please follow these steps

  • Install the following extensions:
    • xajax: is needed for all the ajax calls
    • NEW de_addbodyjscript is needed to load the map, more information afterwards
    • I found, that I could avoid de_addbodyjscript, and instead use page.wrap in my TS setup. I wrote
TS TypoScript:
page.wrap (
| <script type="text/javascript"> if (typeof makeMap == 'function') { window.onload = makeMap; } </script>
)

or this should work too:

TS TypoScript:
seite.bodyTagAdd = onload="makeMap();"

or in your Main-Template:

TS TypoScript:
#onload for GoogleMaps
seite.bodyTag = <body onload="makeMap();" alink="#FFFFFF" vlink="#FFFFFF" link="#FFFFFF">
  • 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.

Key-rgmap.gif

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:
       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

Sys-folder.gif

  • go to your Typoscript template and and set the value

plugin.tx_rggooglemap_pi1.pidlist to the uid of this newly created sysfolder (otherwise you won't be able to assign yout categories to adress records)

  • create a record POI Category.

Poi.gif

  • Enter at least a name and an image!

New-poi.gif

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

Rg-poi.gif

Using the Backend Module "Google-Map"

  • Choose the BE-Module "Google-Map"

Be-rgmap.gif

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

New-rgmap.gif

  • Move the Marker around until you have found the position you want
    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

Load-rgmap.gif

  • Press Save
    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)

New1-rgmap.gif

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

Geocode-rgmap.gif

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

Save-rgmap.gif

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

Save2.rgmap.gif

Insert the plugin into a page

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

Tmpl-rgmap.gif

  • 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:

Body onevents javascript.gif

  • 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

Jscall-rgmap.gif

  • 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!

Map-rgmap.gif

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

Menu-rgmap.gif

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/

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

www.eti-brandenburg.de/energieatlas/ "Brandenburgischen Energie Technologie Initiative"

Hotel Übersichtskarte Mallorca Fincahotels.com

www.foundry-planet.com Giesserei und Gussbranchen Online-Magazin


WeingAlerie Hainfeld/Pfalz

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

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.

not used yet

=== FAQ ===

== Adminstration ==

=== FAQ ===



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

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

|-
|yourproperty
|[[T3Doc:TyposcriptReference/DataTypes/String|string]] / [[T3Doc:TyposcriptReference/Functions/Stdwrap|stdWrap]]
|Your Property description - [[Help:Contents#Wiki-Table|more about wiki-table]]
|the default value

|-
|
|
|

|}

== Tutorial ==

== To-Do list ==

== Changelog ==

== Whishlist ==