installieren und

"Addresses (Extbase/Fluid) (tt_address)"
"MyTTAddressMap (myttaddressmap)"
einbinden.

folgende Seiten anlegen:

  1. Ajax map
    install plugin MyTTAddressMap (Map)
  2. Search
    install plugin MyTTAddressMap (Searchform)
  3. Search result
    install plugin MyTTAddressMap (Searchresult) and plugin MyTTAddressmap (Searchform) in the sidebar
  4. Details
    install plugin MyTTAddressMap (SingleView)
  5. Data (sysfolder)

In der Listenansicht in den erstellen Ordner "Data" eine oder mehrere sys_categories (System Records > Category) einfügen.

Adressen anlegen

Danach einige Einträge vom Typ tt_address einfpgen. Die Koordinaten sollten eigentlich automatisch durch Google übernommen werden, wenn die richtige Adresse eingetragen wurde. Im Feld "Country" muss dazu der Wert "DE" eingetragen werden. If you don’t insert some icon, the extension uses a default icon for the POI’s.

When everything is done you can start a search in frontend.

Vorbereitungen/Voraussetzungen

Google API keys

Am Ende muss ein Zahlungskonto (Kreditkarte) hinterlegt werden!

You have to get 2 Google API keys. One as a Google Browser API key and one as a Google Server API key (for geocoding) from here console.developers.google.com and insert them in the constants editor. After fetching the keys you have to activate the Google Maps JavaScript API and the Google Maps Geocoding API. When everything is working (geocoding and map display) you can restrict the browser key with http url and the server key with ip address of the webserver to prevent illegal use of the keys.

Anleitung Browser-Key & Server-Key: help.iwdagency.com/dealer-store-locator/creation-of-server-api-keybrowser-api-key

  1. Login to the Google Developers Console
  2. Create a new Project
  3. Go to Menu - APIs & Services - Dashboard
  4. Select "Library" and go to Maps category.
  5. Open each of the displayed APIs and enable them:
    1. Geocoding API
    2. Maps Embed API
    3. Maps JavaScript API
    4. Places API

After enabling the APIs return back to the dashboard, then go to “Credentials” and choose “Create Credentials" > API key
Enter a “Name” for the new key (for example "Server Key") and press “Create” button (please note that you may select "None" or "IP Addresses" as a restriction parameter. In the second case you must enter IP of your server)
To generate another key, follow steps 7-9 (for Browser key you will need to select "None" since Google doesn't allow to restrict the key while using some of the Maps API)

Achtung: jQuery

Wie in der Anleitung steht, muss jQuery oben auf der Seite eingebunden werden: "Make sure, you have loaded the jQuery on top of the page.". Dazu z.B. auf allen Seiten mit dem Plugin jQuery im Footer löschen und im Head einbinden:

[44 in tree.rootLineParentIds]
	page.includeJS {
		jquery = EXT:sitepackage_andreas_loewer/Resources/Public/JavaScript/Dist/jquery-3.6.0.min.js
	}
	page.includeJSFooterlibs.jquery >
[end]
setup

settings 

plugin.tx_myttaddressmap.persistence.storagePid = 49
plugin.tx_myttaddressmap.settings.detailsPageId = 48
plugin.tx_myttaddressmap.settings.singleViewUid = 48
plugin.tx_myttaddressmap.settings.resultPageId = 47
plugin.tx_myttaddressmap.settings.googleServerApiKey = XYZ123
plugin.tx_myttaddressmap.settings.googleBrowserApiKey = ABC123
constants

Templates 

# ACHTUNG: Es müssen ALLE Template-Dateien in den neuen Pfad kopiert werden!
# siehe https://github.com/joachimruhs/myttaddressmap/issues/10
plugin.tx_myttaddressmap {
	view {
		templateRootPath = EXT:sitepackage_andreas_loewer/Resources/Private/Templates/myttaddressmap/
		partialRootPath = EXT:sitepackage_andreas_loewer/Resources/Private/Partials/myttaddressmap/
		layoutRootPath = EXT:sitepackage_andreas_loewer/Resources/Private/Layouts/myttaddressmap/
  	}
}
constants

Radius-Suche

Die Datei \Resources\Private\Templates\Address\AjaxSearch.html bearbeiten. Die Zeile auskommentieren:

// $('#tx_myttaddressmap_radius').val('20000');

Und beim Input-Feld (tx_myttaddressmap_radius) die Klasse "hidden" entfernen.