title: Issue rendering Google maps on 2nd render In Dialog Box
body: <p>I have a website that i have built that is 90% jQuery with ajax so i would like to render different maps with directions with the click of a button without page refreshing.</p>
  
  <p>I have everything working right for the first rendering as you can see in the following picture.</p>
  
  <p><img src="https://i.stack.imgur.com/lFtCg.jpg" alt="enter image description here"></p>
  
  <p>But when i go to reload or change to a different one i Get this: (I think it is still rendering the map with the points. just canvas is not right)</p>
  
  <p><img src="https://i.stack.imgur.com/NEtVC.jpg" alt="enter image description here"></p>
  
  <p>here is my code for the mapping: </p>
  
  <pre><code>window.initialize_map = function() {
      function getMiles(i) {
          return i*0.000621371192;
      }
      function toHHMMSS(i) {
          var sec_num = parseInt(i, 10); // don't forget the second param
          var hours   = Math.floor(sec_num / 3600);
          var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
          var seconds = sec_num - (hours * 3600) - (minutes * 60);
  
          if (hours   &lt; 10) {hours   = "0"+hours;}
          if (minutes &lt; 10) {minutes = "0"+minutes;}
          if (seconds &lt; 10) {seconds = "0"+seconds;}
          time = hours+' hours '+minutes+' minutes ';
          return time;
      }
  
      var address, bounds, center, dest, dest_lat, dest_lng, directionsService, estimate_dest, estimate_origin, geocoder, map, mapOptions, none_location, one_location, origin, origin_lat, origin_lng, renderDirections, requestDirections, table, zoom, route, distance, distance1, duration, current, current_lng, current_lat, waypnt, estimate_current, directionsRenderer;
      table = $("#gmap");
      waypnt = [];
      dest_lng = table.attr("dest_lat");
      dest_lat = table.attr("dest_lng");
      origin_lng = table.attr("origin_lat");
      origin_lat = table.attr("origin_lng");
      dest = table.attr("dest");
      current_lng = table.attr("current_lng");
      current_lat = table.attr("current_lat");
  
      var current1 = table.attr("current");
      var origin1 = table.attr("origin");
  
      if (current1 === ''){
          origin = origin1;
  
      }
      else{
          origin = current1;
          var waypoint = origin1;
          estimate_current = new google.maps.LatLng(parseInt(current_lat), parseInt(current_lng));
      }
      estimate_origin = new google.maps.LatLng(parseInt(origin_lat), parseInt(origin_lng));
      estimate_dest = new google.maps.LatLng(parseInt(dest_lat), parseInt(dest_lng));
      geocoder = new google.maps.Geocoder();
  
      directionsService = new google.maps.DirectionsService;
      directionsRenderer = new google.maps.DirectionsRenderer({suppressMarkers: true});
  
  
      renderDirections = function(result) {
          directionsRenderer.setMap(map);
          return directionsRenderer.setDirections(result);
      };
      var icons1 = {
          start: {
              name: 'Current Location',
              icon: '/assets/truck.png'
          },
          load: {
              name: 'Load Pickup',
              icon: '/assets/crate.png'
          },
          info: {
              name: 'Destination',
              icon: '/assets/enduser.png'
          }
      };
      var icons = {
          start: new google.maps.MarkerImage(
              // URL
              '/assets/truck.png',
              // (width,height)
              new google.maps.Size( 32, 32 ),
              // The origin point (x,y)
              new google.maps.Point( 0, 0 ),
              // The anchor point (x,y)
              new google.maps.Point( 13, 32 )
          ),
          load: new google.maps.MarkerImage(
              // URL
              '/assets/crate.png',
              // (width,height)
              new google.maps.Size( 32, 32 ),
              // The origin point (x,y)
              new google.maps.Point( 0, 0 ),
              // The anchor point (x,y)
              new google.maps.Point( 13, 32 )
          ),
          end: new google.maps.MarkerImage(
              // URL
              '/assets/enduser.png',
              // (width,height)
              new google.maps.Size( 32, 32 ),
              // The origin point (x,y)
              new google.maps.Point( 0, 0 ),
              // The anchor point (x,y)
              new google.maps.Point( 13, 32 )
          )
      };
      function makeMarker( position, icon, title ) {
          new google.maps.Marker({
              position: position,
              map: map,
              icon: icon,
              title: title
          });
      }
      requestDirections = function(start, end, waypnt) {
          return directionsService.route({
              origin: start,
              destination: end,
              waypoints: waypnt,
              travelMode: google.maps.DirectionsTravelMode.DRIVING
          }, function(result) {
              myObj = result;
              route = result.routes[0];
              distance = document.getElementById('distance');
              distance1 = document.getElementById('distance1');
              var distance2 = document.getElementById('distance2');
              duration = document.getElementById('duration');
              var total_distance = 0;
              var total_duration = 0;
  
              for (var i = 0; i &lt; route.legs.length; i++) {
                  if (route.legs.length &gt; 1){
                      if (i === 0 ){
                          distance.innerHTML += ' &lt;b&gt;Dead Head:&lt;/b&gt; &lt;br&gt;';
                          makeMarker( route.legs[i].start_location, icons.start, "Current Location" );
                      }
                      else{
                          distance.innerHTML += ' &lt;b&gt;Load Route:&lt;/b&gt; &lt;br&gt;';
                          distance2.innerHTML = Math.round(getMiles(route.legs[i].distance.value)) + " Miles"
                          makeMarker( route.legs[i].start_location, icons.load, "Origin" );
                          makeMarker( route.legs[i].end_location, icons.end, 'Destination' );
                      }
                  }
                  else{
                      distance.innerHTML += ' &lt;b&gt;Load Route:&lt;/b&gt; &lt;br&gt;';
                      distance2.innerHTML = Math.round(getMiles(route.legs[i].distance.value)) + " Miles"
                      makeMarker( route.legs[i].start_location, icons.load, "Origin" );
                      makeMarker( route.legs[i].end_location, icons.end, 'Destination' );
                  }
  
  
                  distance.innerHTML += route.legs[i].start_address + '* to ';
                  distance.innerHTML += route.legs[i].end_address + '*&lt;br&gt;';
                  distance.innerHTML += route.legs[i].duration.text + '&lt;br&gt;';
                  distance.innerHTML += route.legs[i].distance.text + '&lt;br&gt;&lt;br&gt;';
                  total_duration += route.legs[i].duration.value;
                  total_distance += route.legs[i].distance.value;
              }
              distance.innerHTML += '&lt;small&gt;*Based On Estimated Origin &amp; Destination Locations&lt;/small&gt;';
              distance1.innerHTML = Math.round(getMiles(total_distance)) + " Miles";
              duration.innerHTML = toHHMMSS(total_duration);
  
              return renderDirections(result);
          });
      };
  
  
  
      one_location = false;
      none_location = false;
      if (dest.toLowerCase() === "anywhere" &amp;&amp; origin.toLowerCase() === "anywhere") {
          center = new google.maps.LatLng(37.2153, -93.2981);
          one_location = true;
          none_location = true;
          zoom = 4;
      } else if (dest.toLowerCase() === "anywhere") {
          center = estimate_origin;
          address = origin;
          zoom = 6;
          one_location = true;
      } else if (origin.toLowerCase() === "anywhere") {
          center = estimate_dest;
          address = dest;
          zoom = 6;
          one_location = true;
      } else {
          center = new google.maps.LatLng(34, 34);
          zoom = 6;
      }
      mapOptions = {
          center: center,
          zoom: zoom,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          disableDefaultUI: true
      };
      map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  
      if (one_location) {
          if (!none_location) {
              return geocoder.geocode({
                  'address': address
              }, function(results, status) {
                  var marker;
                  return marker = new google.maps.Marker({
                      position: results[0].geometry.location,
                      map: map,
                      title: 'Loadmax'
                  });
              });
          }
      } else {
          bounds = new google.maps.LatLngBounds();
          if (estimate_current){
              bounds.extend(estimate_current);
          }
          bounds.extend(estimate_origin);
          bounds.extend(estimate_dest);
          map.fitBounds(bounds);
          var legend = document.getElementById('legend');
          for (var key in icons1) {
              var type = icons1[key];
              var name = type.name;
              var icon = type.icon;
              var div = document.createElement('div');
              div.innerHTML = '&lt;img src="' + icon + '"&gt; ' + name;
              legend.appendChild(div);
          }
          map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
          if (waypoint){
              waypnt.push({
                  location:waypoint,
                  stopover:true});
          }
          return requestDirections(origin, dest, waypnt);
  
      }
  
  };
  </code></pre>
  
  <p>here is my code for the html view:</p>
  
  <pre><code>&lt;div class="span6" id="map_canvas" style="height:400px"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and i initiate the maps by this:</p>
  
  <pre><code>initialize_map();
  </code></pre>
  
  <p>By the way everything you see in those pictures are generated thru an ajax request that is replacing everything in that div with this command:</p>
  
  <pre><code>$("#map_info_div").replaceWith(
          "&lt;%= escape_javascript(render :partial =&gt; 'classic_dialogs/load_search/load_details', :locals =&gt; {:load_info =&gt; @load_info, :current1 =&gt; @current}) %&gt;"
  );
  </code></pre>
  
  <p>so every time that whole section is completely redrawn and calls a new:</p>
  
  <pre><code>initialize_map();
  </code></pre>
  
  <h2>UPDATE:</h2>
  
  <p>i have tried to use this:</p>
  
  <pre><code>google.maps.event.trigger(map_canvas,'resize');
  </code></pre>
  
  <p>It will give me back the rest of the map but it is still not in the Bounds that should be set.</p>
  
  <p>I currently have the rendering process in a function that i call when the html is loaded. </p>
  
  <p>I have been trying to access the map instance from the console of chrome browser but since the map variable is in the function i am unable to access it</p>
  
  <h1>This map is being displayed in a JQUERY DIALOG Box if that has any effect</h1>
  
  <p>From working with this it is like the google map canvas is rendering from point 0,0 of the dialog box because every time i use the re-size code i have to drag the canvas down and to the right to see the points... </p>