{namespace z=ZWEI14\T3template\ViewHelpers\Format}

<f:if condition="{data.tx_mask_googlemaps_lat} && {data.tx_mask_googlemaps_lng}">
    <section id="c{data.uid}" class="mapContainer"><div id="map-{data.uid}" class="map"></div></section>

    <f:if condition="{f:cObject(typoscriptObjectPath: 'lib.languagecode')} == 'de'">
        <f:then>
            <script src="//maps.google.com/maps/api/js?sensor=true&key=AIzaSyC1jJ5lDJgbZ0clEGpg1hmBYL9GtmqXEVc"></script>
        </f:then>
        <f:else>
            <script src="//maps.google.com/maps/api/js?sensor=true&key=AIzaSyC1jJ5lDJgbZ0clEGpg1hmBYL9GtmqXEVc&language=en"></script>
        </f:else>
    </f:if>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.25/gmaps.min.js"></script>
    <script type="text/javascript">
        var map,
            protocol = window.location.protocol,
            hostname = window.location.hostname,
            rootUrl = protocol + "//" + hostname,
            mapMarker = rootUrl + '/typo3conf/ext/t3template/Resources/Public/Images/mapMarker@2x.png';

        $(function() <f:format.raw value="{" />
            var viewportHeight = window.innerHeight ? window.innerHeight : $window.height();
            $("#c{data.uid}").css(<f:format.raw value="{" />
                'height': viewportHeight - 60
            });

            map = new GMaps(<f:format.raw value="{" />
                div: '#map-{data.uid}',
                zoom: 5,
                lat: {data.tx_mask_googlemaps_lat},
                lng: {data.tx_mask_googlemaps_lng},
                scrollwheel: false,
                panControl: false,
                streetViewControl: false,
                zoomControl: true,
                overviewMapControl: false,
                mapTypeControlOptions: <f:format.raw value="{" />
                    position: google.maps.ControlPosition.TOP_RIGHT
                },
                styles: [
                    <f:format.raw value="{" />
                        "elementType": "labels.icon",
                        "stylers": [
                        <f:format.raw value="{" />
                                "visibility": "off"
                            }
                        ]
                    },
                    <f:format.raw value="{" />
                        "elementType": "labels.text.fill",
                        "stylers": [
                            <f:format.raw value="{" />
                                "color": "#081f2c"
                            },
                            <f:format.raw value="{" />
                                "lightness": 30
                            }
                        ]
                    },
                    <f:format.raw value="{" />
                        "elementType": "labels.text.stroke",
                        "stylers": [
                            <f:format.raw value="{" />
                                "visibility": "off"
                            }
                        ]
                    },
                    <f:format.raw value="{" />
                        "featureType": "administrative.country",
                        "elementType": "geometry.stroke",
                        "stylers": [
                            <f:format.raw value="{" />
                                "color": "#081f2c"
                            },
                            <f:format.raw value="{" />
                                "lightness": 70
                            }
                        ]
                    },
                    <f:format.raw value="{" />
                        "featureType": "administrative.province",
                        "elementType": "geometry.stroke",
                        "stylers": [
                            <f:format.raw value="{" />
                                "visibility": "off"
                            }
                        ]
                    },
                    <f:format.raw value="{" />
                        "featureType": "landscape",
                        "elementType": "geometry.fill",
                        "stylers": [
                            <f:format.raw value="{" />
                                "lightness": 60
                            }
                        ]
                    },
                    <f:format.raw value="{" />
                        "featureType": "landscape.natural",
                        "elementType": "geometry.fill",
                        "stylers": [
                            <f:format.raw value="{" />
                                "saturation": -70
                            },
                            <f:format.raw value="{" />
                                "lightness": 60
                            }
                        ]
                    },
                    <f:format.raw value="{" />
                        "featureType": "poi",
                        "stylers": [
                            <f:format.raw value="{" />
                                "visibility": "off"
                            }
                        ]
                    },
                    <f:format.raw value="{" />
                        "featureType": "road",
                        "elementType": "geometry",
                        "stylers": [
                            <f:format.raw value="{" />
                                "color": "#ffffff"
                            }
                        ]
                    },
                    <f:format.raw value="{" />
                        "featureType": "transit.line",
                        "elementType": "geometry",
                        "stylers": [
                            <f:format.raw value="{" />
                                "color": "#e5e5e5"
                            }
                        ]
                    },
                    <f:format.raw value="{" />
                        "featureType": "transit.station",
                        "elementType": "geometry",
                        "stylers": [
                            <f:format.raw value="{" />
                                "color": "#eeeeee"
                            }
                        ]
                    },
                    <f:format.raw value="{" />
                        "featureType": "water",
                        "elementType": "geometry",
                        "stylers": [
                            <f:format.raw value="{" />
                                "color": "#c9c9c9"
                            }
                        ]
                    },
                    <f:format.raw value="{" />
                        "featureType": "water",
                        "elementType": "geometry.fill",
                        "stylers": [
                            <f:format.raw value="{" />
                                "color": "#c6dce2"
                            }
                        ]
                    },
                    <f:format.raw value="{" />
                        "featureType": "water",
                        "elementType": "labels",
                        "stylers": [
                            <f:format.raw value="{" />
                                "visibility": "off"
                            }
                        ]
                    }
                ]
            });

            map.on('marker_added', function(marker) <f:format.raw value="{" />
                var index = map.markers.indexOf(marker);

                if (index == map.markers.length - 1) <f:format.raw value="{" />
                    map.fitZoom();
                }
            });
        });
    </script>
    <f:if condition="{data.tx_mask_googlemaps_marker}">
        <script type="text/javascript">
            $(function() <f:format.raw value="{" />
                <f:for each="{data.tx_mask_googlemaps_marker}" as="data_item">
                    <f:if condition="{data_item.tx_mask_googlemaps_marker_lat} && {data_item.tx_mask_googlemaps_marker_lng}">
                        var infoText = '<f:format.html><z:javaScriptRemoveLineBreaks>{data_item.tx_mask_googlemaps_marker_text}</z:javaScriptRemoveLineBreaks></f:format.html>',
                            infoFile = '';

                        <f:if condition="{data_item.tx_mask_googlemaps_marker_file}">
                            <f:for each="{data_item.tx_mask_googlemaps_marker_file}" as="file">
                                infoFile = '<f:image image="{file}" alt="{file.alternative}" title="{file.title}" width="200" /><br/><br/>';
                            </f:for>
                        </f:if>

                        map.addMarker(<f:format.raw value="{" />
                            lat: {data_item.tx_mask_googlemaps_marker_lat},
                            lng: {data_item.tx_mask_googlemaps_marker_lng},
                            title: '{data_item.tx_mask_googlemaps_marker_title}',
                            icon : <f:format.raw value="{" />
                                url: mapMarker,
                                size: new google.maps.Size(48, 48),
                                scaledSize: new google.maps.Size(48, 48)
                                //origin: new google.maps.Point(0, 0),
                                //anchor: new google.maps.Point(24, 48)
                            },
                            infoWindow: <f:format.raw value="{" />
                                content: infoFile + '<strong>{data_item.tx_mask_googlemaps_marker_title}</strong><br/>' + infoText
                            }
                        });
                    </f:if>
                </f:for>
            });
        </script>
    </f:if>
</f:if>