Quick Google Maps

Extension Key: cbgooglemaps

Language: en

Keywords: forAdmins, forBeginners

Copyright 2000-2015, Christian Brinkert, <christianbrinkert@googlemail.com>

This document is published under the Open Content License

available from http://www.opencontent.org/opl.shtml

The content of this document is related to TYPO3

- a GNU/GPL CMS/Framework available from www.typo3.org

Table of Contents

Quick Google Maps	1

Introduction	3

What does it do?	3

Screenshots	3

Users manual	5

Installation	5

Administration	6

Configuration	7

Google API definition	7

Display settings	7

Valid parameter definition	7

Example	7

Tutorial	8

Set location:	8

Set frontend layout	9

Known problems	11

To-Do list	12

ChangeLog	13

Introduction

What does it do?

This “Quick Google Maps” extension provides the possibility to include individual maps to your frontend in a simple way:

define the location by given address (street, zip, city and/or country), by coordinates or by manual setting and dragging the google pin

simple click for retrieving geo coordinates from given address

check location in preview window, and justify location by manually dragging of the locatioin pin

define your desired layout by selecting map type, zoom level, controls, width and height

based on Google API 3, therefore no API-Key is required!

ATTENTION:

Version 2.x supports TYPO3 versions up to 6.1.x

Version 3.x only supports TYPO3 version 6.x and higher

(Between version 2 and 3 there are only a few functional differences which will be marked in the following documentation)

Screenshots

Set a location by inserting an address, coordinates and/or dragging the google pin.

Backend: define a location

Set the desired layout parameter to the frontend.

Backend: define the desired layout

Final output to the frontend:

Frontend: view example

Users manual

Installation

This extension requires “extbase” and “fluid”, so it's necessary to install these extensions first!
(You will find this extensions in the repository)

Install the extension from the Extension Repository by search for the extension key “cbquickgooglemap”.

Include the static templates to your Template.

Select the template module to the left side in the backend

choose now the root page in the page-tree, where the root template is located

click “Edit the whole template record” and

select the tab “Includes” and add the “Quick Google Maps (cbgooglemaps) to the selected Items. (see following Screenshot)

after saving this template update you can include maps to your page!

Nothing else is required and since Google API3, no API-Key is required!

Administration

The administration of this extension is limited to set some default values which will be used, if the editor will not define any value to some required fields.

This configuration values can either be set as constants or by TypoScript (see “Configuration” chapter):

To set initial values by constants,

Choose the template module

Navigate to the page which includes the root-template

Choose the “Constant Editor” in the dropdown box (top of the page)

And select the constant category “PLUGIN.TX_CBGOOGLEMAPS (x)”

Now you should see six or more constants which can be edited.

Constant:	Description
googleapi.uri	URI to include google javascript api3, should not be edited. Default: http://maps.google.com/maps/api/js?sensor=false
options.useScrollwheel	Activate or deactivate the option to zoom in the map by mouse scrollwheel. Only available for extension version 3.1.0 or higher Default: true
display.width	Set the default width of the map in the frontend view in pixel. Will be used if the editor does not define any value.
display.height	Set the default height of the map in the frontend view in pixel. Will be used if the editor does not define any value.
display.mapType	Choose the type of the map between these values: HYBRID, TERRAIN, SATELLITE and ROADMAP
display.zoom	Zoom level of the map in the frontend view. Must be an positive integer greater or equal to 0. Commonly value between 10 an 20 are used.
display.mapControl	Choose the type of displayed control elements. Valid values are DEFAULT, SMALL, ZOOM_PAN and ANDROID
display.icon	Set an individual icon to mark the position in the map. Set the path relative from document root, e.g. “fileadmin/user_uploads/myGooglePin.png”. The targeting point resides to the center bottom of the grafic Only available for extension version 3.1.0 or higher
display.styling	Specify the path and filename to the google maps styling file which includes the json data to style the map, e.g. “fileadmin/googlemapsStyling.txt” Only available for extension version 3.1.0 or higher

Configuration

The configuration can be done by setting constants or by TypoScript. To

plugin.tx_cbgooglemaps.settings.

Google API definition

Property:	Description:	Default:
googleapi.uri	URI to include google javascript api3, should not be edited. Should normally not be modified.	http://maps.google.com/maps/api/js?sensor=false

Google map options

Property:	Description:	Default:
options.useScrollwheel	Deactivate the support for zooming in google maps by mouse wheel, default: activated. Only available for extension version 3.1.0 or higher	true

Display settings

This values will be used as defaults if the editor entered no value

Property:	Description:	Default:
Display.width	Set the default width of the map in the frontend view in pixel. Will be used if the editor does not define any value.	480
display.width	Set the default height of the map in the frontend view in pixel. Will be used if the editor does not define any value.	270
display.height	Choose the type of the map between these values: HYBRID, TERRAIN, SATELLITE and ROADMAP	HYBRID
display.mapType	Zoom level of the map in the frontend view. Must be an positive integer greater or equal to 0. Commonly value between 10 an 20 are used.	12
display.zoom	Choose the type of displayed control elements. Valid values are DEFAULT, SMALL, ZOOM_PAN and ANDROID	DEFAULT
display.icon	Set an individual icon as marker for the map. Set the path and filename relative to the document root folder, e.g. “fileadmin/user_uploads/myGooglePin.png”. The targeting point resides to center bottom of the assigned grafic. Only available for extension version 3.1.0 or higher	
display.mapStyling	Specify the styling for a googlemap as json string. You can reference to a textfile, e.g. “fileadmin/googlemapsStyling.txt” or by a simple string like “[...json-data...]”. The styling will be included to the map. Only available for extension version 3.1.0 or higher	

Valid parameter definition

You can limit by which mapTypes and navigationControls the editor can choose of.

Property:	Description:	Default:
valid.mapTypes	Available valid map Types	HYBRID,ROADMAP,SATELLITE,TERRAIN
valid.navigationControl	Available valid navigation controls	SMALL,DEFAULT,ANDROID,ZOOM_PAN

Use your own template

If you wish to use your own templates, just copy the original templates from extension folder:

=> /typo3conf/ext/cbgooglemaps/Resources/Private/Templates/*

to a new location you want, e.g.

=> fileadmin/cbgooglemaps

edit the templates and set new template location by typoscript:

plugin.tx_cbgooglemaps.view.templateRootPaths.100 = fileadmin/cbgooglemaps/

!!!Attention!!!

Use for TYPO3 Versions below 6.2 “templateRootPath” instead of “templateRootPaths”, watch trailing (s) - “templateRootPath” is deprecated.

Example

Here an example to all possible definitions:

plugin.tx_cbgooglemaps {

settings{

googleapi {

uri = http://maps.google.com/maps/api/js?sensor=false

}

options{

useScrollwheel = false

}

display{

width = 480

height = 270

mapType = HYBRID

zoom = 12

navigationControl = DEFAULT

icon = fileadmin/user_uploads/myGooglePin.png
mapStyling = fileadmin/googlemapsStyling.txt

}

valid{

mapTypes = HYBRID,ROADMAP,SATELLITE,TERRAIN

navigationControl = SMALL,DEFAULT,ANDROID,ZOOM_PAN

}

}

}

or include map styling by string, e.g. to override default configuration to a single page branch:

plugin.tx_cbgooglemaps {

settings{

display{

mapStyling (

[{"featureType":"landscape", … many more ... ,{"gamma":1}]}]

)

}

}

}

Tutorial

This tutorial will describe how to include a new map to your frontend:

Set location:

First create new content element of type “plugin” in the backend.

In the appearing Flexform define now the location by entering the desired

Address (1) or

coordinates

If inserted address data, please click to the “fetch coordinates from above-mentioned address” to retrieve coordinates from google (2)

Now click the preview button “display current location” to verify the current location (3)

If necessary adjust the location by manually editing the coordinates ;-) or by dragging the google pin to the desired position. (4)

Set frontend layout

After specifying the location you can choose how the map should be displayed. This is optional and can be ignored if the default view should be used.

Manual layout setting:

Insert free text, which should be inserted as pin flag. (1)

Specify the desired width and height in pixel (2)

Select kind of mapType, how the map should be displayed. The following types are available:

Define the desired zoom level. (Typical used values between 12 and 18)

Select the desired controls, you can choose between: DEFAULT, SMALL, ZOOM_PAN and SMALL ANDROID like. See following Screenshot:

That's all, after saving your map inputs, the google map will be displayed to your frontend after saving this content element.

Known problems

Currently no problems known,
=> but feel free to search for :-)

To-Do list

Nothing yet

ChangeLog

Version	Changes:
1.0.0	Frst TER release
...	
2.0.6	Bug-Fix: Transfered JS-Files from EXT:/Resources/Private to EXT:/Resources/Public-Folder (THX to Alexander.Kai Ude for your hint!)
...	
3.0.0	Compatibility Update to TYPO3 6.0 – 6.2 Previous TYPO3 versions are only supported in the 2.x version tree!
3.1.0	Compatibility Update to TYPO3 7.0 Extended configuration to deactivate mousewheel zooming and set individual goole marker pins and individual google maps styling

Quick Google Maps - cbgooglemaps	ChangeLog

15

Quick Google Maps

cbgooglemaps

forAdmins forBeginners

The keywords help with categorizing and tagging of the manuals. You can combine two or more keywords and add additional keywords yourself. Please use at least one keyword from both lists.
If your manual is NOT in english, see next tab "language"
----
forEditors (use this for editors / german "Redakteure")
forAdmins (use this for Administrators)
forDevelopers (use this for Developers)
forBeginners (manuals covering TYPO3 basics)
forIntermediates (manuals going into more depth)
forAdvanced (covering the most advanced TYPO3 topics)
see more: http://wiki.typo3.org/doc_template#tags
----

2010-02-18T17:33:18