javascript - Directions map not centering/zooming properly -

update: have static solution working right now, i'd still see if can improved upon. of code same aside on click event switching views.

$(document).on('click', '.mobile-toggle a', function (e) {     e.preventdefault();      if (!$(this).hasclass("active")) {         var target = $(this).attr("data-target");          $("#results > div, .mobile-toggle a").removeclass("active");         $(this).addclass("active");         $("#" + target).addclass("active");     }      var center = dmap.getcenter();     google.maps.event.trigger(dmap, 'resize');     dmap.setcenter(center);     dmap.setzoom(12); }); 

this gets map centered properly, good. zoom fine, doesn't fit route. route big fit, , other times map should zoomed in little bit more. there way determine zoom value should used based on route? i'm supposed happen on own, doesn't seem case time around.

original post below.

---

i've read bunch of questions/answers this, none of provided answers seem i'm looking for. i'll try explain best can.

i'm writing store locator. on desktop, looks fine. mobile run difficulty because of changing views (showing/hiding divs). i've read, looks lot of people run problem map created in hidden div , it's displayed incorrectly (e.g. map occupies top left area of container) when div shown.

the layout of store locator follows - after search location, see list view of results. when click 'map view' tab top, see google maps view of nearby stores on it. works fine. if select store , click 'get directions' list view, see list view of directions store. likewise, if select store , click 'get directions' while in map view, see map of directions. works fine in both scenarios.

the issue when in list view, click directions, , switch on list view of directions map view. map gets drawn correct route , fills div should - however, route in top left of map, , map zoomed way out. example, if route in philadelphia area, map zoomed out center around bermuda. , it's same spot in bermuda every time.

here's relevant code button press between list , map views.

$(document).on('click', '.mobile-toggle a', function (e) {     e.preventdefault();      if (!(this).hasclass("active")) {         var target = $(this).attr("data-target");          $("#results > div, .mobile-toggle a").removeclass("active");         $(this).addclass("active");         $("#" + target).addclass("active");     }     google.maps.event.trigger(dmap, 'resize'); } 

dmap global variable containing directions map, , map has these 2 listeners assigned when created.

google.maps.event.addlistener(dmap, 'idle', function () {     google.maps.event.trigger(dmap, 'resize');     dmapcenter = dmap.getcenter(); }); google.maps.event.adddomlistener(window, 'resize', function () {     dmap.setcenter(dmapcenter); }); 

this redraws map , makes sure center stays same while window resized, map still isn't focused on route location location b. feel solution can't far i've tried (based on i've read), can't seem working.

sorry wall of text. if there's other code think potentially answer question, please let me know. thanks!

edit: requested, here's full code draws map.

function calcroute(start, dest) {     var directionsdisplay;     var directionsservice = new google.maps.directionsservice();      directionsdisplay = new google.maps.directionsrenderer();     var mapoptions = {         zoom: 12,         center: new google.maps.latlng(lat, lng)     };     var map = new google.maps.map(document.getelementbyid('directions-map'), mapoptions);     directionsdisplay.setmap(map);     directionsdisplay.setpanel(document.getelementbyid('directions'));      var request = {         origin: start,         destination: dest,         travelmode: google.maps.travelmode.driving     };     directionsservice.route(request, function (response, status) {         if (status == google.maps.directionsstatus.ok) {             directionsdisplay.setdirections(response);         }     });      dmap = map;     dmapcenter = map.getcenter();      google.maps.event.addlistener(map, 'idle', function () {         google.maps.event.trigger(map, 'resize');         dmapcenter = map.getcenter();     });     google.maps.event.adddomlistener(window, 'resize', function () {         map.setcenter(dmapcenter);     }); } 

lat , lng global variables latitude , longitude of search location.

the workflow using (imho) seems little odd me (imho), of choice initialize map instance every time calculate directions.

i don't know how since haven't been able test on mobile device, below code make google map, render directions between 2 points, , maintain map center after map resized (test resize running snippet in full page resizing browser window).

var dmap,      dmap_renderer,      directions_service;    /*   run once when page loads ready global components   future direction calls.   */  function initializedirectionsfeature(){      //set directions map      var dmapoptions = {          zoom: 4,          center: new google.maps.latlng(38.8282, -98.5795) //usa center      };      dmap = new google.maps.map( $("#map").get(0), dmapoptions);            //set renderer directions map      var rendereroptions = {          map: dmap,          panel: $("#directions").get(0)      };      dmap_renderer = new google.maps.directionsrenderer(rendereroptions);            //initialize directions service      directions_service = new google.maps.directionsservice();            //trigger map redraw when dom element resized      google.maps.event.adddomlistener(window, 'resize', function () {          google.maps.event.trigger(dmap, 'resize');      });            //preserve map perspective when after resize      google.maps.event.addlistener(dmap, 'resize', function () {          var center = dmap.getcenter();          google.maps.event.addlisteneronce(dmap, 'center_changed', function () {              dmap.setcenter( center );          });      });  }    /*   gets , renders directions between params.   params 'from' , 'to' can either latlng or   string geocoded. param 'renderer'   `google.maps.directionsrenderer` use.   */  function calcdirections(from, to, renderer){      var request = {          origin: from,          destination: to,          travelmode: google.maps.travelmode.driving      };      directions_service.route(request, function (response, status) {          if (status == google.maps.directionsstatus.ok) {              renderer.setdirections(response);          }      });  }    //for snippet, actuall run google maps initialize function  initializedirectionsfeature();    //for snippet example  $("#query").submit(function(e){      e.preventdefault();      calcdirections(e.target.from.value, e.target.to.value, dmap_renderer)  });

/* snippet, gmap element needs height */  html, body {    position: relative;    width: 98%;    height: 98%;    min-height: 500px;  }  #map, #directions {    width: 100%;    height: 40%;  }  .inline-block {      display: inline-block;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://maps.googleapis.com/maps/api/js">  </script>  <form id="query">      <div class="inline-block">          <label for="from">from:</label>          <input id="from" name="from" value="new york, ny"/>      </div>      <div class="inline-block">          <label for="to">to:</label>          <input id="to" name="to" value="philadelphia, pa"/>      </div>      <button type="submit">go</button>  </form>  <div id="map"></div>  <div id="directions">directions:</div>