Crousel with map

by Deepak Manwal

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
<div id="carousel-1" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-1" data-slide-to="1" ></li>
  </ol>

  <div class="carousel-inner">
      <div class="item active">
          <div id="map-canvas1" style="height: 450px; width: 100%;"></div>
      </div>
      <div class="item" style="height: 450px; width: 100%;">
          <div id="map-canvas2" style="height: 450px; width: 100%;"></div>
      </div>
  </div>
    
    <!-- Carousel Controls -->
  <a class="left carousel-control" href="#carousel-1" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-1" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

CSS

.off-left_hide {
    display: block !important;
    position: absolute !important;
    left: -10000px !important;
    top: -10000px !important;
}

JavaScript

$(document).ready(function(){
    var $canvas = $('#map-canvas1');
    var $canvas1 = $('#map-canvas2');
    mymap($canvas);
    mymap($canvas1);
})

function mymap($canvas)
{
    var dstLatLng = new google.maps.LatLng(37.403867, -121.975405);
    var orgLatLng = new google.maps.LatLng(37.4321365, -122.0988141);
    var directionsRenderer = new google.maps.DirectionsRenderer();
    var directionsService = new google.maps.DirectionsService();
    var request = {
			        origin: orgLatLng,
			        destination: dstLatLng,
			        travelMode: google.maps.TravelMode.DRIVING
			      };
    var mapOptions = {
			        zoom: 8,
			        center: dstLatLng,
			        mapTypeId: google.maps.MapTypeId.ROADMAP
			      };
    var map = new google.maps.Map($canvas[0], mapOptions);
    directionsRenderer.setMap(map);
    directionsService.route(request, function(result, status) {
        if (status === google.maps.DirectionsStatus.OK) {
          return directionsRenderer.setDirections(result);
        }
    });
    $('.carousel').carousel();
    $('.carousel').on('slid.bs.carousel', function () {
      //alert("sdfd");
        google.maps.event.trigger(map, 'resize');
    });
    //google.maps.event.trigger(map, 'resize');
}