Ahwar/Google Map - Polygon - Zoom Limits - Marks.html

## Google Map - Polygon - Zoom Limits - Marks.html
<!DOCTYPE html>
<!-- A google map of United States, and polygon is drawn around colorado state, have limit on zooming out and zooming in,it will not zoom out anymore, but will zooming in only five steps, mark three positions -->
<html>

<head>
    <title>Simple google Map</title>
    <meta charset="UTF-8">
    <meta name="description" content="A google map JS map of United States, and polygon is drawn around colorado state, have limit on zooming out ,it will not zoom out anymore, but will zooming in only five steps, mark three positions created by Muhammad Ahwar https://gist.github.com/Ahwar">
    <meta name="keywords" content="HTML, CSS, JavaScript, United States, colorado, polygon ">
    <meta name="author" content="Muhammad Ahwar">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <!-- jsFiddle will insert css and js -->
    <style>
        /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
        #map {
            height: 500px;
            width: 100%;
        }

        /* Optional: Makes the sample page fill the window. */
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <p>A google map of United States, and polygon is drawn around colorado state, have limit on zooming out and zooming
        in, mark three positions</p>
    <div id="map"></div>

    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <!--// the key value is an API key this API key will only work on local html file. you can generate your from here. https://developers.google.com/maps/documentation/javascript/get-api-key -->
    <script
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=&v=weekly&channel=2"
        async></script>
    <script>
        let map;

        function initMap() {
            const center = new google.maps.LatLng({ lat: 37.73, lng: -103.463 });
            const zoom = 4;
            // [START maps_interaction_restricted_mapoptions]
            const map = new google.maps.Map(document.getElementById("map"), {
                zoom,
                center,
                // INFO: below two line restrict the map from zooming out and zooming in
                minZoom: zoom - 0,
                maxZoom: zoom + 5,
            });
            // [END maps_interaction_restricted_mapoptions]
            // Define the LatLng coordinates for the polygon's path.
            const triangleCoords = [
                { lat: 41.004329, lng: -109.053522 },
                { lat: 40.994492, lng: -102.040782 },
                { lat: 36.988042, lng: -102.023541 },
                { lat: 37.023335, lng: -109.036167 },
            ];
            // Construct the polygon.
            const coloradoPolygon = new google.maps.Polygon({
                paths: triangleCoords,
                strokeColor: "#FF0000",
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: "#FF0000",
                fillOpacity: 0.9,
            });
            // set polyon
            coloradoPolygon.setMap(map);
            // set Location Marks
            const myLatLng = [{ lat: 40.071159, lng: -108.406564 }, { lat: 39.279964, lng: -115.485670 }, { lat: 36.279964, lng: -112.485670 }]; // specify mark positions
            // populate marks to map
            new google.maps.Marker({
                position: myLatLng[0],
                map,
            }); new google.maps.Marker({
                position: myLatLng[1],
                map,
            }); new google.maps.Marker({
                position: myLatLng[2],
                map,
            });
        }
    </script>

</body>

</html>
	<!DOCTYPE html>
	<!-- A google map of United States, and polygon is drawn around colorado state, have limit on zooming out and zooming in,it will not zoom out anymore, but will zooming in only five steps, mark three positions -->
	<html>

	<head>
	<title>Simple google Map</title>
	<meta charset="UTF-8">
	<meta name="description" content="A google map JS map of United States, and polygon is drawn around colorado state, have limit on zooming out ,it will not zoom out anymore, but will zooming in only five steps, mark three positions created by Muhammad Ahwar https://gist.github.com/Ahwar">
	<meta name="keywords" content="HTML, CSS, JavaScript, United States, colorado, polygon ">
	<meta name="author" content="Muhammad Ahwar">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
	<!-- jsFiddle will insert css and js -->
	<style>
	/* Always set the map height explicitly to define the size of the div
	* element that contains the map. */
	#map {
	height: 500px;
	width: 100%;
	}

	/* Optional: Makes the sample page fill the window. */
	html,
	body {
	height: 100%;
	margin: 0;
	padding: 0;
	}
	</style>
	</head>

	<body>
	<p>A google map of United States, and polygon is drawn around colorado state, have limit on zooming out and zooming
	in, mark three positions</p>
	<div id="map"></div>

	<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
	<!--// the key value is an API key this API key will only work on local html file. you can generate your from here. https://developers.google.com/maps/documentation/javascript/get-api-key -->
	<script
	src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=&v=weekly&channel=2"
	async></script>
	<script>
	let map;

	function initMap() {
	const center = new google.maps.LatLng({ lat: 37.73, lng: -103.463 });
	const zoom = 4;
	// [START maps_interaction_restricted_mapoptions]
	const map = new google.maps.Map(document.getElementById("map"), {
	zoom,
	center,
	// INFO: below two line restrict the map from zooming out and zooming in
	minZoom: zoom - 0,
	maxZoom: zoom + 5,
	});
	// [END maps_interaction_restricted_mapoptions]
	// Define the LatLng coordinates for the polygon's path.
	const triangleCoords = [
	{ lat: 41.004329, lng: -109.053522 },
	{ lat: 40.994492, lng: -102.040782 },
	{ lat: 36.988042, lng: -102.023541 },
	{ lat: 37.023335, lng: -109.036167 },
	];
	// Construct the polygon.
	const coloradoPolygon = new google.maps.Polygon({
	paths: triangleCoords,
	strokeColor: "#FF0000",
	strokeOpacity: 0.8,
	strokeWeight: 2,
	fillColor: "#FF0000",
	fillOpacity: 0.9,
	});
	// set polyon
	coloradoPolygon.setMap(map);
	// set Location Marks
	const myLatLng = [{ lat: 40.071159, lng: -108.406564 }, { lat: 39.279964, lng: -115.485670 }, { lat: 36.279964, lng: -112.485670 }]; // specify mark positions
	// populate marks to map
	new google.maps.Marker({
	position: myLatLng[0],
	map,
	}); new google.maps.Marker({
	position: myLatLng[1],
	map,
	}); new google.maps.Marker({
	position: myLatLng[2],
	map,
	});
	}
	</script>

	</body>

	</html>