<?php 
		
		$map_zoom = get_theme_mod('map_zoom') ? get_theme_mod('map_zoom') : 12 ;
?>

<script>
"use strict";
jQuery(document).ready(function($){
 
	
	 			var map;
				var MY_MAPTYPE_ID = 'custom_style';
				function initialize() {
				var styles = [{"featureType":"water","stylers":[{"visibility":"on"},{"color":"#acbcc9"}]},{"featureType":"landscape","stylers":[{"color":"#f2e5d4"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#c5c6c6"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#e4d7c6"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#fbfaf7"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#c5dac6"}]},{"featureType":"administrative","stylers":[{"visibility":"on"},{"lightness":33}]},{"featureType":"road"},{"featureType":"poi.park","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":20}]},{},{"featureType":"road","stylers":[{"lightness":20}]}]
		 
			var mapOptions = {
					  zoom: <?php echo $map_zoom; ?>,
					  center: myLatlng,
					  mapTypeControl: false,
					  disableDefaultUI: true,
					  zoomControl: true,
					  scrollwheel: false,
					  styles: styles,
					  size:google.maps.ZoomControlStyle.SMALL
			}
			var infowindow = new google.maps.InfoWindow({
				content: "We are here."
			});
			map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
			var marker = new google.maps.Marker({
					position: myLatlng,
					map: map,
					icon: '<?php echo get_template_directory_uri(); ?>/assets/images/marker.png',
					title: 'We are here.'
			});
		 	google.maps.event.addListener(marker, 'click', function() {
				 infowindow.open(map,marker);
			});
			var styledMapOptions = {
				name: ''
			};
			var customMapType = new google.maps.StyledMapType(styles, styledMapOptions);
			map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
		}
				google.maps.event.addDomListener(window, 'load', initialize);
	
	 
	});
	
</script>