cfphpflex/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0; padding: 0 }
    #map { height: 100%; width: 100% }
</style>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<!--script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script-->

<script type="text/javascript">

    function initialize() {
        var center = new google.maps.LatLng(37.754631, -122.447318 );

        var mapOptions = {
            center: center,
            zoom: 14,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("map"),
                        mapOptions);

        var redcircle = new google.maps.Circle({
            center: center,
            radius: 300,
            strokeColor: "#f31708",
            strokeOpacity: 1,
            strokeWeight: 3,
            fillColor: "#f31708",
            fillOpacity: 0
        });

        var orangecircle = new google.maps.Circle({
            center: center,
            radius: 600,
            strokeColor: "#f39108",
            strokeOpacity: 1,
            strokeWeight: 3,
            fillColor: "#f39108",
            fillOpacity: 0
        });

        var yellowcircle = new google.maps.Circle({
            center: center,
            radius: 900,
            strokeColor: "#f3f108",
            strokeOpacity: 1,
            strokeWeight: 3,
            fillColor: "#f3f108",
            fillOpacity: 0
        });

       var greencircle = new google.maps.Circle({
            center: center,
            radius: 1200,
            strokeColor: "#0ea20c",
            strokeOpacity: 1,
            strokeWeight: 3,
            fillColor: "#0ea20c",
            fillOpacity: 0
        });

        var radarcircle = new google.maps.Circle({
            center: center,
            radius: 30,
            strokeColor: "#d9dfd9",
            strokeOpacity: 1,
            strokeWeight: 3,
            fillColor: "#d9dfd9",
            fillOpacity: 0
        });

        redcircle.setMap(map);
        orangecircle.setMap(map);
        yellowcircle.setMap(map);
        greencircle.setMap(map);

        radarcircle.setMap(map);


        var direction = 1;
        var rMin = 30, rMax = 1200;

        setInterval(function() {
            var radius = radarcircle.getRadius();
            if ((radius > rMax) || (radius < rMin)) {
                direction *= -1;
            }
            radarcircle.setRadius(radius + direction * 10);
            if (radius > 1199) { radarcircle.setRadius(30);     }
        }, 50);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
    <div id='map'></div>


</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	html { height: 100% }
	body { height: 100%; margin: 0; padding: 0 }
	#map { height: 100%; width: 100% }
	</style>

	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
	<!--script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script-->

	<script type="text/javascript">

	function initialize() {
	var center = new google.maps.LatLng(37.754631, -122.447318 );

	var mapOptions = {
	center: center,
	zoom: 14,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	};

	var map = new google.maps.Map(document.getElementById("map"),
	mapOptions);

	var redcircle = new google.maps.Circle({
	center: center,
	radius: 300,
	strokeColor: "#f31708",
	strokeOpacity: 1,
	strokeWeight: 3,
	fillColor: "#f31708",
	fillOpacity: 0
	});

	var orangecircle = new google.maps.Circle({
	center: center,
	radius: 600,
	strokeColor: "#f39108",
	strokeOpacity: 1,
	strokeWeight: 3,
	fillColor: "#f39108",
	fillOpacity: 0
	});

	var yellowcircle = new google.maps.Circle({
	center: center,
	radius: 900,
	strokeColor: "#f3f108",
	strokeOpacity: 1,
	strokeWeight: 3,
	fillColor: "#f3f108",
	fillOpacity: 0
	});

	var greencircle = new google.maps.Circle({
	center: center,
	radius: 1200,
	strokeColor: "#0ea20c",
	strokeOpacity: 1,
	strokeWeight: 3,
	fillColor: "#0ea20c",
	fillOpacity: 0
	});

	var radarcircle = new google.maps.Circle({
	center: center,
	radius: 30,
	strokeColor: "#d9dfd9",
	strokeOpacity: 1,
	strokeWeight: 3,
	fillColor: "#d9dfd9",
	fillOpacity: 0
	});

	redcircle.setMap(map);
	orangecircle.setMap(map);
	yellowcircle.setMap(map);
	greencircle.setMap(map);

	radarcircle.setMap(map);


	var direction = 1;
	var rMin = 30, rMax = 1200;

	setInterval(function() {
	var radius = radarcircle.getRadius();
	if ((radius > rMax) \|\| (radius < rMin)) {
	direction *= -1;
	}
	radarcircle.setRadius(radius + direction * 10);
	if (radius > 1199) { radarcircle.setRadius(30); }
	}, 50);
	}

	google.maps.event.addDomListener(window, 'load', initialize);
	</script>
	</head>

	<body>
	<div id='map'></div>


	</body>
	</html>