// This sample uses the Place Autocomplete widget to allow the user to search
// for and select a place. The sample then displays an info window containing
// the place ID and other information about the place that the user has
// selected.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIwzALxUPNbatRBj3Xi1Uhp0fFzwWNBkE&libraries=places">

function initMap() {
	
	const map = new google.maps.Map(document.getElementById("map"), {
		center: { lat: 52.520008, lng: 13.404954 },
    zoom: 2,
		mapTypeControl: false,
		disableDefaultUI: true,
	});

	const input = document.getElementById("pac-input");
	const autocomplete = new google.maps.places.Autocomplete(input);
	autocomplete.bindTo("bounds", map);
	// Specify just the place data fields that you need.
	autocomplete.setFields(["place_id", "geometry", "name"]);
	map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); // Feld insert
	const infowindow = new google.maps.InfoWindow();
	const infowindowContent = document.getElementById("infowindow-content");
	infowindow.setContent(infowindowContent);
	const marker = new google.maps.Marker({ map: map });

	
		marker.addListener("click", () => {
			infowindow.open(map, marker);
		});

		
	autocomplete.addListener("place_changed", () => {
		infowindow.close();
		const place = autocomplete.getPlace();
		console.log("PLACE: " + place.formatted_address);
		// hier alles prüfen, was place beinhaltet
		if (!place.geometry || !place.geometry.location) {
			return;
		}

		if (place.geometry.viewport) {
			map.fitBounds(place.geometry.viewport);
		} else {
			map.setCenter(place.geometry.location);
			map.setZoom(17);
		}
		// Set the position of the marker using the place ID and location.
		marker.setPlace({
			placeId: place.place_id,
			location: place.geometry.location,
		});
		marker.setVisible(true);
		infowindowContent.children.namedItem("place-name").textContent = place.name;
		// infowindowContent.children.namedItem("place-id").textContent = place.place_id;
		infowindowContent.children.namedItem("place-address").textContent = place.formatted_address;
		// infowindowContent.children.namedItem("place-address").textContent = place.address_components[0];
		infowindow.open(map, marker);
		document.getElementById('place').value = place.place_id;
		document.getElementById('name_des_unternehmens').textContent = place.name;
		document.getElementById('hier_bestellen').style.display = 'none';
		document.getElementById('bestellen').style.display = 'block';
	});
}