|
<div xmlns="http://www.w3.org/1999/xhtml" lang="en" |
|
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers" |
|
xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers" |
|
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers" |
|
xmlns:base="http://typo3.org/ns/MRM/T3base/ViewHelpers"> |
|
|
|
<f:layout name="Content"/> |
|
|
|
<f:section name="Configuration"> |
|
<flux:form id="googlemaps" wizardTab="T3Base_example" options="{icon: 'EXT:t3base_example/Resources/Public/Icons/Content/GoogleMaps.png'}"> |
|
<flux:field.checkbox name="fitBounds" default="1" requestUpdate="true"/> |
|
<flux:field.select name="mapType" items="ROADMAP, SATELLITE, TERRAIN, HYBRID"/> |
|
<f:if condition="{fitBounds}"> |
|
<f:else> |
|
<flux:field.text name="address" rows="3"/> |
|
<flux:field.input name="lng"/> |
|
<flux:field.input name="lat"/> |
|
<flux:field.input name="zoom" default="15" size="1" eval="int,trim"/> |
|
<f:comment>@TODO: Enable slider and field with minimum/maximum when TYPO3 bug is fixed |
|
<flux:field.input name="zoom" default="15" size="1" minimum="1" maximum="21" eval="int,trim"> |
|
<flux:wizard.slider hideParent="true" step="1" width="100"/> |
|
</flux:field.input> |
|
</f:comment> |
|
</f:else> |
|
</f:if> |
|
<flux:form.section name="markers"> |
|
<flux:form.object name="marker"> |
|
<flux:field.text name="address" rows="3"/> |
|
<f:comment> |
|
@TODO: use displayCond and provide checkbox for switching between address input and |
|
latitude/longitude fields: |
|
<flux:field.checkbox name="provideLatLngInsteadOfAddress"/> |
|
But it seems a displayCond like this (on this level / in a flux:form.object) isn't supported: |
|
<flux:field.input name="lng" displayCond="FIELD:markers.marker.provideLatLngInsteadOfAddress:REQ:true"/> |
|
</f:comment> |
|
<flux:field.input name="lng"/> |
|
<flux:field.input name="lat"/> |
|
<flux:field.select name="icon" |
|
items="{ |
|
0: 'Standard', |
|
parking_lot_maps: 'Parking', |
|
library_maps: 'Library', |
|
school_maps: 'School', |
|
info-i_maps: 'Info', |
|
mrm: 'MRM' |
|
}"/> |
|
<flux:field.file |
|
name="iconFile" |
|
showThumbnails="1" |
|
allowed="jpg,png,gif" |
|
maxItems="1" |
|
maxSize="20" |
|
size="1" |
|
/> |
|
<flux:field.input name="title"/> |
|
<flux:field.text name="info" rows="3"/> |
|
<flux:field.checkbox name="showInfo"/> |
|
</flux:form.object> |
|
</flux:form.section> |
|
</flux:form> |
|
</f:section> |
|
|
|
<f:section name="Preview"> |
|
<f:be.container includeCssFiles="{0: 'typo3conf/ext/t3base/Resources/Public/Css/Backend/Preview.css'}"> |
|
Markers: |
|
<ol> |
|
<f:for each="{markers}" as="marker"> |
|
<v:variable.set name="marker" value="{marker.marker}"/> |
|
<li> |
|
{marker.title} |
|
<f:if condition="{marker.title}"> |
|
<f:if condition="{marker.address}">//</f:if> |
|
</f:if> |
|
{marker.address} |
|
</li> |
|
</f:for> |
|
</ol> |
|
</f:be.container> |
|
</f:section> |
|
|
|
<f:section name="Main"> |
|
<script src="https://maps.googleapis.com/maps/api/js"></script> |
|
<script> |
|
function initialize() { |
|
<f:if condition="{fitBounds}"> |
|
<f:then> |
|
var center = new google.maps.LatLng(0, 0); |
|
</f:then> |
|
<f:else> |
|
<f:if condition="{0: lng, 1: lat} == {0: '', 1: ''}"> |
|
<f:then> |
|
<v:variable.set name="geo" value="{base:geo.lngLat(address: '{address}')}" /> |
|
</f:then> |
|
<f:else> |
|
<v:variable.set name="geo" value="{lng: marker.lng, lat: marker.lat}" /> |
|
</f:else> |
|
</f:if> |
|
var center = new google.maps.LatLng({geo.lat}, {geo.lng}); |
|
</f:else> |
|
</f:if> |
|
var icons = new Array(); |
|
icons['parking_lot_maps'] = 'https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png'; |
|
icons['library_maps'] = 'https://maps.google.com/mapfiles/kml/shapes/library_maps.png'; |
|
icons['schools_maps'] = 'https://maps.google.com/mapfiles/kml/shapes/schools_maps.png'; |
|
icons['info-i_maps'] = 'https://maps.google.com/mapfiles/kml/shapes/info-i_maps.png'; |
|
icons['mrm'] = '<f:uri.image src="EXT:t3b_example/Resources/Public/Icons/favicon.ico" />'; |
|
var zoom = {zoom}; |
|
var mapType = google.maps.MapTypeId.{mapType}; |
|
var mapCanvas = document.getElementById('map'); |
|
var mapOptions = { |
|
center: center, |
|
zoom: zoom, |
|
streetViewControl: false, |
|
scrollwheel: false, |
|
mapTypeId: mapType |
|
} |
|
var map = new google.maps.Map(mapCanvas, mapOptions); |
|
var infowindow = new google.maps.InfoWindow; |
|
google.maps.event.addListener(map, 'click', function(){ |
|
infoWindow.close(); |
|
}); |
|
var bounds = new google.maps.LatLngBounds(); |
|
|
|
<f:for each="{markers}" as="marker"> |
|
<v:variable.set name="marker" value="{marker.marker}" /> |
|
<f:if condition="{0: marker.lng, 1: marker.lat} == {0: '', 1: ''}"> |
|
<f:then> |
|
<v:variable.set name="geo" value="{base:geo.lngLat(address: '{marker.address}')}" /> |
|
</f:then> |
|
<f:else> |
|
<v:variable.set name="geo" value="{lng: marker.lng, lat: marker.lat}" /> |
|
</f:else> |
|
</f:if> |
|
var position = new google.maps.LatLng({geo.lat}, {geo.lng}); |
|
var title = '<base:format.javaScriptEscape><f:format.nl2br>{marker.title}</f:format.nl2br></base:format.javaScriptEscape>'; |
|
var info = '<base:format.javaScriptEscape><f:format.nl2br>{marker.info}</f:format.nl2br></base:format.javaScriptEscape>'; |
|
<f:if condition="{marker.iconFile}"> |
|
<f:then> |
|
<f:comment> |
|
@TODO: use v:uri.image when bug (https://github.com/FluidTYPO3/vhs/issues/936) is fixed |
|
<v:uri.image src="{marker.iconFile}" relative="false" /> |
|
</f:comment> |
|
var icon = '{v:site.url()}{marker.iconFile}'; |
|
</f:then> |
|
<f:else> |
|
<f:if condition="{marker.icon}"> |
|
<f:then> |
|
var icon = icons['{marker.icon}']; |
|
</f:then> |
|
<f:else> |
|
var icon = ''; |
|
</f:else> |
|
</f:if> |
|
</f:else> |
|
</f:if> |
|
var marker = new google.maps.Marker({ |
|
position: position, |
|
map: map, |
|
icon: icon, |
|
content: info, |
|
title: title |
|
}); |
|
bounds.extend(position); |
|
google.maps.event.addListener(marker, 'click', function() { |
|
infowindow.setContent('<h3>' + this.title + '</h3><p>' + this.content + '</p>'); |
|
infowindow.open(map, this); |
|
}); |
|
<f:if condition="{marker.showInfo}"> |
|
google.maps.event.addListener(map, 'tilesloaded', function(){ |
|
google.maps.event.trigger(marker, 'click'); |
|
}); |
|
</f:if> |
|
</f:for> |
|
<f:if condition="{fitBounds}"> |
|
map.fitBounds(bounds); |
|
</f:if> |
|
} |
|
google.maps.event.addDomListener(window, 'load', initialize); |
|
</script> |
|
<div id="map"></div> |
|
</f:section> |
|
</div> |