TechGeek

Untitled

Aug 24th, 2018
42
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <style>
  4. body {
  5.   margin: 0;
  6.   padding: 0;
  7.   font: 12px sans-serif;
  8. }
  9. h1, p {
  10.   margin: 0;
  11.   padding: 0;
  12. }
  13. </style>
  14. <body>
  15.  
  16. <script type="text/javascript">
  17. google.maps.event.addDomListener(window, "load", function () {
  18.     myMap();
  19. });
  20.  
  21. function myMap() {
  22.     //add global geocoder
  23.     window.geocoder = new google.maps.Geocoder();
  24.  
  25.   var mapCanvas = document.getElementById("map_div");
  26.   var mapOptions = { zoom: 7, mapTypeId: google.maps.MapTypeId.ROADMAP, center: new google.maps.LatLng(33.808678, -117.918921) };
  27.   window.map = new google.maps.Map(mapCanvas,mapOptions);
  28.  
  29.   drawCircleAroundCity('ottawa');
  30. }
  31.  
  32. function drawCircleAroundCity(cityName){
  33.     if(!cityName) return;
  34.   if(!window.geocoder) throw "Geocoder is not loaded";
  35.  
  36.   window.geocoder.geocode({ 'address': cityName }, function (results, status) {
  37.     if (status == 'OK') {
  38.       addCircle(results[0].geometry.location, true);
  39.     } else {
  40.       throw 'Unable to find address: ' + address;
  41.     }
  42.   });
  43. }
  44.  
  45. function addCircle(position, recenter){
  46.     if(typeof(position) != 'object') return;
  47.   if(!window.map) throw "Map is not loaded";
  48.  
  49.   var myCity = new google.maps.Circle({
  50.     center: position,
  51.     radius: 50000,
  52.     strokeColor: "#0000FF",
  53.     strokeOpacity: 0.8,
  54.     strokeWeight: 2,
  55.     fillColor: "#0000FF",
  56.     fillOpacity: 0.4
  57.   });
  58.  
  59.   myCity.setMap(window.map);
  60.  
  61.   if(recenter)
  62.     window.map.setCenter(position);
  63. }
  64. </script>
  65. <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
  66. <div id="map_div" style="height: 400px;"></div>
  67. </body>
  68. </html>
RAW Paste Data