Using Google Maps Restricting Bounds API with ArcGIS JavaScript API?

Question

I am trying to make a map with ArcGIS 3.29, but in my map I need a bounding box. The ArcGIS API does not have a bounding box function, but the Google Maps API does. What I am having trouble with is using the ArcGIS map with the Google Maps bounding box. This is what I have so far:

var map;

require([
  "esri/map",
  "esri/geometry/Extent",
  "esri/SpatialReference",
  "esri/dijit/Search",
  "esri/layers/FeatureLayer",
  "esri/InfoTemplate",
  "esri/layers/ArcGISTiledMapServiceLayer",
  "dojo/domReady!"
],
  function(
    Map,
    Extent,   
    SpatialReference,
    Search,
    FeatureLayer,
    InfoTemplate,
    ArcGISTiledMapServiceLayer
  )
  {
    var boundingBox = new Extent(-122.3737, 37.454, -121.467, 37.9067, new SpatialReference({ wkid:4326 }));
    /*
    //THIS IS ARCGIS
    map = new Map("map", {
      extent: boundingBox,
      basemap: "streets",  //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
    });
*/ //THIS IS GOOGLE MAPS
    var acBounds = {
      north: 37.90668952,
      south: 37.45395007,
      west: -122.37374882,
      east: -121.46909034,
    };

    var alameda_county = {
      lat: 37.65,
      lng: -121.91
    };

    map_google = new google.maps.Map(document.getElementById('map'), {
     center: alameda_county,
     zoom: 13,
     restriction: {
       latLngBounds: acBounds,
       strictBounds: false,
     }
   });

Is there a way to use ArcGIS with Google Maps without breaking the code?

Answer 1

Try to just use ESRI's API, just check to see the extent of the map and move it back if its outside of the bounding box.

Try adding this:

var previousExtent = map.extent.getExtent();
map.on("extent-change", function(){
    let currentExtent = map.extent.getExtent();
    if (boundingBox.contains(map.extent.getCenter())){
    // Update previous extent
    previousExtent = map.extent.getExtent();
    }
  else {
  // if new extent is not in bounding box then reset to previous extent.
    map.setExtent(previousExtent);
  }


})

See my Fiddle: https://jsfiddle.net/kreza/42qvmc8u/59/

Edit: wrong fiddle posted, now fixed.