<!DOCTYPE html>
<html>
<head>
    <title>Polygon</title>
    
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

    <style type="text/css">
        /* Optional: Makes the sample page fill the window. */
        html,
        body {
          height: 100%;
          margin: 0;
          padding: 0;
        }
        
        #container {
          height: 100%;
          display: flex;
        }
        
        #sidebar {
          flex-basis: 15rem;
          flex-grow: 1;
          padding: 1rem;
          max-width: 30rem;
          height: 100%;
          box-sizing: border-box;
          overflow: auto;
        }
        
        #map {
          flex-basis: 0;
          flex-grow: 4;
          height: 100%;
        }
        
        #sidebar {
          flex-direction: column;
        }
    </style>

    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script type="text/javascript" language="javascript">
     // This example requires the Geometry library. Include the libraries=geometry
        // parameter when you first load the API. For example:
        // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">
    
    //https://developers.google.com/maps/documentation/javascript/geometry?hl=es-419
    
    /*const origin1 = {lat: 25.731821800000002, lng: -100.21820079999999 }; //Manzanares 1266
      const destination1 = {lat: 25.7317388, lng: -100.2179925 }; //Manzanares 1276 Don juan
      const destination2 = {lat: 25.7317782, lng: -100.2180464 }; //Manzanares 1270 Don victor
        */


        function initMap() {
          var mapOptions = {
            zoom: 15,
            center: new google.maps.LatLng(25.731821800000002,  -100.21820079999999)
            /*,mapTypeId :'terrain'*/
          };
        
          var mapObj = new google.maps.Map(document.getElementById('map'),
              mapOptions);
        
          var bermudaTriangle = new google.maps.Polygon({
            paths: [
              new google.maps.LatLng(25.7339098, -100.2235377),
              new google.maps.LatLng(25.7328346, -100.2184147),
              new google.maps.LatLng(25.7240154, -100.2237153)
            ]
            ,fillColor: '#ff9900'	
            ,fillOpacity: 0.4
            ,strokeWeight:1
            ,strokeColor:'#ff9900'
            ,map: mapObj
            ,clickable:false
          });
        
          google.maps.event.addListener(mapObj, 'click', function(event) {
            console.log(google.maps.geometry.poly.containsLocation(event.latLng, bermudaTriangle));
            var strHtml = $("#sidebar").html();
            $("#sidebar").html( strHtml + "<br/>"+ google.maps.geometry.poly.containsLocation(event.latLng, bermudaTriangle));
            
            
          });
        }
        
        //google.maps.event.addDomListener(window, 'load', initMap);

        
            
    </script>
</head>
<body>
    
    <div id="container">
      <div id="map"></div>
      <div id="sidebar">
        
      </div>
    </div>
    
    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDdNqq__dbWp2Y8HIXMsmXD4zoXP0vDSvA&callback=initMap&libraries=geometry&v=weekly" async></script>

</body>
</html>
