<?php /* Static Name: Map */ ?>
<style type="text/css">
    /* Set a size for our map container, the Google Map will take up 100% of this container */
    #map {
        width: 100%;
        height: 400px;
    }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
    // When the window has finished loading create our google map below
    google.maps.event.addDomListener(window, 'load', init);

    function init() {

    	// The latitude and longitude to center the map (always required)
    	var myLatlng = new google.maps.LatLng(<?php echo of_get_option('latitude'); ?>, <?php echo of_get_option('longitude'); ?>);

        // Basic options for a simple Google Map
        // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
        var mapOptions = {
            // How zoomed in you want the map to start at (always required)
            zoom: <?php echo of_get_option('zoom'); ?>,

            scrollwheel: false,

            // The latitude and longitude to center the map (always required)
            center: myLatlng, // Santa Barbara

            // How you would like to style the map. 
            // This is where you would paste any style found on Snazzy Maps.
            styles: 
            [
              {
                "featureType": "landscape.man_made",
                "elementType": "geometry.fill",
                "stylers": [
                  { "color": "#dee6e8" }
                ]
              },{
                "featureType": "landscape.natural",
                "elementType": "geometry.fill",
                "stylers": [
                  { "color": "#e7edef" }
                ]
              },{
                "featureType": "water",
                "elementType": "geometry.fill",
                "stylers": [
                  { "color": "#bbe9f8" }
                ]
              },{
                "elementType": "labels.text.fill",
                "stylers": [
                  { "color": "#363a3a" }
                ]
              },{
                "elementType": "labels.text.stroke",
                "stylers": [
                  { "color": "#ffffff" }
                ]
              },{
                "featureType": "poi",
                "elementType": "geometry.fill",
                "stylers": [
                  { "color": "#bed1d8" }
                ]
              },{
                "featureType": "poi.park",
                "elementType": "geometry.fill",
                "stylers": [
                  { "color": "#afcfdb" }
                ]
              },{
                "featureType": "poi.school",
                "elementType": "geometry.fill",
                "stylers": [
                  { "color": "#c3dce5" }
                ]
              },{
                "featureType": "road.highway",
                "elementType": "labels.text",
                "stylers": [
                  { "color": "#808080" },
                  { "visibility": "off" }
                ]
              },{
                "elementType": "labels.icon",
                "stylers": [
                  { "hue": "#34afda" },
                  { "saturation": -20 },
                  { "lightness": 0 }
                ]
              },{
                "featureType": "road.highway",
                "elementType": "geometry.fill",
                "stylers": [
                  { "color": "#3abbe5" }
                ]
              },{
                "featureType": "road.highway",
                "elementType": "geometry.stroke",
                "stylers": [
                  { "color": "#23a7d5" }
                ]
              },{
                "featureType": "road.arterial",
                "elementType": "geometry.fill",
                "stylers": [
                  { "color": "#ffffff" }
                ]
              },{
                "featureType": "road.arterial",
                "elementType": "geometry.stroke",
                "stylers": [
                  { "color": "#bbc7cb" }
                ]
              },{
                "featureType": "road.local",
                "elementType": "geometry.fill",
                "stylers": [
                  { "color": "#bbc7cb" }
                ]
              },{
                "featureType": "transit",
                "elementType": "geometry.fill",
                "stylers": [
                  { "color": "#d7e1e5" }
                ]
              }
            ]
        };

        // Create the Google Map using out element and options defined above
        var map = new google.maps.Map(document.getElementById('map'), mapOptions);

		// To add the marker to the map, call setMap();
		marker.setMap(map);

    }
</script>
<div id="map"></div>