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

Popular posts from this blog

shopping cart - Page redirect not working PHP -

php - How to modify a menu to show sub-menus -

python - Installing PyDev in eclipse is failed -