Created
February 18, 2020 06:43
-
-
Save cfphpflex/09495f5f34d11ff8e931dc075cab608d to your computer and use it in GitHub Desktop.
// source https://jsbin.com/yideyis
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment