{% if editmode %}
<label><strong>Karte</strong></label>
Latitude: {{ pimcore_input('coordLat') }}<br />
Longitude: {{ pimcore_input('coordLong') }}<br />
Zoom: {{ pimcore_input('mapZoom') }}<br />
{# API Key: {{ pimcore_input('apiKey') }}<br /> #}
{% else %}
<div class="map-area">
<div id="map-canvas"></div>
</div>
<script>
if (typeof google === 'object' && typeof google.maps === 'object') {
initialize();
} else {
var script = document.createElement("script");
script.type = "text/javascript";
{# script.src = "//maps.googleapis.com/maps/api/js?callback=initialize&?v=3&key={{ pimcore_input('apiKey').data }}&language=de"; #}
script.src = "//maps.googleapis.com/maps/api/js?callback=initialize&?v=3&key=" + window.googleMapsAPI + "&language=de";
document.body.appendChild(script);
}
function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var zoom = {{ pimcore_input('mapZoom').data }};
var markerColor = '#d80000';
var markerTitle = '{{ pimcore_website_config('pageName', null, app.request.locale) }}';
var coordLat = '{{ pimcore_input('coordLat').data }}';
var coordLong = '{{ pimcore_input('coordLong').data }}';
var mapOptions = {
scrollwheel: false,
zoomControl: true,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
rotateControl: false,
fullscreenControl: false,
mapTypeId: 'roadmap',
styles: [{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#5a5a5a"
}]
},
{
"featureType": "landscape",
"elementType": "all",
"stylers": [{
"color": "#eff8ff"
},
{
"lightness": "50"
}
]
},
{
"featureType": "poi",
"elementType": "all",
"stylers": [{
"visibility": "simplified"
}, {
"hue": "#000000"
}, {
"saturation": -100
}]
},
{
"featureType": "road",
"elementType": "all",
"stylers": [{
"saturation": -100
},
{
"lightness": 45
}
]
},
{
"featureType": "road.highway",
"elementType": "all",
"stylers": [{
"visibility": "simplified"
}]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [{
"color": "#cdeafe"
}]
},
{
"featureType": "road.arterial",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "road.local",
"elementType": "geometry",
"stylers": [{
"color": "#e5f3fd"
}]
},
{
"featureType": "road.local",
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "transit",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"hue": "#000000"
}, {
"saturation": -100
}]
},
{
"featureType": "water",
"elementType": "all",
"stylers": [{
"color": "#ffffff"
},
{
"visibility": "on"
}
]
}
]
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var fontawesome = {};
fontawesome.markers = {
"MAP_MARKER": "M27.648-41.399q0-3.816-2.7-6.516t-6.516-2.7-6.516 2.7-2.7 6.516 2.7 6.516 6.516 2.7 6.516-2.7 2.7-6.516zm9.216 0q0 3.924-1.188 6.444l-13.104 27.864q-.576 1.188-1.71 1.872t-2.43.684-2.43-.684-1.674-1.872l-13.14-27.864q-1.188-2.52-1.188-6.444 0-7.632 5.4-13.032t13.032-5.4 13.032 5.4 5.4 13.032z"
};
var icon = {
path: fontawesome.markers.MAP_MARKER,
scale: 0.8,
strokeWeight: 1,
strokeColor: markerColor,
strokeOpacity: 1,
fillColor: markerColor,
fillOpacity: 1,
anchor: new google.maps.Point(18.25, -5)
};
var position = new google.maps.LatLng(coordLat, coordLong);
marker = new google.maps.Marker({
position: position,
map: map,
icon: icon,
zoom: zoom,
title: markerTitle
});
map.setCenter(position);
map.setZoom(zoom);
google.maps.event.addListener(marker, 'click', function() {
window.open('http://www.google.com/maps/place/' + coordLat + ',' + coordLong, '_blank');
});
}
</script>
{% endif %}