// Google-Maps-Config
var map;
var myLatlng = new google.maps.LatLng(49.81137, 9.143659999999999);
var image = 'https://www.beato.de/wp-content/uploads/2017/09/mapicon.png';
var directionDisplay;
var directionsService = new google.maps.DirectionsService();


function initialize() {

 var stylez = [ 
    { featureType: "landscape.natural", elementType: "geometry.stroke",  stylers: [  { color: "#000000" },  { hue: "#99ff00" } ] },
	{ featureType: "landscape.natural", stylers: [ { color: "#808080" } ] },
	{ featureType: "landscape", stylers: [ { color: "#a0a0a0" } ] },
	{ featureType: "poi.business", elementType: "labels.text.stroke", stylers: [ { visibility: "on" } ] },
	{ featureType: "poi.sports_complex", stylers: [ { color: "#808080" }, { visibility: "on" } ] },
	{ featureType: "poi", elementType: "geometry", stylers: [ { visibility: "on" }, { color: "#a0a0a0" } ] },
	{ featureType: "poi.park", elementType: "geometry", stylers: [ { hue: "#00fff7" }, { visibility: "on" }, { color: "#bce7a5" } ] },
	{ featureType: "road.local", elementType: "geometry", stylers: [ { color: "#ffffff" } ] },
	{ featureType: "road.arterial", elementType: "geometry", stylers: [ { color: "#f0f0f0" } ] },
	{ featureType: "road.highway", stylers: [ { color: "#dcdcdc" } ] },
	{ featureType: "road", elementType: "labels.text.fill", stylers: [ { color: "#808080" }, { visibility: "on" } ] },
	{ featureType: "road.arterial", elementType: "labels.text.stroke", stylers: [ { color: "#050505" }, { visibility: "simplified" } ] },
	{ featureType: "road.local", elementType: "labels.text.fill", stylers: [ { color: "#050505" }, { visibility: "on" } ] },
	{ featureType: "road.highway", elementType: "labels.text.fill", stylers: [ { color: "#050505" } ] },
	{ featureType: "landscape.natural", stylers: [ { color: "#808080" } ] },
	{ featureType: "landscape.man_made", stylers: [ { color: "#808080" } ] },
	{ featureType: "road.arterial", elementType: "labels.text.fill", stylers: [ { color: "#050505" } ] },
	{ featureType: "poi.business", elementType: "geometry",stylers: [ { color: "#fafafa" } ] },
	{ featureType: "landscape.man_made", elementType: "geometry", stylers: [ { color: "#c8c8c8" } ] },
	{ featureType: "poi.place_of_worship", elementType: "geometry", stylers: [ { color: "#b4b4b4" } ] },
	{ featureType: "landscape.natural", stylers: [ { color: "#c8c8c8" } ] },
	{ featureType: "poi", elementType: "labels", stylers: [ { visibility: "off" } ] },
	{ featureType: "administrative.country", stylers: [ { color: "#808080" } ] },
	{ featureType: "poi", elementType: "geometry.fill", stylers: [ { visibility: "on" }, { color: "#c8c8c8" } ] },
	{ featureType: "poi.park", stylers: [ { color: "#a5d68a" } ] },
	{ featureType: "landscape.natural", stylers: [ { color: "#f6f6f6" } ] } 
	
];

directionsDisplay = new google.maps.DirectionsRenderer({
	polylineOptions: {
		strokeColor:"#C9252B"
	},
        suppressMarkers: true
});

var myMapOptions = {
                        disableDefaultUI: true,
			zoom: 15,
			center: myLatlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP,
                        
                        panControl: false,
                        streetViewControl: false,
                        overviewMapControl: false,
                        scrollwheel: false,
                        
                        mapTypeControl: false,
                        mapTypeControlOptions: {
                            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                            position: google.maps.ControlPosition.BOTTOM_RIGHT
                        },
                        
                        zoomControl: true,
                        zoomControlOptions: {
                            style: google.maps.ZoomControlStyle.LARGE,
                            position: google.maps.ControlPosition.RIGHT_BOTTOM
                        },
                        
                        scaleControl: true,
                        scaleControlOptions: {
                            position: google.maps.ControlPosition.BOTTOM_RIGHT
                        },

};

 map = new google.maps.Map(document.getElementById("google_canvas"), myMapOptions);
 directionsDisplay.setMap(map);
 directionsDisplay.setPanel(document.getElementById("directions-panel"));



// Style  Start
 var styledMapOptions = {
    map: map,
    name: "Beato Umzüge & Dienstleistungen"
 }

 var testmap =  new google.maps.StyledMapType(stylez,styledMapOptions);

 map.mapTypes.set('Qumola', testmap);
 map.setMapTypeId('Qumola');
 // ENDE
 
 
        var marker = new google.maps.Marker({
                map: map,
                draggable: false,
                position: myLatlng,
                visible: true,
                title: 'Beato Umzüge & Dienstleistungen',
                icon: image
        });
 
        
 	var myOptions = {
		// content: boxText,
		disableAutoPan: false
		,maxWidth: 0
		,pixelOffset: new google.maps.Size(65, -51)
		,zIndex: null
                ,closeBoxURL:''
		,boxStyle: { 
		  opacity: 1
		  ,width: "285px"
		 }
		,infoBoxClearance: new google.maps.Size(1, 1)
		,isHidden: false
		,pane: "floatPane"
		,enableEventPropagation: false
	};



	google.maps.event.addListener(marker, "click", function (e) {
		ib.open(map, this);
	});



	//var ib = new InfoBox(myOptions);
	//ib.open(map, marker);
 
}


function calcRoute() {

  var start = window.document.getElementById('start').value;
  var end = "Beato Umzüge & Dienstleistungen, Dreispitzweg 7.2, 63906 Erlenbach am Main";
  var request = {
    origin:start,
    destination:end, 
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(result);
      var leg = result.routes[0].legs[0];
      makeMarker(leg.start_location, icons.start, "title"); // Icon für Anfang der Route
      //makeMarker(leg.end_location, icons.end, "title");   // Icon für Ende der Route
    }
  });
}


function makeMarker(position, icon, title) {
    new google.maps.Marker({
        position: position,
        map: map,
        icon: icon,
        title: title
    });
}


var icons = {
    start: new google.maps.MarkerImage(
        'https://www.beato.de/wp-content/themes/template/theme/images/start.png',
        new google.maps.Size(40,40),
        new google.maps.Point(0,0),
        new google.maps.Point(20,33)
    )
    
    /*
    end: new google.maps.MarkerImage(
        '/wp-content/themes/theme/images/end.png',
        new google.maps.Size(44,32),
        new google.maps.Point(0,0),
        new google.maps.Point(22,32)
    )
    */
}

initialize();