Uncaught TypeError: $(…).dialog is not a function

Question

Whenever I am calling markicons() function for opening the google map it is showing Uncaught TypeError: .dialog is not a function.I am not getting where is the error.Please help me.I am trying from last 3 hours but not getting any solution.

 <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

The problem is that you're loading jQuery twice:

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

When jQuery-UI is loaded, it uses the first version of jQuery. But when your script runs, it's after the second version of jQuery is loaded. So its $ variable refers to the second jQuery definition, but jQuery-UI updated the first jQuery definition.

If you really need to load two versions of jQuery, you'll need to use jQuery.noConflict() to resolve which version you use when.