Google Maps Extbase

Google Maps Extbase

Classification

go_maps_ext

Version

main

Language

en

Description

Google Maps Extension. Simply insert a google responsive map Version 3, without jQuery, Calculate Route, Image for Markers, Style Maps, KML, Categories...

Keywords

google maps, google, map, api, map, marker, image, style, route, kml

Copyright

2014

Author

Marc Hirdes

Email

hirdes@clickstorm.de

License

This document is published under the Open Content License available from http://www.opencontent.org/opl.shtml

Rendered

Fri, 12 Sep 2025 12:50:05 +0000

Table of Contents

Introduction

What does it do?

The Extension provides a plugin to insert a very flexible Google Map to your site.

Features

  • Written with Extbase/Fluid
  • Works without jQuery
  • Uses Version 3 of the Google Maps API, API key needed
  • API keys can be set by editors using an extra table and FlexForms
  • Add your own markers via geocoding in the backend
  • Customize the content of the InfoWindow via RTE
  • Attach an automatic generated link to Google Maps to the content of the InfoWindow
  • Show a route between two markers
  • Create a form in the frontend to calculate a route to a specified destination
  • Configure the map (draggable, double click zoom...)
  • Import a KML file
  • Create an individual map style
  • Add Marker images for addresses or categories
  • Marker Cluster
  • Search for markers
  • Create categories for the addresses and filter them via GET-Params or Checkboxes
  • GDPR compatible - show an image preview, only if the user accept, the data from Google will be loaded

Screenshots

|screenshot|

Example of a styled map with one individual marker and automatic generated link in the InfoWindow, input and submit button to calculate route

Users Manual

  • The extension has to types of records: map and address.
  • A map can have a plurality of addresses.
  • Each frontend plug in includes one map.
  • The records can be saved on every page. Preferred is an extra SysFolder.
  • Each plugin requires one Map.

|img-4|

Map

One Map represents one Google Map in the frontend.

|img-5|

The following table shows the main configurations of a map. Each description is also shown as help text when you hover the title of a field.

Property
title
Description

Will be used as ID (without space character, special character!).

[required]

Property
width
Description
Set the width of the map. Default in px, for percentages enter '%', e.g. '100%'.[required]
Property
height
Description
Set the width of the map. Default in px, for percentages enter '%', e.g. '100%'.[required]
Property
zoom
Description
Only needed when the default zoom is wrong. Number between 0 and 23. 0 is the lowest zoom (whole world).
Property
zoom min
Description
The minimum zoom level which will be displayed on the map. If omitted, or set to null, the minimum zoom from the current map type is used instead.
Property
zoom max
Description
The maximum zoom level which will be displayed on the map. If omitted, or set to null, the maximum zoom from the current map type is used instead.
Property
addresses
Description
You can choose, create or edit an address. New addresses will be saved on the current page.
Property
latitude
Description
If set this latitude will be used to center the map. Otherwise the center is calculated so that all addresses fit in the map.
Property
longitude
Description
If set this longitude will be used to center the map. Otherwise the center is calculated so that all addresses fit in the map.
Property
previewImage
Description
Define an image to show as preview of the current map. Otherwise the fallback image of the TypoScript constant will be displayed if defined. If both is not set, a link will be displayed.
Property
kmlUrl
Description
Enter an URL of a KML file, e.g. https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml
Property
kmlPreserveViewport
Description
The viewport of the kml file will be ignored. Set zoom and at least one address to configure the viewport.
Property
kmlLocal
Description
The KML file is stored on this server. The specified path (kmlUrl) is relative. Only markers appear. Search and route are only available if the KML file is local.
Property
defaultType
Description
Map type on the beginning.MAP, SATELLITE, HYBRID, TERRAIN and one individual type are possible.
Property
scrollZoom
Description
Enables zoom with scroll wheel.
Property
draggable
Description
Position of the map can be changed.
Property
doubleClickZoom
Description
A double click on the map zooms in. Draggable map has to be enabled!
Property
markerSearch
Description
Displays a form on the frontend, were the user can enter a search word. Searchs for InfoWindow content and title of a marker. The InfoWindow of the first found marker opens.
Property
showAddresses
Description
Displays a list with all addresses incl. a link. If you click the selected address will be centered.
Property
showCategories
Description
Display a checkbox for each visible category. On change the points on the map will be enabled/disabled.
Property
markerCluster
Description
Many markers in the same region will be summarized and appear as a cluster. e.g.: http ://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclust erer/examples/advanced_example.html
Property
markerClusterZoom
Description
Up to this zoom level the Clusters are displayed. Take a look at the example link above.
Property
markerClusterSize
Description
The size of the Clusters, like a radius. Take a look at the example link above.
Property
scaleControl
Description
Displays a measure.
Property
streetviewControl
Description
Shows an icon to enable the streetview.
Property
fullscreenControl
Description
Shows an icon to enable fullscreen.
Property
zoomControl
Description
Enable buttons to change the zoom.
Property
mapTypeControl
Description
Shows a control to change the map type.
Property
mapTypes
Description
Possible map types to choose. Map type control has to be enabled.MAP, SATELLITE, HYBRID, TERRAIN and one individual type are possible.
Property
showRoute
Description
2 address records needed! Shows the route between the given points
Property
calcRoute
Description

Only 1 address used as destination. Display an text input for enter a starting point.

You can configure the rendering by set the plugin.tx_gomapsext.view.layoutRoothPath, copy and edit the file Form.html.

Property
travelMode
Description

Select a travel mode or let the frontend user select one.

  • Select by Frontend User (Creates a select box in the frontend. You can configure the rendering by set the plugin.tx_gomapsext.view.layoutRoothPath, copy and edit the file Form.html.)
  • Bicycling (at the time only available in US)
  • Driving (Default)
  • Transit
  • Walking.

You can configure the rendering by set the plugin.tx_gomapsext.view.layoutRoothPath, copy and edit the file Form.html.

Property
UnitSystem
Description

Select a unit system or let the frontend user select one.

  • Default (No fix value)
  • Select by Frontend User (Creates a select box in the frontend. You can configure the rendering by set the plugin.tx_gomapsext.view.layoutRoothPath, copy and edit the file Form.html.)
  • Metric (kilometer)
  • Imperial (miles).
Property
styledMapName
Description
Shown in the map type control.
Property
styledMapCode
Description
JSON, e.g. from https://mapstyle.withgoogle.com/
Property
markerClusterStyle
Description
JSON code for the cluster style, for more information look here https://github.com/googlemaps/js-markerclusterer

Google Maps Address

A map represents addresses and/or a KML file. An address record mainly consists of longitude, latitude and the address itself which are configured via geocoding of the configuration map.

|img-6|

Of course there are some more options...

Property
title
Description

Only for internal usage.

[required]

Property
configurationMap
Description
Shown as Position. For geocoding the latitude, longitude and address. Enter an address [street number, zip city] or coordinates [latitude, longitude] and press 'Update' or drag and drop the marker in the map.
Property
latitude
Description

The latitude of the position. Configured via the position field.

[required]

Property
longitude
Description
The longitude of the position. Configured via the position field.[required]
Property
address
Description
The address of the position. Configured via the position field.[required]
Property
marker
Description
A costum image for the pin.
Property
imageSize
Description
Check if the image of the marker has a different size then default. The image should be twice as large as indicated.
Property
imageWidth
Description
Costum image width in pixel.
Property
imageHeight
Description
Costum image height in pixel.
Property
infoWindowContent
Description
This will be displayed in the InfoWindow of this marker.
Property
infoWindowImages
Description
Extra field for fal images to show in the InfoWindow.
Property
infoWindowLink
Description
Attachs an optional automatic generated link to calculate a route on Google Maps.
Property
openByClick
Description
Open InfoWindow by click instead of mouse over.
Property
closeByClick
Description
Close InfoWindow by click instead of mouse out.
Property
opened
Description
The InfoWindow is opened when the map appears. For each map there will be only one opened InfoWindow.
Property
categories
Description
Each category can be selected via GET parameters or checkboxes.

API Key

An API Key is required for your Google Map. The integrator can set the API Key via TypoScript or an editor creates an API Key and set them in the FlexForm of the Plugin.

Property
title
Description

Only for internal usage.

[required]

Property
API Key
Description
An API Key for Google Maps. More information. Get your apiKey.

Tutorial

  1. Install the Extension.
  2. Check in the Extension Manager if the JavaScript library should be load from the extension.
  3. Include the TypoScript from go_maps_ext.
    |img-7| |img-8|
  4. Create a Map.
    |img-9| |img-10|
  5. Set title, width and height of the Map and save.
    |img-11|
  6. If you haven't include a KML file on the map create an Google Maps address. Set title, enter the address or coordinates by the postion field, press the 'Update' button and save. |img-12|
  7. Include the address in the map.
    |img-13|
  8. Create a page content of the type plugin. Choose Google Map and select the map. |img-14|
  9. Finish.
    |img-15|

Administrator Manual

  • All optional fields can be hide from non admins.
  • Required fields are listed in the section “Users manual”.
  • You can configure via TypoScript how to open and close an InfoWindow for all addresses and where the addresses are stored
  • You can configure the map, the coordinates and the bounds by JavaScript after initialization. An example script to display a polyline between all markers you'll find in the extension folder (/Resources/Public/Scripts/polyline-example.js).

Quick Start

  • First of all choose the JavaScript library in the configuration section of the plugin in the extension manager of TYPO3.
  • Include the TypoScript from the extension.
  • Create a map and as many addresses you want.
  • Create a frontend plugin and choose the map.

Reference

Extension Configurations

Property
include_manually
Data type
boolean
Description
Include the JavaScript from extension manually
Default
0
Property
include_google_api_manually
Data type
boolean
Description
Include the Google JavaScript API manually
Default
0
Property
footerJS
Data type
boolean
Description
Adds all JavaScript to the footer of the body instead of the head
Default
1

Constants

Property
view.templateRootPath
Data type
file
Description
Path to template root (FE)
Default
EXT:go_maps_ext/Resources/Private/Templates/
Property
view.layoutRootPath
Data type
file
Description
Path to template layouts (FE)
Default
EXT:go_maps_ext/Resources/Private/Layouts/
Property
view.partialRootPath
Data type
file
Description
Path to template partials (FE)
Default
EXT:go_maps_ext/Resources/Private/Partials/
Property
settings.storagePid
Data type
integer/String
Description
If integer is set, it will display all addresses from this PID and additionally from the TCA, if the string "this" is set, it will show the addresses from the current active page uid (i.e. settings.storagePid = "this") field
Property
settings.apiKey
Data type
String
Description
Set the default API key. Can also be set by an editor in the FlexForm of an Plugin. More information. Get your apiKey.
Property
settings.googleMapsLibrary
Data type
String
Description
Configure the URL form which the Google Maps JS is loaded. If you choose another one, don't forget

the callback function. If you want to use the callback function from go_maps_ext add '&callback=goMapsExtLoaded'.

Default
https://maps.google.com/maps/api/js?loading=async&v=weekly&libraries=maps,marker&callback=goMapsExtLoaded
Property
settings.infoWindow.openByClick
Data type
boolean
Description
Open InfoWindows by click instead of mouse over. Global configuration for all addresses.
Default
0
Property
settings.infoWindow.closeByClick
Data type
boolean
Description
Close InfoWindows by click instead of mouse out. Global configuration for all addresses.
Default
0
Property
settings.infoWindow.imageMaxWidth
Data type
String
Description
Set the max. width of the image in InfoWindows. Global configuration for all addresses.
Default
654
Property
settings.preview.enabled
Data type
boolean
Description
Load map only when user accepted. A preview text or image will be displayed instead.
Default
1
Property
settings.preview.image
Data type
String
Description
Define a fallback image for all previews. If there is no image set on the map, this image will be shown. If both is not set, a link will be displayed. Much more is possible if you overwrite the partial.
Property
settings.preview.setCookieToShowMapAlways
Data type
boolean
Description
If the user wants to see a map once, it will be saved in the session cookie. Subsequently, all maps are loaded on a page as long as the user does not close the session.
Default
0
Property
forceLanguage
Data type
boolean
Description
Force the language of the map to be equal to the page language. If false the language depends on the browser settings.
Default
1

Example

plugin.tx_gomapsext.settings.infoWindow.openByClick = 1
plugin.tx_gomapsext.settings.infoWindow.closeByClick = 1
Copied!

ChangeLog

Version
Version
Changes
Changes:
Version
2.4.0
Changes
GDPR compatible preview for maps, full sreen control, bugfixes
Version
2.3.0
Changes
Info Window images, set map center, category marker, update API version, bugfixes
Version
2.2.0
Changes
Cluster style option (update DB), high resolution markers, API key fixes, absolute image paths
Version
2.0.0
Changes
Compatibility TYPO3 8.0; sys_categories and sys_file used; list and link addresses; drop shadows, toolTip and container class
Version
1.8.0
Changes
Compatibility TYPO3 > 7.5, suggest wizard
Version
1.7.0
Changes
Compatibility TYPO3 > 7.4, optional JS, bugfixes
Version
1.6.0
Changes
Compatibility TYPO3 > 7.2, min- and max zoom, responsive center update
Version
1.5.0
Changes
Compatibility TYPO3 > 7.0, library path now in TS, respect scheme
Version
1.4.0
Changes
Compatibility TYPO3 > 6.0, js to footer
Version
1.3.0
Changes
Latest Version for TYPO3 < 6.0, Categories, no more Mootools
Version
1.2.0
Changes
Polish translation, Twitter Bootstrap fix, Event ('mapresize'), Fix tooltip title, Fix Spam protection mail, storagePid, footerJS, cluster, search, Google Maps URL, local KML import
Version
1.1.0
Changes
Opened InfoWindow, travel mode and unit system by route rendering, Several Maps on one page, jQuery Version 1.8.2, bug fixes
Version
1.0.0
Changes
First Release
Version
go_maps_ap
Changes
Extension based on

|img-2| 16