API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Feb 15th, 2017
176
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 13.10 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.     <!-- saved from url=(0014)about:internet -->
  3.     <html>
  4.     <head>
  5.       <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  6.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  7.     <meta charset="UTF-8">
  8.     <title>Test</title>
  9.     <script type="text/javascript"
  10.    src="http://maps.google.com/maps/api/js?key=AIzaSyBgmfaITmUDhXxk-0V33IPmNPd43mMd4ZU&libraries=drawing,places"></script>
  11.     <style type="text/css">
  12.     #map, html, body {
  13.     padding: 0;
  14.     margin: 0;
  15.     width: 100%;
  16.     height: 100%;
  17.     }
  18.    
  19.     #geoinfoboxes {
  20.     display: none;
  21.     }
  22.    
  23.     #delete-button {
  24.       background: #0084ff;
  25.       background-image: -webkit-linear-gradient(top, #0084ff, #000000);
  26.       background-image: -moz-linear-gradient(top, #0084ff, #000000);
  27.       background-image: -o-linear-gradient(top, #0084ff, #000000);
  28.       background-image: linear-gradient(to bottom, #0084ff, #000000);
  29.       border-radius: 30px;
  30.       text-shadow: 0px 1px 3px #cfcdcf;
  31.       -webkit-box-shadow: 0px 1px 3px #666666;
  32.       -moz-box-shadow: 0px 1px 3px #666666;
  33.       box-shadow: 0px 1px 3px #666666;
  34.       font-family: Arial;
  35.       margin-top: 5px;
  36.       right: 0.5%;
  37.       color: #ffffff;
  38.       font-size: 15px;
  39.       padding: 8px 10px 8px 10px;
  40.       border: solid #a8a8a8 2px;
  41.       text-decoration: none;
  42.       }
  43.    
  44.     #delete-button:hover {
  45.       background: #09ff00;
  46.       background-image: -webkit-linear-gradient(top, #09ff00, #000000);
  47.       background-image: -moz-linear-gradient(top, #09ff00, #000000);
  48.       background-image: -o-linear-gradient(top, #09ff00, #000000);
  49.       background-image: linear-gradient(to bottom, #09ff00, #000000);
  50.       text-decoration: none;
  51.       }
  52.    
  53.     .controls {
  54.       border: 1px solid transparent;
  55.       border-radius: 30px 30px 30px 30px;
  56.       box-sizing: border-box;
  57.       -moz-box-sizing: border-box;
  58.       height: 32px;
  59.       outline: none;
  60.       box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  61.       margin-top: 5px;
  62.       }
  63.    
  64.     #pac-input {
  65.       background-color: #fff;
  66.       font-family: Roboto;
  67.       font-size: 15px;
  68.       font-weight: 300;
  69.       margin-left: 12px;
  70.       padding: 0 11px 0 13px;
  71.       text-overflow: ellipsis;
  72.       width: 400px;
  73.       }
  74.    
  75.     #pac-input:focus {
  76.       border-color: #4d90fe;
  77.       }
  78.    
  79.     .pac-container {
  80.       font-family: Roboto;
  81.       }
  82.     </style>
  83.    
  84.     <script type="text/javascript">
  85.     //debugger;
  86.    
  87.     /////////////////////////////////////////////////////////////
  88.     //Map Specifications
  89.    
  90.     function initialize () {
  91.       var map = new google.maps.Map(document.getElementById('map'), {
  92.         zoom: 18,
  93.         center: new google.maps.LatLng(33.27144940863937, -117.2983479390361),
  94.         mapTypeId: google.maps.MapTypeId.SATELLITE,
  95.         mapTypeId: google.maps.MapTypeId.HYBRID,
  96.         tilt: 0,
  97.         disableDefaultUI: true,
  98.         zoomControl: true,
  99.         mapTypeControl: false,
  100.         scaleControl: true,
  101.         streetViewControl: true,
  102.         rotateControl: true,
  103.         fullscreenControl: false
  104.       });
  105.    
  106.     // Creates a drawing manager attached to the map that allows the user to draw
  107.     // markers, lines, and shapes.
  108.     drawingManager = new google.maps.drawing.DrawingManager({
  109.       drawingControlOptions: {
  110.       position: google.maps.ControlPosition.TOP_CENTER,
  111.       drawingModes: [
  112.       google.maps.drawing.OverlayType.POLYLINE,
  113.       google.maps.drawing.OverlayType.POLYGON
  114.                        ]
  115.                     },
  116.     markerOptions: {
  117.       draggable: false
  118.       },
  119.     //https://developers.google.com/maps/documentation/javascript/reference#PolygonOptions
  120.     polygonOptions: {
  121.       clickable: true,
  122.       draggable: false,
  123.       editable: true,
  124.       fillColor: '#00FF00',
  125.       fillOpacity: 0.45,
  126.       geodesic: false,
  127.       strokeColor: '#000000',
  128.       strokeOpacity: 08,
  129.       //strokePosition: CENTER,
  130.       strokeWeight: 3,
  131.       visible: true,
  132.       zIndex: 0
  133.       },
  134.     //https://developers.google.com/maps/documentation/javascript/reference#PolylineOptions
  135.     polylineOptions: {
  136.       clickable: true,
  137.       draggable: false,
  138.       editable: true,
  139.       geodesic: false,
  140.       //icons: ,
  141.       strokeColor: '#FF00FF',
  142.       strokeOpacity: 0.8,
  143.       strokeWeight: 3,
  144.       visible: true,
  145.       zIndex: 0
  146.       }
  147.     });
  148.    
  149.     ////////////////////////////////////////////////////////////////////////////////
  150.     var drawingManager;
  151.     var deleteSelectedShape;
  152.     var selectedShape;
  153.                
  154.     function clearSelection () {
  155.       if (selectedShape) {
  156.         if (selectedShape.type !== 'marker') {
  157.           selectedShape.setEditable(false);
  158.           }
  159.        
  160.         selectedShape = null;
  161.         }
  162.       }
  163.       function setSelection (shape) {
  164.         if (shape.type !== 'marker') {
  165.           clearSelection();
  166.           shape.setEditable(true);
  167.           }
  168.          
  169.           selectedShape = shape;
  170.       }
  171.       DeleteShape = function deleteSelectedShape() {
  172.         if (selectedShape) { selectedShape.setMap(null); }
  173.           if (selectedShape.type == 'polygon') {
  174.             document.getElementById("action_gon").value = 'This box shows updated coords for POLYGONS based on user interactions (adds, moves, deletions).'
  175.           }
  176.         else if (selectedShape.type == 'polyline') {
  177.           document.getElementById("action_line").value = 'This box shows updated coords for POLYLINES based on user interactions (adds, moves, deletions).'
  178.           }
  179.       };
  180.    
  181.     /////////////////////////////////////////////////////////////
  182.     //Populate textboxes with geo data when new polygon and polyline shape added
  183.    
  184.     drawingManager.setMap(map);
  185.    
  186.     google.maps.event.addDomListener(drawingManager, 'markercomplete', function(marker) {
  187.       document.getElementById("action").value += "#marker\n";
  188.       document.getElementById("action").value += marker.getPosition() + "\n";
  189.     });
  190.    
  191.     google.maps.event.addDomListener(drawingManager, 'polylinecomplete', function(line) {
  192.     path = line.getPath();
  193.     //document.getElementById("action_line").value = ''
  194.     document.getElementById("action_line").value = "#polyline shape added\n";
  195.     for(var i = 0; i < path.length; i++) {
  196.    document.getElementById("action_line").value += path.getAt(i) + "\n";
  197.    }
  198.    });
  199.    
  200.    google.maps.event.addDomListener(drawingManager, 'polygoncomplete', function(polygon) {
  201.    var markerCnt = 0;
  202.    path = polygon.getPath();
  203.    //document.getElementById("action_gon").value = ''
  204.    document.getElementById("action_gon").value = "#polygon shape added\n";
  205.    for(var i = 0; i < path.length; i++) {
  206.    document.getElementById("action_gon").value += path.getAt(i) + '\n';
  207.    }
  208.    });
  209.    
  210.    //////////////////////////////////////////////////////////////////////
  211.    
  212.    google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
  213.    
  214.    var newShape = e.overlay;
  215.    newShape.type = e.type;
  216.    
  217.    if (e.type !== google.maps.drawing.OverlayType.MARKER) {
  218.      // Switch back to non-drawing mode after drawing a shape.
  219.      drawingManager.setDrawingMode(null);
  220.    
  221.    if (e.type == google.maps.drawing.OverlayType.POLYGON) {
  222.      var coordinatesArray = e.overlay.getPath().getArray();
  223.      document.getElementById("count_gon").value += "#\n";
  224.      document.getElementById("count_gon").value += coordinatesArray + "\n";
  225.    }
  226.    
  227.    //Catch vertex modifications (moves)
  228.    function processVertices(e) {
  229.      var ele;
  230.      if (newShape.type == "polygon") {
  231.        ele = document.getElementById("action_gon");
  232.        //ele.value = "Modified vertex: "+e+"\n"+this.getAt(e)+"\nPolygon coords :\n";
  233.        ele.value = "#polygon vertex "+e+" moved\n"+this.getAt(e)+"\n";
  234.      } else if (newShape.type == "polyline") {
  235.        ele = document.getElementById("action_line");
  236.        //ele.value = "Modified vertex: "+e+"\n"+this.getAt(e)+"\nPolyline coords :\n";
  237.        ele.value = "#polyline vertex "+e+" moved\n"+this.getAt(e)+"\n";
  238.      } else return;
  239.        for (var i=0; i<newShape.getPath().getLength(); i++) {
  240.        ele.value += newShape.getPath().getAt(i) + '\n';
  241.      };
  242.    };
  243.    
  244.    google.maps.event.addListener(newShape.getPath(), 'set_at', processVertices);
  245.    google.maps.event.addListener(newShape.getPath(), 'insert_at', processVertices);
  246.    
  247.    /////////////////////////////////////////////////////////////
  248.    // Add an event listener that selects the newly-drawn shape when the user clicks it.
  249.    google.maps.event.addListener(newShape, 'click', function (e) {
  250.      if (e.vertex !== undefined) {
  251.        if (newShape.type === google.maps.drawing.OverlayType.POLYGON) {
  252.        var path = newShape.getPaths().getAt(e.path);
  253.        path.removeAt(e.vertex);
  254.    
  255.    /////////////////////////////////////////////////////////////
  256.    //Update textboxes with geo data when polygon vertex deleted
  257.      document.getElementById("action_gon").value = "#polygon vertex deleted\n";
  258.      for(var i = 0; i < path.length; i++) {
  259.      document.getElementById("action_gon").value += path.getAt(i) + '\n';
  260.      }
  261.    
  262.      if (path.length < 3) {
  263.        newShape.setMap(null);
  264.        document.getElementById("action_gon").value = 'This box shows updated coords for POLYGONS based on user interactions (adds, moves, deletions).'
  265.      }
  266.    }
  267.    
  268.      if (newShape.type === google.maps.drawing.OverlayType.POLYLINE) {
  269.         var path = newShape.getPath();
  270.         path.removeAt(e.vertex);
  271.    /////////////////////////////////////////////////////////////
  272.    //Update textboxes with geo data when polyline vertex deleted
  273.         document.getElementById("action_line").value = "#polyline vertex deleted\n";
  274.         for(var i = 0; i < path.length; i++) {
  275.         document.getElementById("action_line").value += path.getAt(i) + '\n';
  276.         }
  277.    
  278.      if (path.length < 2) {
  279.         newShape.setMap(null);
  280.         document.getElementById("action_line").value = 'This box shows updated coords for POLYLINES based on user interactions (adds, moves, deletions).'
  281.         }
  282.         }
  283.         }
  284.    
  285.         setSelection(newShape);
  286.         });
  287.         setSelection(newShape);
  288.         }
  289.      else {
  290.         google.maps.event.addListener(newShape, 'click', function (e) {
  291.         setSelection(newShape);
  292.         });
  293.         setSelection(newShape);
  294.         }
  295.         });
  296.    
  297.    // Link delete button to the UI element.
  298.    var delbtn = /** @type {HTMLInputElement} */(
  299.    document.getElementById('delete-button'));
  300.    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(delbtn);
  301.    
  302.    // Clear the current selection when the drawing mode is changed, or when the
  303.    // map is clicked.
  304.    google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);
  305.    google.maps.event.addListener(map, 'click', clearSelection);
  306.    
  307.    // Listen for delete button click.
  308.    google.maps.event.addDomListener(document.getElementById('delete-button'), 'click',deleteSelectedShape);
  309.    
  310.    /////////////////////////////////////////////////////////////////////
  311.  
  312.    //Places Search Box Setup
  313.    var markers = [];
  314.    var input = /** @type {HTMLInputElement} */(
  315.    document.getElementById('pac-input'));
  316.    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
  317.    
  318.    var searchBox = new google.maps.places.SearchBox(
  319.    /** @type {HTMLInputElement} */(input));
  320.    
  321.    // [START region_getplaces]
  322.    // Listen for the event fired when the user selects an item from the
  323.    // pick list. Retrieve the matching places for that item.
  324.    google.maps.event.addListener(searchBox, 'places_changed', function() {
  325.    var places = searchBox.getPlaces();
  326.    
  327.    if (places.length == 0) {
  328.      return;
  329.    }
  330.    for (var i = 0, marker; marker = markers[i]; i++) {
  331.      marker.setMap(null);
  332.    }
  333.    
  334.    // For each place, get the icon, place name, and location.
  335.    markers = [];
  336.    var bounds = new google.maps.LatLngBounds();
  337.    for (var i = 0, place; place = places[i]; i++) {
  338.         var image = {
  339.         url: place.icon,
  340.         size: new google.maps.Size(71, 71),
  341.         origin: new google.maps.Point(0, 0),
  342.         anchor: new google.maps.Point(17, 34),
  343.         scaledSize: new google.maps.Size(25, 25)
  344.         };
  345.    
  346.         bounds.extend(place.geometry.location);
  347.         }
  348.    
  349.         map.fitBounds(bounds);
  350.         });
  351.    }
  352.    
  353.    google.maps.event.addDomListener(window, 'load', initialize);
  354.    
  355.    </script>
  356.     </head>
  357.     <!-- -->
  358.     <body>
  359.     <input id="pac-input" class="controls" type="text" placeholder="Search...">
  360.     <input id="delete-button" onclick="DeleteShape();" type=button value="Delete Selected Shape">
  361.     <div id="geoinfoboxes">
  362.     <textarea id="action_line" rows="8" cols="46">This box shows updated coords for POLYLINES based on user interactions (adds, moves, deletions).</textarea>
  363.     <textarea id="action_gon" rows="8" cols="46">This box shows updated coords for POLYGONS based on user interactions (adds, moves, deletions).</textarea>
  364.     <textarea id="count_gon" rows="8" cols="46"></textarea>
  365.     </div>
  366.     <div id="map"></div>
  367.     </body>
  368.     </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!