Skip to content

Instantly share code, notes, and snippets.

@cfphpflex

cfphpflex/index.html

Created February 18, 2020 01:17
Show Gist options
  • Save cfphpflex/c121a0668c6037b19e7484e95d636abd to your computer and use it in GitHub Desktop.
Save cfphpflex/c121a0668c6037b19e7484e95d636abd to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment