GitMazzone/index.css Secret

## index.css
body {
    background-color: #f2f0f7;
}

nav {
    background-color: #1b5e8b;
}

@media (min-width: 994px) {
    .brand-logo {
        margin-left: 20px;
    }
}

#map {
    height: 100vh;
    width: 100vw;
    background-color: #999999;
}

## index.html
<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>TITLE</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <!-- Place favicon.ico in the root directory -->

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/index.css">
        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
        <script
            src="https://code.jquery.com/jquery-3.1.1.min.js"
            integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
            crossorigin="anonymous"></script>
    </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/?locale=en">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>

        <nav>
            <div class="nav-wrapper">
                <a href="#" class="brand-logo">NAME</a>
                <ul id="nav-mobile" class="right hide-on-med-and-down">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Businesses</a></li>
                    <li><a href="#">People</a></li>
                    <li><a href="#">Login/Register</a></li>
                </ul>
            </div>
        </nav>

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

        <!-- Google Maps / Places API -->
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&libraries=places"></script>

        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script>
            (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
            function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
            e=o.createElement(i);r=o.getElementsByTagName(i)[0];
            e.src='https://www.google-analytics.com/analytics.js';
            r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
            ga('create','UA-XXXXX-X','auto');ga('send','pageview');
        </script>
    </body>
</html>

## main.js
if ("geolocation" in navigator) {
    console.log("Geolocation is enabled.");
    navigator.geolocation.getCurrentPosition(function (position) {
        var lat = position.coords.latitude;
        var long = position.coords.longitude;
        var map;
        var service;
        var infoWindow;

        console.log("lat: " + lat);

        //Initialize Google Map. Starts at user's location.
        function initialize() {
            var userLocation = new google.maps.LatLng(lat, long);

            map = new google.maps.Map(document.getElementById('map'), {
                center: userLocation,
                zoom: 15
            });

            var request = {
                location: userLocation,
                radius: '500',
                types: ['store']
            };

            service = new google.maps.places.PlaceService(map);
            service.nearbySearch(request, callback);
        }

        //Callback function for nearbySearch
        function callback(results, status) {
            if (status == google.maps.places.PlacesServiceStatus.OK) {
                for (var i = 0; i < results.length; i++) {
                    var place = results[i];
                    createMarker(results[i]);
                }
            }
        }
    });
} else {
    console.log("Geolocation is disabled.");
    //Inform user why we use location
    //Allow user to enter location manually
}
	body {
	background-color: #f2f0f7;
	}

	nav {
	background-color: #1b5e8b;
	}

	@media (min-width: 994px) {
	.brand-logo {
	margin-left: 20px;
	}
	}

	#map {
	height: 100vh;
	width: 100vw;
	background-color: #999999;
	}
	<!doctype html>
	<html class="no-js" lang="">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>TITLE</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="apple-touch-icon" href="apple-touch-icon.png">
	<!-- Place favicon.ico in the root directory -->

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
	<link rel="stylesheet" href="css/main.css">
	<link rel="stylesheet" href="css/index.css">
	<script src="js/vendor/modernizr-2.8.3.min.js"></script>
	<script
	src="https://code.jquery.com/jquery-3.1.1.min.js"
	integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
	crossorigin="anonymous"></script>
	</head>
	<body>
	<!--[if lt IE 8]>
	<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/?locale=en">upgrade your browser</a> to improve your experience.</p>
	<![endif]-->

	<script src="js/plugins.js"></script>
	<script src="js/main.js"></script>

	<nav>
	<div class="nav-wrapper">
	<a href="#" class="brand-logo">NAME</a>
	<ul id="nav-mobile" class="right hide-on-med-and-down">
	<li><a href="#">Home</a></li>
	<li><a href="#">Businesses</a></li>
	<li><a href="#">People</a></li>
	<li><a href="#">Login/Register</a></li>
	</ul>
	</div>
	</nav>

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

	<!-- Google Maps / Places API -->
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&libraries=places"></script>

	<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
	<script>
	(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]\|\|(b[l]=
	function(){(b[l].q=b[l].q\|\|[]).push(arguments)});b[l].l=+new Date;
	e=o.createElement(i);r=o.getElementsByTagName(i)[0];
	e.src='https://www.google-analytics.com/analytics.js';
	r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
	ga('create','UA-XXXXX-X','auto');ga('send','pageview');
	</script>
	</body>
	</html>
	if ("geolocation" in navigator) {
	console.log("Geolocation is enabled.");
	navigator.geolocation.getCurrentPosition(function (position) {
	var lat = position.coords.latitude;
	var long = position.coords.longitude;
	var map;
	var service;
	var infoWindow;

	console.log("lat: " + lat);

	//Initialize Google Map. Starts at user's location.
	function initialize() {
	var userLocation = new google.maps.LatLng(lat, long);

	map = new google.maps.Map(document.getElementById('map'), {
	center: userLocation,
	zoom: 15
	});

	var request = {
	location: userLocation,
	radius: '500',
	types: ['store']
	};

	service = new google.maps.places.PlaceService(map);
	service.nearbySearch(request, callback);
	}

	//Callback function for nearbySearch
	function callback(results, status) {
	if (status == google.maps.places.PlacesServiceStatus.OK) {
	for (var i = 0; i < results.length; i++) {
	var place = results[i];
	createMarker(results[i]);
	}
	}
	}
	});
	} else {
	console.log("Geolocation is disabled.");
	//Inform user why we use location
	//Allow user to enter location manually
	}