未捕获的TypeError：$（...）。modal不是函数（...）

Question

我一直在这里关注这个问题bootstrap modal is not a function 并试图把jQuery.noConflict（）;在代码中，但仍然没有运气。 如果有人遇到类似的问题，请帮助我。我已经包含了整个代码，但要关注的部分是这个。这是一个图像 enter image description here

 google.maps.event.addListener(drawingManager, "overlaycomplete", function (event) {
    overlayDragListener(event.overlay);
    $('#vertices').val(event.overlay.getPath().getArray());
    $('#myModal').modal('show');
    $('#areaPolygon').val((0.000247105 * google.maps.geometry.spherical.computeArea(event.overlay.getPath())).toFixed(2));
    $('#cropYear').val(new Date().getFullYear());
    $.post('Producer.aspx.cs/GetCounty', { field1: $('#vertices').val },
    function (returnedData) {
        $('#countyselected').val(returnedData);
    });

});

var map;
var drawingManager;
var shapes = [];

function initMap() {
  var myLatlng = new google.maps.LatLng(51.51686166794058, 3.5945892333984375);
  var mapOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: false
  }
  var infoWindow = new google.maps.InfoWindow({
    map: map
  });
  /*
   // Try HTML5 geolocation.
   if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition(function (position) {
           var pos = {
               lat: position.coords.latitude,
               lng: position.coords.longitude
           };
           infoWindow.setPosition(pos);
           infoWindow.setContent('Location found.');
           map.setCenter(pos);
       }, function () {
           handleLocationError(true, infoWindow, map.getCenter());
       });
   } else {
       // Browser doesn't support Geolocation
       handleLocationError(false, infoWindow, map.getCenter());
   }
   */
  //Getting map DOM element
  var mapElement = document.getElementById('map_canvas');

  map = new google.maps.Map(map_canvas, mapOptions);

  var iconWhite = {
    url: "/WebContent/Images/WhiteFlag.JPG", // url
    scaledSize: new google.maps.Size(35, 40), // scaled size
    origin: new google.maps.Point(0, 0), // origin
    anchor: new google.maps.Point(0, 0) // anchor
  };
  var iconRed = {
    url: "/WebContent/Images/RedFlag.JPG", // url
    scaledSize: new google.maps.Size(35, 40), // scaled size
    origin: new google.maps.Point(0, 0), // origin
    anchor: new google.maps.Point(0, 0) // anchor
  };
  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    title: 'Hello World!',
    icon: iconRed
  });

  drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.POLYGON,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: ['marker', 'polygon']
    },
    polygonOptions: {
      editable: true,
      draggable: true,
      strokecolor: '#E9967A'
    }
  });
  list = document.getElementsByTagName('SELECT')[0];
  drawingManager.setMap(map);
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(list);

  google.maps.event.addDomListener(list, 'change', function() {
    drawingManager.setOptions({
      markerOptions: {
        icon: this.value
      }
    })
  });
  google.maps.event.trigger(list, 'change', {})



  var customControlDiv = document.createElement('div');
  var customControl = new CustomControl(customControlDiv, map, 'red');
  var customControlDiv1 = document.createElement('div');
  var customControl1 = new CustomControl(customControlDiv1, map, 'green');
  var customControlDiv2 = document.createElement('div');
  var customControl2 = new CustomControl(customControlDiv2, map, 'teal');
  var customControlDiv3 = document.createElement('div');
  var customControl3 = new CustomControl(customControlDiv3, map, 'black');
  var customControlDiv4 = document.createElement('div');
  var customControl4 = new CustomControl(customControlDiv4, map, 'yellow');

  var customControlWrapperMenu = document.getElementById('wrapperMenu');
  var customSpaceDiv = document.getElementById('spaceDiv');
  var bs = document.getElementById('bs-example-collapse-1');

  customControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(customControlDiv);
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(customControlDiv1);
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(customControlDiv2);
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(customControlDiv3);
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(customControlDiv4);
  map.controls[google.maps.ControlPosition.LEFT].push(customSpaceDiv);
  map.controls[google.maps.ControlPosition.LEFT].push(customControlWrapperMenu);



  // Add a listener for creating new shape event.
  google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) {
    var newShape = event.overlay;
    newShape.type = event.type;
    shapes.push(newShape);
    if (drawingManager.getDrawingMode()) {
      drawingManager.setDrawingMode(null);
    }

  });

  // add a listener for the drawing mode change event, delete any existing polygons
  google.maps.event.addListener(drawingManager, "drawingmode_changed", function() {
    if (drawingManager.getDrawingMode() != null && drawingManager.getDrawingMode() != 'marker') {
      for (var i = 0; i < shapes.length; i++) {
        shapes[i].setMap(null);
      }
      shapes = [];
    }
  });



  // Add a listener for the "drag" event.
  google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) {
    overlayDragListener(event.overlay);
    $('#vertices').val(event.overlay.getPath().getArray());
    $('#myModal').modal('show');
    $('#areaPolygon').val((0.000247105 * google.maps.geometry.spherical.computeArea(event.overlay.getPath())).toFixed(2));
    $('#cropYear').val(new Date().getFullYear());
    $.post('Producer.aspx.cs/GetCounty', {
        field1: $('#vertices').val
      },
      function(returnedData) {
        $('#countyselected').val(returnedData);
      });

  });
  // Create the search box and link it to the UI element.
  var input = document.getElementById('pac-input');
  var searchBox = new google.maps.places.SearchBox(input);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  // Bias the SearchBox results towards current map's viewport.
  map.addListener('bounds_changed', function() {
    searchBox.setBounds(map.getBounds());
  });
  var markers = [];
  searchBox.addListener('places_changed', function() {
    var places = searchBox.getPlaces();

    if (places.length == 0) {
      return;
    }

    // Clear out the old markers.
    markers.forEach(function(marker) {
      marker.setMap(null);
    });
    markers = [];

    // For each place, get the icon, name and location.
    var bounds = new google.maps.LatLngBounds();
    places.forEach(function(place) {
      if (!place.geometry) {
        console.log("Returned place contains no geometry");
        return;
      }
      var icon = {
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25)
      };

      // Create a marker for each place.
      markers.push(new google.maps.Marker({
        map: map,
        icon: icon,
        title: place.name,
        position: place.geometry.location
      }));

      if (place.geometry.viewport) {
        // Only geocodes have viewport.
        bounds.union(place.geometry.viewport);
      } else {
        bounds.extend(place.geometry.location);
      }
    });
    map.fitBounds(bounds);
  });
}


function overlayDragListener(overlay) {
  google.maps.event.addListener(overlay.getPath(), 'set_at', function(event) {
    $('#vertices').val(overlay.getPath().getArray());
  });
  google.maps.event.addListener(overlay.getPath(), 'insert_at', function(event) {
    $('#vertices').val(overlay.getPath().getArray());
  });
}

function controlMarkerDiv() {
  var controlUI2 = document.getElementById('areaMarker');
  google.maps.event.addDomListener(controlUI2, 'click', function() {
    var iconRed = {
      url: "/WebContent/Images/RedFlag.JPG", // url
      scaledSize: new google.maps.Size(35, 40), // scaled size
      origin: new google.maps.Point(0, 0), // origin
      anchor: new google.maps.Point(0, 0) // anchor
    };
    drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
    drawingManager.setOptions({
      drawingControl: true,
      icon: iconRed
    });

  });

}

function controlAreaRemover() {

  var controlUI1 = document.getElementById('areaRemover');
  google.maps.event.addListener(controlUI1, 'click', function() {
    if (drawingManager.getDrawingMode() != null && drawingManager.getDrawingMode() != 'marker') {
      for (var i = 0; i < shapes.length; i++) {
        shapes[i].setMap(null);
      }
      shapes = [];
    }
  });
}

function controlFlagDiv() {
  var controlUI = document.getElementById('trying');
  // Setup the click event listeners
  google.maps.event.addDomListener(controlUI, 'click', function() {
    var iconRed = {
      url: "/WebContent/Images/RedFlag.JPG", // url
      scaledSize: new google.maps.Size(35, 40), // scaled size
      origin: new google.maps.Point(0, 0), // origin
      anchor: new google.maps.Point(0, 0) // anchor
    };
    drawingManager.setDrawingMode(google.maps.drawing.OverlayType.marker);


  });
}

function CustomdivMenuControl(controlDiv, map, flag) {

  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = '#fff';
  controlUI.style.border = '2px solid #fff';
  controlUI.style.borderRadius = '3px';
  controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlUI.style.cursor = 'pointer';
  controlUI.style.marginBottom = '22px';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to recenter the map';
  controlDiv.appendChild(controlUI);
  var controlText = document.createElement('div');
  controlText.style.color = 'rgb(25,25,25)';
  controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlText.style.fontSize = '16px';
  controlText.style.lineHeight = '38px';
  controlText.style.paddingLeft = '5px';
  controlText.style.paddingRight = '5px';
  controlText.innerHTML = 'Center Map';
  controlUI.appendChild(controlText);
  controlUI.addEventListener('click', function() {
    $('#myModal').modal('show');
    $('#areaPolygon').val((0.000247105 * google.maps.geometry.spherical.computeArea(event.overlay.getPath())).toFixed(2));
    $('#cropYear').val(new Date().getFullYear());

  });
}

function CustomControl(controlDiv, map, flag) {

  // Set CSS for the control border
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = '#ffffff';
  controlUI.style.borderStyle = 'solid';
  controlUI.style.borderWidth = '1px';
  controlUI.style.borderColor = '#ccc';
  controlUI.style.height = '25px';
  controlUI.style.width = '25px';
  controlUI.style.marginTop = '5px';
  controlUI.style.marginLeft = '-6px';
  controlUI.style.paddingTop = '1px';
  controlUI.style.cursor = 'flag';
  controlUI.style.textAlign = 'center';
  if (flag == 'red')
    controlUI.style.backgroundImage = "url('/WebContent/Images/RedFlag.JPG')";
  if (flag == 'green')
    controlUI.style.backgroundImage = "url('/WebContent/Images/GreenFlag.JPG')";
  if (flag == 'teal')
    controlUI.style.backgroundImage = "url('/WebContent/Images/TealFlag.JPG')";
  if (flag == 'black')
    controlUI.style.backgroundImage = "url('/WebContent/Images/BlackFlag.JPG')";
  if (flag == 'yellow')
    controlUI.style.backgroundImage = "url('/WebContent/Images/YellowFlag.JPG')";
  controlUI.style.backgroundSize = '20px';
  controlUI.title = 'Click to set the map to Home';
  controlDiv.appendChild(controlUI);



  // Setup the click event listeners
  google.maps.event.addDomListener(controlUI, 'click', function() {
    var iconRed = {
      url: "/WebContent/Images/RedFlag.JPG", // url
      scaledSize: new google.maps.Size(35, 40), // scaled size
      origin: new google.maps.Point(0, 0), // origin
      anchor: new google.maps.Point(0, 0) // anchor
    };
    drawingManager.setDrawingMode(google.maps.drawing.OverlayType.MARKER);
    drawingManager.setOptions({
      markerOptions: {
        icon: iconRed
      }
    });


  });
}

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Producer.aspx.cs" Inherits="WebContent_Producer" %>

  <!DOCTYPE html>
  <html>

  <head>

    <title>Geolocation</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 70%;
      }
    </style>







    <style type="text/css">
      #map_canvas {
        width: 400px;
        height: 300px;
      }
      .contextmenu {
        visibility: hidden;
        background: #ffffff;
        border: 1px solid #8888FF;
        z-index: 10;
        position: relative;
        width: 140px;
      }
      .contextmenu div {
        padding-left: 5px
      }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="../CSS/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/Register.css">
    <link rel="stylesheet" type="text/css" href="css/mapStyling.css">
    <link href='css/custom.css' rel='stylesheet' type='text/css'>
    <link href='css/registerCrop.css' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="../javascript/bootstrap.js"></script>
    <script type="text/javascript" src="/WebContent/Javascript/map.js"></script>
    <!-- Website Font style -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
    <!-- Google Fonts -->
    <link href='https://fonts.googleapis.com/css?family=Passion+One' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="css/landingPage.css">


  </head>
  <script>
    $.get("header.html", function(data) {
      $("#header").replaceWith(data);
    });
    $.get("RegisterCrop.aspx", function(data) {
      $("#modalDiv").replaceWith(data);
    });
  </script>

  <body>
    <style>
      #wrapper {
        position: relative;
      }
      #SearchContainer {
        position: absolute;
      }
      #map_canvas {
        position: relative;
      }
    </style>


    <!-- /.header  -->
    <div id="header">
    </div>
    <div id="spaceDiv" style="height:120px;width:50px;">
    </div>

    <!-- Brand and toggle get grouped for better mobile display -->

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class=" breadcrumb" id="wrapperMenu" style="padding-left:50px;height:150px;width:250px;">
      <div class="row">
        <button type="button" id="menuButton" class="bt btn-default checkbox-inline" data-toggle="collapse" data-target="#bs-example-collapse-1" aria-expanded="false" style="height:20px;width:50px;">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div class="collapse dropdown-collapse" id="bs-example-collapse-1">
        <div class="row" id="areaMarker">
          <button type="button" class="btn btn-default breadcrumb " style="padding-left:20px;">Mark Your Area</button>
        </div>
        <div class="row" id="areaRemover">
          <button type="button" class="btn btn-default breadcrumb " style="padding-left:20px;">Remove Your Area</button>
        </div>
        <div class="row">
          <div class="dropdown" id="flags">
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
              <span class="caret"></span>
            </button>

            <select style="border:5px solid red">
              <option value="http://maps.gstatic.com/mapfiles/markers2/markerA.png">A</option>
              <option value="http://maps.gstatic.com/mapfiles/markers2/markerB.png">B</option>
              <option value="http://maps.gstatic.com/mapfiles/markers2/markerC.png">C</option>
              <option value="http://maps.gstatic.com/mapfiles/markers2/markerD.png">D</option>
              <option value="http://maps.gstatic.com/mapfiles/markers2/markerE.png">E</option>
            </select>

          </div>
          <button type="button" class="dropdown-submenu pull-right dropdown-toggle " data-toggle="dropdown"><span class="caret"></span>
          </button>
          <ul class="dropdown-menu pull-right  alert-warning">
            <li>
              <button type="button" id="redFlag" class="btn btn-default  ">Set Flag Red</button>
            </li>
            <li>
              <button type="button" id="yellowFlag" class="btn btn-default  ">Set Flag Bright Yellow</button>
            </li>
            <li>
              <button type="button" id="whiteFlag" class="btn btn-default  ">Set Flag White</button>
            </li>
            <li>
              <button type="button" id="tealFlag" class="btn btn-default  ">Set Flag Teal</button>
            </li>
            <li>
              <button type="button" id="greenFlag" class="btn btn-default  ">Set Flag Bright Green</button>
            </li>
            <li>
              <button type="button" id="blackFlag" class="btn btn-default  ">Set Flag Black</button>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div id="wrapper" style="height:677px;width:1923px;top:53px">
      <div id="modalDiv"></div>
      <div id="map_canvas" style="height:677px;width:1903px;"></div>
      <div id="SearchContainer" contextmenu="mc-static2mapcontainer panel ng-scope" style="height:50px;width:500px;position:absolute">
        <input id="pac-input" class="controls" type="text" placeholder="Search Box">
        <input id="Text1" class="controls" type="text" placeholder="Search Box">
      </div>
    </div>
    <div id="footer">
    </div>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD7FTNE22Wl6S6DTQF83sTZTqbFFPzEkmU&libraries=drawing,places,geometry&callback=initMap">
      google.maps.event.addDomListener(window, 'load', initMap);
    </script>
    <script>
      $.get("footer.html", function(data) {
        $("#footer").replaceWith(data);
      });
    </script>
  </body>

  </html>