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: 90%; width: 90% }
</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(51.5120, -0.12);

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

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

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

        var direction = 1;
        var rMin = 150, rMax = 300;
        setInterval(function() {
            var radius = circle.getRadius();
            console.log("radius-->");
            console.log( radius );

            if ((radius > rMax) || (radius < rMin)) {
                direction *= 1;
            }
            if(radius == 200 ){

              map.circle.strokeColor= "#A16D65";
             // radius = 100;
            }


            circle.setRadius(radius + direction * 10);
        }, 200);
    }

    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: 90%; width: 90% }
	</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(51.5120, -0.12);

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

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

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

	var direction = 1;
	var rMin = 150, rMax = 300;
	setInterval(function() {
	var radius = circle.getRadius();
	console.log("radius-->");
	console.log( radius );

	if ((radius > rMax) \|\| (radius < rMin)) {
	direction *= 1;
	}
	if(radius == 200 ){

	map.circle.strokeColor= "#A16D65";
	// radius = 100;
	}




	circle.setRadius(radius + direction * 10);
	}, 200);
	}

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

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


	</body>
	</html>