javascript - Map does not load centered when doing first search -
can tell me why map not load centered first time loads? works fine when second search, never loads correctly first time.
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" var directionsdisplay; var directionsservice; var geocoder; var currentaddress = 'placeholder'; var tabcount = 0; var altroutecount = 0; var savedroutes; $(document).ready(function(){ $('#message-container').hide (0); document.getelementbyid('sidebar').classname = 'sidebar-hidden'; // keeps form pointab refreshing page. $('#pointab').on('submit', function (e) { e.preventdefault(); }); $('#tabs').tab(); $('#tabs a').click( function (e) { e.preventdefault(); $(this).tab('show'); }); $('#sidebar #togglebtn').click(togglesidebar); $('#deletes').click(deletetabs); $('#routechange').click(function () { var index = $('#routechange').data('route'); index = (index+1)%altroutecount; deletetabs(); printroute (savedroutes, index); $('#routechange').data('route', index); }); // call google direction directionsservice = new google.maps.directionsservice(); directionsdisplay = new google.maps.directionsrenderer(); // google autocomplete var start_input = document.getelementbyid('start'); var end_input = document.getelementbyid('end'); var bounds = new google.maps.latlngbounds( new google.maps.latlng(40.532980, -74.118551), new google.maps.latlng(40.895218, -73.735403) ); // bounds right restrict country var start_autocomplete = new google.maps.places.autocomplete((start_input),{ // bounds: {sw:new google.maps.latlng(40.895218, -73.735403), ne:new google.maps.latlng(40.532980, -74.118551)}, componentrestrictions: {country: 'us'} } ); var end_autocomplete = new google.maps.places.autocomplete((end_input),{ // bounds: {sw:new google.maps.latlng(40.895218, -73.735403), ne:new google.maps.latlng(40.532980, -74.118551)}, componentrestrictions: {country: 'us'} } ); start_autocomplete.setbounds(bounds); end_autocomplete.setbounds(bounds); // initial map function initialize() { var map; var pos; // default pos map center of manhattan if(!pos){ pos = new google.maps.latlng(40.784148400000000000, -73.966140699999980000); } var mapoptions = { zoom: 13 }; getaddress(); // draw map map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions); map.setcenter(pos); // google direction text route directionsdisplay.setmap(map); directionsdisplay.setpanel(document.getelementbyid('directions-panel')); //needed resize maps google.maps.event.adddomlistener (map, 'idle', function(){ google.maps.event.trigger (map, 'resize'); }); } // load map google.maps.event.adddomlistener(window, 'load', initialize); }); /************************************************ site navigational elements ************************************************/ function togglesidebar() { var state = $('#sidebar').data('toggle'); if (state == 'hidden') { document.getelementbyid('sidebar').classname = "sidebar-appear"; $('#sidebar').data('toggle', 'shown'); } else if (state == 'shown') { document.getelementbyid('sidebar').classname = "sidebar-hidden"; $('#sidebar').data('toggle', 'hidden'); } }; function nextslide() { $('#navcarousel').carousel('next'); }; function prevslide(){ $('#navcarousel').carousel('prev'); }; /************************************************ ui messages ************************************************/ function hidemessage(){ $('#init-message').hide(1000); }; function pushmessage (messagetype, message) { $('#message-container').hide (0); if (messagetype == 'error') { document.getelementbyid('message-container').classname = "alert alert-danger"; document.getelementbyid('icon').classname = "glyphicon glyphicon-remove-sign"; } else if (messagetype == 'success') { document.getelementbyid('message-container').classname = "alert alert-success"; document.getelementbyid('icon').classname = "glyphicon glyphicon-ok-sign"; } else if (messagetype == 'warn') { document.getelementbyid('message-container').classname = "alert alert-warning"; document.getelementbyid('icon').classname = "glyphicon glyphicon-exclaimation-sign"; } else { //congrats. senpai has noticed ability break shit. rejoice. console.error ("please check messagetype.") } $('#message').text(message); $('#message-container').show (1000); }; /************************************************ information retrieval ************************************************/ // current location button function function getaddress(callback){ geocoder = new google.maps.geocoder(); // if geolocation available, position if(navigator.geolocation) { navigator.geolocation.getcurrentposition(successcallback, errorcallback, {timeout:60000,maximumage:60000}); } //else, browser doesn't support geolocaiton else { pushmessage ('error', 'your browser doesn\'t support geolocation.'); console.log("browser doesn't support geolocaiton"); } // optional callback if (callback){ callback(); } }; function successcallback(position){ var pos = new google.maps.latlng(position.coords.latitude, position.coords.longitude); //reverse geocoding current location geocoder.geocode({'latlng': pos}, function(results, status) { if (status == google.maps.geocoderstatus.ok) { if (results.length != 0) { currentaddress = results[0].formatted_address; } else { alert('no results found'); } } else { alert('geocoder failed due to: ' + status); } }); }; function errorcallback(){ }; filladdress = function() { if (currentaddress != 'placeholder') { $('#start').val (currentaddress); pushmessage ('success', "got current location!"); } else { pushmessage ('warn', 'please share location use feature.'); } }; // set route , request direction result function calcroute() { var start = document.getelementbyid('start').value; var end = document.getelementbyid('end').value; if (start == '' && end == '') { pushmessage ('error', "please fill in current location , destination."); start=''; end=''; return; } else if (start == '') { pushmessage ('error', "please fill in current location."); start=''; end=''; return; } else if (end == '') { pushmessage ('error', "please fill in destination."); start=''; end=''; return; } else { start += ' new york city'; end += ' new york city'; } var request = { origin: start, destination: end, provideroutealternatives: true, travelmode: google.maps.travelmode.transit }; deletetabs(); directionsservice.route(request, function(response, status) { if (status == google.maps.directionsstatus.ok) { directionsdisplay.setdirections(response); altroutecount = response.routes.length; savedroutes = response; printroute (savedroutes, 0); //move next slide when directions have been retrieved. $('#navcarousel').carousel('next'); //disable loading icon pseudocode. //$('#loadingicon').hide(300); savedroutes = response; } else { //if directionsstatus.not_found //or directionsstatus.zero_results pushmessage ('error', 'no directions found.'); } }); }; function printroute (routeobj, routeno) { // route object var thisroute = routeobj.routes[routeno].legs[0]; (var = 0; < thisroute.steps.length; i++) { // find possible transit if (typeof thisroute.steps[i].transit != 'undefined' && thisroute.steps[i].transit.line.vehicle.type == "subway") { traintab (thisroute.steps[i]); } } } //get details maps api json object function gettransitdetail(obj, tabno){ var parent=''; if (tabno) { parent='div#tab'+tabno+' '; } $(parent+'#train').text(obj.transit.line.short_name + " train"); $(parent+'#train-stop-depart').text(obj.transit.departure_stop.name); $(parent+'#train-stop-end').text(obj.transit.arrival_stop.name); $(parent+'#num-stop').text(obj.transit.num_stops + " stops"); $(parent+'#arrival_time').text(obj.transit.arrival_time.text); $(parent+'#departure_time').text(obj.transit.departure_time.text); $(parent+'#distance').text(obj.distance.text); $(parent+'#duration').text(obj.duration.text); }; // current time device function gettime(){ var currentdate = new date(); var datetime = currentdate.getdate() + "/" + (currentdate.getmonth()+1) + "/" + currentdate.getfullyear() + " @ " + currentdate.gethours() + ":" + currentdate.getminutes() + ":" + currentdate.getseconds(); return datetime; }; function makenewtab() { var prevtab = 'tab' + tabcount; tabcount++; var newtab = 'tab' + tabcount; console.log ('new tab.'); //adds tab nav bar $('#routechange').before('<li><a href="#'+newtab+'" data-toggle="tab">tag label</a></li>'); //adds contents of tab $('div.tab-content #'+prevtab).after('<div id="'+newtab+'"></div>'); $('#'+newtab).addclass("tab-pane"); }; function deletetabs() { var thistab; while (tabcount >= 1) { thistab = 'tab' + tabcount; //remove tab nav bar $('ul#tabs li a[href="#'+thistab+'"]').remove(); //remove contents of tab $('#'+thistab).remove(); tabcount--; } tabcount = 1; $('#tabs a:first').tab('show'); }; function traintab (obj) { makenewtab(); $('ul#tabs li a[href="#tab'+tabcount+'"]').text(obj.transit.line.short_name); $('#tab'+tabcount).append ( '<div id="station-info" class="col-xs-11 col-xs-height col-sm-12 col-sm-height">\ <p>station info:</p>\ <p id="train"></p>\ <p id="train-stop-depart"></p>\ <p id="train-stop-end"></p>\ <p id="num-stop"></p>\ <p id="arrival_time"></p>\ <p id="departure_time"></p>\ <p id="distance"></p>\ <p id="duration"></p>\ <!-- <%= link_to "an article", @station%> -->\ </div>'); gettransitdetail (obj, tabcount); }; is because of order of code? tried playing around order , not find solution. appreciated. in advance!
Comments
Post a Comment