map api

map api

<style>
    #map {
        height: 360px;
        width: 100%;
    }
</style>

		<script type="text/javascript">
			function createMap(){
				var opts = {
					center: {
						lat: 34.693741,
						lng: 33.079914,
					},
					zoom: 15,
					styles: [{"featureType":"administrative","elementType":"all","stylers":[{"saturation":"-100"}]},{"featureType":"administrative.province","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"all","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","elementType":"all","stylers":[{"saturation":-100},{"lightness":"50"},{"visibility":"simplified"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":"-100"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"all","stylers":[{"lightness":"30"}]},{"featureType":"road.local","elementType":"all","stylers":[{"lightness":"40"}]},{"featureType":"transit","elementType":"all","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]},{"featureType":"water","elementType":"labels","stylers":[{"lightness":-25},{"saturation":-100}]}],
					maxZoom: 20,
					minZoom: 0,
					mapTypeId: 'roadmap',
				};

				opts.clickableIcons = true;
				opts.disableDoubleClickZoom = false;
				opts.draggable = true;
				opts.keyboardShortcuts = true;
				opts.scrollwheel = true;
				
				var map = new google.maps.Map(document.getElementById('map'), opts);
				
				(function(){
					var markerOptions = {
						map: map,
						position: {
							lat: 34.693741,
						    lng: 33.079914
						}
					};
					
					markerOptions.icon = {
						path: 'M11 2c-3.9 0-7 3.1-7 7 0 5.3 7 13 7 13 0 0 7-7.7 7-13 0-3.9-3.1-7-7-7Zm0 9.5c-1.4 0-2.5-1.1-2.5-2.5 0-1.4 1.1-2.5 2.5-2.5 1.4 0 2.5 1.1 2.5 2.5 0 1.4-1.1 2.5-2.5 2.5Z',
						scale: 1.6363636363636363636363636364,
						anchor: new google.maps.Point(11, 22),
						fillOpacity: 1,
						fillColor: '#f44336',
						strokeOpacity: 0
					};
					
					var marker = new google.maps.Marker(markerOptions);

				})();				

			}
		</script>

		<script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDo5PKemTCTYVggybmmNMczPa0lMo5zExA&v=3.31&language=en&libraries=places,geometry&callback=createMap"></script>