<script>
function initMap() {
//var map;
var myLatLngCenter = {lat: 47.411963, lng: 8.483343};
var myLatLngMarker = {lat: 47.411963, lng: 8.483343};
// Coordinates of polygon
var coord1 = {lat: 47.412483, lng: 8.483480};
var coord2 = {lat: 47.412428, lng: 8.483364};
var coord3 = {lat: 47.412384, lng: 8.483307};
var coord4 = {lat: 47.412345, lng: 8.483283};
var coord5 = {lat: 47.412295, lng: 8.483277};
var coord6 = {lat: 47.412257, lng: 8.483292};
var coord7 = {lat: 47.412218, lng: 8.483320};
var coord8 = {lat: 47.412183, lng: 8.483377};
var coord9 = {lat: 47.412159, lng: 8.483453};
var coord10 = {lat: 47.412144, lng: 8.483531};
var coord11 = {lat: 47.412127, lng: 8.483523};
var coord12 = {lat: 47.412117, lng: 8.483665};
var coord13 = {lat: 47.412076, lng: 8.483661};
var coord14 = {lat: 47.412064, lng: 8.483854};
var coord15 = {lat: 47.412089, lng: 8.483859};
var coord16 = {lat: 47.412080, lng: 8.483938};
var coord17 = {lat: 47.412011, lng: 8.483996};
var coord18 = {lat: 47.411918, lng: 8.484105};
var coord19 = {lat: 47.411808, lng: 8.484275};
var coord20 = {lat: 47.411753, lng: 8.484376};
var coord21 = {lat: 47.411303, lng: 8.484082};
var coord22 = {lat: 47.411511, lng: 8.483572};
var coord23 = {lat: 47.411699, lng: 8.482923};
var coord24 = {lat: 47.411915, lng: 8.482195};
var coord25 = {lat: 47.412333, lng: 8.482473};
var coord26 = {lat: 47.412273, lng: 8.482679};
var coord27 = {lat: 47.412659, lng: 8.482945};
var coord28 = {lat: 47.412571, lng: 8.483214};
var myMapTypeID = 'custom_style';
// Initialize map features for custom map
var mapFeatures = [
{
"featureType": "landscape.natural",
"elementType": "geometry.fill",
"stylers": [
{
"visibility": "on"
},
{
"color": "#e0efef"
}
]
},
{
"featureType": "poi",
"elementType": "geometry.fill",
"stylers": [
{
"visibility": "on"
},
{
"hue": "#1900ff"
},
{
"color": "#c0e8e8"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"lightness": 100
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "road",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{
"visibility": "on"
},
{
"lightness": 700
}
]
},
{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#7BBFD1"
}
]
}
];
// Initialize map options
var mapOptions = {
minZoom: 8,
zoom: 16,
center: myLatLngCenter,
backgroundColor: '#ffffff',
//disableDefaultUI: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_BOTTOM
},
streetViewControl: true,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.LEFT_BOTTOM,
mapTypeIds: [
myMapTypeID,
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.HYBRID
]
},
mapTypeId: myMapTypeID
};
// Generate Google Map in DIV with ID map
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
// MARKER
// Initialize
var marker = new google.maps.Marker({
position: myLatLngMarker,
map: map,
animation: google.maps.Animation.DROP,
icon: 'http://maps.google.com/mapfiles/ms/icons/orange-dot.png',
title: "QuarTierhof Höngg, Regensdorferstrasse 189"
});
// Add marker to map, call setMap();
marker.setMap(map);
// CIRCLE
// Initialize
var myPath = [coord1,coord2,coord3,coord4,coord5,coord6,coord7,coord8,coord9,coord10,coord11,coord12,coord13,coord14,coord15,coord16,coord17,coord18,coord19,coord20,coord21,coord22,coord23,coord24,coord25,coord26,coord27,coord28];
var myPolygon = new google.maps.Polygon({
path: myPath,
strokeColor: "#ff6600",
strokeOpacity: 0.5,
strokeWeight: 3,
fillColor: "#ffffff",
fillOpacity: 0.1
});
// Add circle to map
myPolygon.setMap(map);
// INFO WINDOW
// Initialize
var infowindow = new google.maps.InfoWindow({
content: "
Hof/HofladenQuarTierhof
Regensdorferstrasse 189
8049 Zürich"
});
// Make marker clickable for info window
marker.addListener('click', function() {
infowindow.open(map, marker);
});
// Define custom map
var styledMapOptions = {
name: 'Einfach'
};
var customMapType = new google.maps.StyledMapType(mapFeatures, styledMapOptions);
map.mapTypes.set(myMapTypeID, customMapType);
// google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(myLatLngCenter);
});
}
</script>
<script async="" defer="" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyABD_Jp-s3dOs8kIdNYE7Y9YbM1pz0odiU&callback=initMap"></script>