debugging - you have included the Google Maps API multiple times on this page - Google maps API and JQuery autocomplete error -
i'm using jquery ui autocomplete populate address search box suggested addressed, sourced google's geocoding service, this:
$(function () { $("#address").autocomplete({ //this bit uses geocoder fetch address values source: function (request, response) { geocoder.geocode({ 'address': request.term }, function (results, status) { response($.map(results, function (item) { return { label: item.formatted_address, value: item.formatted_address, latitude: item.geometry.location.lat(), longitude: item.geometry.location.lng() }; })); }); }, //this bit executed upon selection of address select: function (event, ui) { $("#latitude").val(ui.item.latitude); $("#longitude").val(ui.item.longitude); } }); }); first time load page, autocomplete doesn't work , error in javascript console:
warning: have included google maps api multiple times on page. may cause unexpected errors.
i've checked, , i'm calling api once (it isn't being included other included scripts)
strange things if put firebug breakpoint on first line of above code, don't error, , autocomplete works fine.
any ideas what's going on?
update: here's fuller version of main code page:
<script type="text/javascript"> document.createelement('header'); document.createelement('nav'); document.createelement('section'); document.createelement('article'); document.createelement('aside'); document.createelement('footer'); document.createelement('banner'); document.createelement('menu'); document.createelement('hgroup'); document.createelement('figure'); document.createelement('figcaption'); document.createelement('details'); document.createelement('details');</script> <!-- ie 6/7/8/9 fix script ends here--> <link href="/css/mobile-normalize.css" rel="stylesheet"> <link href="/css/mobile-styles.css" rel="stylesheet"> <link href="/css/mobile-tradegothic-condeighteen.css" rel="stylesheet" type="text/css"> <link href="/css/mobile-css.css" rel="stylesheet" type="text/css"> <link href="/css/mobile-responsive.css" rel="stylesheet" type="text/css"> <script src="/scripts/mobile/retina.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> <script src="/scripts/mobile/jquery.mobile-menu.js" type="text/javascript"></script> <script src="/scripts/mobile/main.js" type="text/javascript"></script> <script> $(document).ready(function () { // hide #back-top first $("#back-top").hide(); // fade in #back-top $(function () { $(window).scroll(function () { if ($(this).scrolltop() > 100) { $('#back-top').fadein(); } else { $('#back-top').fadeout(); } }); // scroll body 0px on click $('#back-top a').click(function () { $('body,html').animate({ scrolltop: 0 }, 800); return false; }); }); }); </script> </head> <body> <section> <!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>--> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script> <script src="/scripts/purl.js" type="text/javascript"></script> <script src="https://maps.googleapis.com/maps/api/js?key=aizasyb3qs6lp_ymhsc85fmfjhyat5d4x_iwxza&sensor=false" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { var suppliedaddress = $.url().param("address"); if (suppliedaddress && (suppliedaddress != "")) { $("#address").val($.url().param("address")); } var selectedclasses = $.url().param("classes"); if (selectedclasses != null) { var arrselectedclasses = selectedclasses.split(','); (i = 1; < 15; i++) { var chk = $("#filter_" + i); if (chk != null) { if ($.inarray(chk.val(), arrselectedclasses) > -1) { chk.attr('checked', 'checked'); } else { chk.removeattr('checked'); } } } } var geocoder = new google.maps.geocoder(); $(function () { $("#address").autocomplete({ //this bit uses geocoder fetch address values source: function (request, response) { geocoder.geocode({ 'address': request.term }, function (results, status) { response($.map(results, function (item) { return { label: item.formatted_address, value: item.formatted_address, latitude: item.geometry.location.lat(), longitude: item.geometry.location.lng() }; })); }); }, //this bit executed upon selection of address select: function (event, ui) { $("#latitude").val(ui.item.latitude); $("#longitude").val(ui.item.longitude); } }); }); $("form").submit(function () { var filter = []; (i = 1; < 15; i++) { var chk = $("#filter_" + i); if (chk != null && chk.is(':checked')) { filter.push(chk.val()); } } $("#selectedclasses").val(filter); }); }); </script> <form method="post" action="/global/en/find-a-class-list/" id="classlist"> <div class="aspnethidden"> <input type="hidden" name="__viewstate" id="__viewstate" value="/wepdwuentm4mq9kfgjmd2qwamypzbyczg9kfgjmd2qwagidd2qwagibd2qwamypzbycageqzgqwagiddxychgruzxh0bsfqbgvhc2ugzw50zxigysbsb2nhdglvbib0bybzzwfyy2hkzfenvcyrrddi6iyehyyk3wkijinatx9zdze8+djih4if" /> </div> <div class="search_form2"> <div class="search_field2"> <input name="ctl00$ctl00$ctl00$contentplaceholderdefault$maincontent$classlocatorlist_1$address" type="text" id="address" class="input12" /> <span> <input name="submit" type="submit" value="" class="retina-sprite" /></span> </div> <div class="filter_box"> <input name="filter" type="button" value="filter" class="filter" onclick="$('#filterpanel, #addresssearch, #clublist').toggle();" /> </div> <input id="latitude" type="hidden" name="lat" /> <input id="longitude" type="hidden" name="lon" /> </div> please enter location search </form> </section> </body> </html>
looks script:
<script src="/scripts/mobile/jquery.mobile-menu.js" type="text/javascript"></script> that's included before google maps api, somehow interfering google maps api, , if include script after including api, problem goes away. not sure why happens, suspect may order page elements or events being called or bound. here's how mobile menu script called (from main.js script that's being included):
$("body").mobile_menu({ menu: ['#main-nav ul', '#secondary-nav ul'], menu_width: 275, prepend_button_to: '#mobile-bar' });
/* mobile menu jquery plugin * * creates side nav bar mimics native ios nav slide drawer * * author: nick brewer * version: 0.5 * * requires: jquery */ var mobileapp = mobileapp || {}; ;(function(mobileapp,$){ function getandroidversion() { var user = window.navigator.useragent.tolowercase(); var android = user.indexof("android") != -1; if (android) { var android2 = user.indexof("android 2") != -1; var android4 = user.indexof("android 4") != -1; if (android2) { return false; } if (android4) { var pointversion = user.indexof("android 4.") != -1; if (pointversion) { var pver = parseint(user.substr(user.indexof("android 4.") + 10, 1), 10); if (pver >= 2) { return true; } } return false; } } else { return true; } } var goodbrowser = getandroidversion(); if (!goodbrowser) { $("html").addclass("old-android"); } var mobilemenu = function(elem, options){ this.elem = elem; this.$elem = $(elem); this.options = options; }; mobilemenu.prototype = { defaults: { page_id: 'build-menu-page', menu: '', // set array multiple menus menu_width: 260, menu_id: "mobile-nav", button_content: 'open menu', prepend_button_to: '', menu_bar: '' }, /* * initiate app. set layout. * * @return */ init: function(){ var _this = this; _this.config = $.extend({}, _this.defaults, _this.options); if($(_this.config.menu_id).length === 0){ this.setlayout(); } return _this; }, /* * clone site navigation , set mobile nav, set class on each new menu * * @return false if no menu option provided */ buildmenu: function(){ var _this = this; _this.config = $.extend({}, _this.defaults, _this.options); var menu = _this.config.menu, mobile_menu = $("#build-menu"), menu_collection = []; // menu , build mobile nav if(menu){ if($.isarray(menu)){ $(menu).each(function(i, e){ mobile_menu.append($(e).clone().addclass(_this.config.menu_id+"-"+i)); $(e).hide(); }); } else { mobile_menu.append($(menu).clone().addclass(_this.config.menu_id+"-0").removeattr("id")); $(menu).hide(); } } else { return false; } }, /* * set css new layout. * * @return void */ setcss: function(){ var _this = this; _this.config = $.extend({}, _this.defaults, _this.options); $("#build-menu-overlay").css({ position: "absolute", top: 0, bottom: 0, right: 0, left: 0, "z-index": 99, opacity: 0, display: "none" }); $("html,body").css("height","100%"); if(_this.config.menu_bar){ if (goodbrowser) { $(_this.config.menu_bar).css({ position: "fixed" }); } else { $(_this.config.menu_bar).css({ position: "absolute" }); } } //$("<style />").appendto("head").html('#'+_this.config.page_id+' { position: relative; min-height: 100% }'); //$("style").append('html.build-menu-open #'+_this.config.page_id+' { position: fixed; overflow: hidden; width: 100%; left: 0; top: 0; bottom: 0 }'); }, /* * set layout, build menu, set css. set event handler menu. * * @return void */ setlayout: function(){ var _this = this; _this.config = $.extend({}, _this.defaults, _this.options); // if prepend_button_to not set custom, prepend page setting if(_this.config.prepend_button_to == ''){ var prepend_button_to = "#"+_this.config.page_id; } else { var prepend_button_to = _this.config.prepend_button_to; } // set html framework _this.$elem.wrapinner('<div id="'+_this.config.page_id+'" />').find("#"+_this.config.page_id).before('<div id="build-menu" />'); $(prepend_button_to).prepend('<a href="#" id="build-menu-button">'+_this.config.button_content+'</a>'); $("#"+_this.config.page_id).prepend('<div id="build-menu-overlay" />'); this.buildmenu(); this.setcss(); var element = document.getelementbyid(_this.config.page_id); element.addeventlistener("otransitionend", remove_animation_class,false); element.addeventlistener("transitionend", remove_animation_class,false); element.addeventlistener("webkittransitionend", remove_animation_class,false); element.addeventlistener("mstransitionend", remove_animation_class,false); function remove_animation_class(){ if($("html").hasclass("build-menu-close")){ $("html").removeclass("build-menu-animating"); } } // event handler menu button $("#build-menu-button, #build-menu-overlay").on("click", function(e){ e.preventdefault(); var html = $("html"); var page = $("#"+_this.config.page_id); var overlay = $("#build-menu-overlay"); html.addclass("build-menu-animating"); if(html.hasclass("build-menu-open")){ html.removeclass("build-menu-open"); html.addclass("build-menu-close"); if (goodbrowser) { page.css({ "-webkit-transform": "translatex(0px)", "-moz-transform": "translatex(0px)", "-o-transform": "translatex(0px)", "-ms-transform": "translatex(0px)", "transform": "translatex(0px)" }); } else { page.css("left", "0px"); } overlay.fadeto("slow",0, function(){ $(this).css("visibility", "hidden"); }); } else { html.addclass("build-menu-open"); html.removeclass("build-menu-close"); if (goodbrowser) { page.css({ "-webkit-transform": "translatex("+_this.config.menu_width+"px"+")", "-moz-transform": "translatex("+_this.config.menu_width+"px"+")", "-o-transform": "translatex("+_this.config.menu_width+"px"+")", "-ms-transform": "translatex("+_this.config.menu_width+"px"+")", "transform": "translatex("+_this.config.menu_width+"px"+")" }); } else { page.css("left", _this.config.menu_width+"px"); } overlay.css("visibility", "visible").fadeto("slow",0.5); } }); } }; mobilemenu.defaults = mobilemenu.prototype.defaults; $.fn.mobile_menu = function(options) { return this.each(function() { new mobilemenu(this, options).init(); }); }; mobileapp.mobilemenu = mobilemenu; })(mobileapp,jquery);
Comments
Post a Comment