Uncaught TypeError: $ (...). Dialog не является функцией

Question

Когда я вызываю функцию markicons() для открытия карты google, она показывает Uncaught TypeError: .dialog не является функцией. Я не получаю, где находится ошибка. Пожалуйста, помогите мне. Я пытаюсь с последних 3 часов, но не получаю никакого решения.

<link href="../PurpleStyle/css/style.css" rel="stylesheet" /> 
<script src="../assets/js/jquery-2.0.3.min.js"></script> 
    <script src="../assets/js/jquery-ui-1.10.3.full.min.js"></script> 
<link href="../assets/css/jquery-ui-1.10.3.full.min.css" rel="stylesheet"  /> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false"></script> 
    <script src="../PurpleStyle/js/jquery.js" type="text/javascript"></script> 
<script type="text/javascript">  
var map = null; var infowindow; 
    function InitializeMap() { 
     debugger; 
     var latlng = new google.maps.LatLng(0.0, 0.0); 
     if (!map) { 
      var myOptions = { 
       zoom: 14, 
       center: latlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      map = new google.maps.Map(document.getElementById('map'), myOptions); 
     } 
     else { 
      map.setCenter(latlng); 
     } 
    } 
    function markicons(listString) { 

     debugger; 
     InitializeMap(); 
     var locations = []; 
     var ltlng = listString.split('~'); 


     for (var i = 0; i < ltlng.length; i++) { 
      var loc = ltlng[i].split(",") 
      var lat = parseFloat(loc[0]) 
      var lng = parseFloat(loc[1]) 
      locations.push(new google.maps.LatLng(lat, lng)); 
     } 
     debugger; 
     map.setCenter(locations[0]); 
     for (var i = 0; i < locations.length; i++) { 
      marker = new google.maps.Marker({ 
       map: map, 
       position: locations[i] 
      }); 

      (function (i, marker) { 

       google.maps.event.addListener(marker, 'click', function() { 

        if (!infowindow) { 
         infowindow = new google.maps.InfoWindow(); 
        } 

        infowindow.setContent("Message" + i); 

        infowindow.open(map, marker); 

       }); 

      })(i, marker); 

     } 
     var dil = $("#map").dialog({ 
      autoOpen: false, 
      minHeight: 500, 
      minWidth: 600, 
      height: 500, 
      width: 600, 
      closeOnEscape: true, 
      modal: true, 
      buttons: { 
       "CLOSE": function() { 
        $(this).dialog("close"); 
        //$("#map").style.display = "none"; 
       } 
      } 
     }); 
     dil.dialog('open'); 
    } 
    </script> 

Answer 1

Проблема заключается в том, что вы загружаете JQuery дважды:

<script src="../assets/js/jquery-2.0.3.min.js"></script> 
<script src="../PurpleStyle/js/jquery.js" type="text/javascript"></script> 

Когда JQuery-UI загружается, он использует первую версию JQuery. Но когда ваш скрипт запускается, это происходит после загрузки второй версии jQuery. Поэтому его переменная $ ссылается на второе определение jQuery, но jQuery-UI обновил первое определение jQuery.

Если вам действительно нужно загрузить две версии jQuery, вам нужно будет использовать jQuery.noConflict(), чтобы решить, какую версию вы используете.