Skip to content

Instantly share code, notes, and snippets.

@dfeyer
Created October 18, 2013 19:50
Show Gist options
  • Save dfeyer/7047160 to your computer and use it in GitHub Desktop.
Save dfeyer/7047160 to your computer and use it in GitHub Desktop.
A small snippet for Google Map integration in TYPO3 Neos, or any TYPO3 Flow project who use the Content Repository and TypoScript package
{namespace neos=TYPO3\Neos\ViewHelpers}
<neos:contentElement node="{node}">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
<![CDATA[
function initializeMap]]>{node.name}<![CDATA[() {
var myLatlng = new google.maps.LatLng(]]>{longitude}<![CDATA[,]]>{latitude}<![CDATA[);
var mapOptions = {
zoom: ]]>{zoomlevel}<![CDATA[,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var contentString = '<div id="content" style="height: ]]>{popupHeight}<![CDATA[; width: ]]>{popupWidth}<![CDATA[">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">]]>{infoheadl}<![CDATA[</h1>'+
'<div id="bodyContent">'+
'<p>]]> <f:format.raw>{infotext}</f:format.raw> <![CDATA[</p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'InspiringFlow'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
$(document).ready(function() {
initializeMap]]>{node.name}<![CDATA[();
});
]]>
</script>
<div id="map_canvas" style="height: {height}; width: {width}; margin-top: 20px;">
</div>
</neos:contentElement>
prototype(Ttree.OfficialWebsite:GoogleMap) < prototype(TYPO3.TypoScript:Template) {
templatePath = 'resource://Ttree.OfficialWebsite/Private/Templates/TypoScript/NodeTypes/GoogleMap.html'
node = ${node}
longitude = ${q(node).property('longitude')}
latitude = ${q(node).property('latitude')}
zoomlevel = ${q(node).property('zoomlevel')}
infoheadl = ${q(node).property('infoheadl')}
infotext = ${q(node).property('infotext')}
width = ${q(node).property('width')}
height = ${q(node).property('height')}
popupHeight = ${q(node).property('popupHeight')}
popupWidth = ${q(node).property('popupWidth')}
}
'Ttree.OfficialWebsite:GoogleMap':
superTypes:
- 'TYPO3.Neos:Content'
ui:
group: 'general'
icon: 'icon-map-marker'
label: 'Google Map'
inspector:
groups:
googlemaps:
label: 'Google Map'
position: '1'
properties:
longitude:
type: string
defaultValue: '46.526448'
ui:
label: 'Longitude:'
reloadIfChanged: TRUE
inspector:
group: 'googlemaps'
latitude:
type: string
defaultValue: '6.631185'
ui:
label: 'Latitude:'
reloadIfChanged: TRUE
inspector:
group: 'googlemaps'
zoomlevel:
type: string
defaultValue: '10'
ui:
label: 'Zoomlevel 1-20'
reloadIfChanged: TRUE
inspector:
group: 'googlemaps'
infoheadl:
type: string
defaultValue: 'Headline'
ui:
label: 'Infowindow Headline'
reloadIfChanged: TRUE
inspector:
group: 'googlemaps'
infotext:
type: string
defaultValue: 'Text'
ui:
label: 'Infowindow Text'
reloadIfChanged: TRUE
inspector:
group: 'googlemaps'
width:
type: string
defaultValue: '100%'
ui:
label: 'Width:'
reloadIfChanged: TRUE
inspector:
group: 'googlemaps'
height:
type: string
defaultValue: '400px'
ui:
label: 'Height:'
reloadIfChanged: TRUE
inspector:
group: 'googlemaps'
popupHeight:
type: string
defaultValue: '70px'
ui:
label: 'Infowindow Height:'
reloadIfChanged: TRUE
inspector:
group: 'googlemaps'
popupWidth:
type: string
defaultValue: '220px'
ui:
label: 'Infowindow Width:'
reloadIfChanged: TRUE
inspector:
group: 'googlemaps'
@dfeyer
Copy link
Author

dfeyer commented Sep 1, 2014

You can now use the Ttree.Map package to add Google Map in your TYPO3 Neos website:
https://packagist.org/packages/ttree/map

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment