javascript - Uncaught TypeError: $(...).modal is not a function(…) -
i have been following question here bootstrap modal not function , did try put jquery.noconflict(); in code still no luck. please me if faced similar issue. have included whole code part focus this.here image 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 listener 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 listener drawing mode change event, delete existing polygons google.maps.event.addlistener(drawingmanager, "drawingmode_changed", function() { if (drawingmanager.getdrawingmode() != null && drawingmanager.getdrawingmode() != 'marker') { (var = 0; < shapes.length; i++) { shapes[i].setmap(null); } shapes = []; } }); // add listener "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 search box , link 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 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 old markers. markers.foreach(function(marker) { marker.setmap(null); }); markers = []; // each place, icon, name , 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 marker each place. markers.push(new google.maps.marker({ map: map, icon: icon, title: place.name, position: place.geometry.location })); if (place.geometry.viewport) { // 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') { (var = 0; < shapes.length; i++) { shapes[i].setmap(null); } shapes = []; } }); } function controlflagdiv() { var controlui = document.getelementbyid('trying'); // setup 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 recenter 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 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 set map home'; controldiv.appendchild(controlui); // setup 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 , toggle grouped better mobile display --> <!-- collect nav links, forms, , other content 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 area</button> </div> <div class="row" id="arearemover"> <button type="button" class="btn btn-default breadcrumb " style="padding-left:20px;">remove 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>
Comments
Post a Comment