<!DOCTYPE html>
<html>

<head>
  <!--  Include jquery - required for XHR requests -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <!--  Include google maps api -->
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;key=your_google_maps_key" type="text/javascript"></script>
  <!--  Include r360.js -->
  <script src="https://releases.route360.net/r360-js/latest.js"></script>

  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
    }
    
    #map {
      width: 100%;
      height: 100%;
    }
    
    #floating-panel {
      position: absolute; top: 10px; right: 10px; z-index: 5;
      background-color: #fff; text-align: center;
      font-family: 'Roboto', 'sans-serif'; padding: 10px;
      box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;
      border-radius: 2px;
    }
    
    .button {
      text-transform: uppercase;
      color: #fff;
      cursor: pointer;
      background-color: #70BC7A;
      margin-left: 8px;
      padding: 4px 6px;
      display: inline-block;
    }
    
    .button:hover {
      background-color: #479852;
    }
  </style>
</head>

<body>
  <!--geocoder-->
  <div id="floating-panel">
    <input id="address" type="textbox" value="">
    <div id="geocode" class="button" type="button">Geocode</div>
  </div>
  <!--  where the map will live  -->
  <div id="map"></div>
  
  <script>
    $(document).ready(function () {

      // Coordinates to center the map
      var myLatlng = new google.maps.LatLng(52.525595, 13.393085);

      // Other options for the map, pretty much selfexplanatory
      var mapOptions = {
        zoom: 10,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };

      // set up map
      var map = new google.maps.Map(document.getElementById("map"), mapOptions);
      // add marker to mpa center
      var marker = new google.maps.Marker({
        map: map//, position: myLatlng
      });

      var geocoder = new google.maps.Geocoder();

      $('#geocode').on('click', function () {
        geocodeAddress(geocoder, map);
      })

      //  polygon layer
      var colorPolygonLayer = r360.googleMapsPolygonLayer(map);

      function geocodeAddress(geocoder, resultsMap) {
        var address = document.getElementById('address').value;
        geocoder.geocode({ address: address, componentRestrictions: { country: 'DE' } }, function (results, status) {
          console.log(results,status)
          if (status === 'OK') {
            var location = results[0].geometry.location;
            var previousLocation = marker.getPosition()
            if (!previousLocation || (location.lat() !== previousLocation.lat()) && (location.lng() !== previousLocation.lng())) {
              // not the same location as last call
              console.log(location, marker.getPosition())
              marker.setPosition(location);
              showPolygons(location.lat(), location.lng());
            }
          } else {
            alert('Geocode was not successful for the following reason: ' + status);
          }
        });
      }

      function showPolygons(lat, lng) {

        var travelOptions = r360.travelOptions();
        // please contact us and request your own key
        travelOptions.setServiceKey('__APIPLACEHOLDER__');
        // set the service url for your area
        travelOptions.setServiceUrl('https://api.targomo.com/westcentraleurope/');
        travelOptions.addSource({ lat: lat, lng: lng });
        travelOptions.setTravelTimes([600, 1200, 1800]);
        travelOptions.setTravelType('bike');

        // call the service
        r360.PolygonService.getTravelTimePolygons(travelOptions,
          function (polygons) {
            colorPolygonLayer.update(polygons);
            colorPolygonLayer.fitMap();
          },
          function (status, message) {
            console.log("The targomo API is not available - double check your configuration options.");
          }
        );
      }

      // add listeners to redraw polygon on center and bounds changes
      google.maps.event.addListener(map, 'center_changed', function () {
        google.maps.event.addListenerOnce(map, 'idle', function () {
          colorPolygonLayer.draw();
        });
      });
      google.maps.event.addListener(map, 'bounds_changed', function () {
        google.maps.event.addListenerOnce(map, 'idle', function () {
          colorPolygonLayer.draw();
        });
      });
    });
  </script>
</body>

</html>