alvaro-canepa/jsbin.ofehEcug.css

## jsbin.ofehEcug.css
#gmap {
  width: 100%;
  height: 700px;
  border: 1px solid #dedede;
  background-color: #f2f2f2;
}

## jsbin.ofehEcug.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Geo ubicación usando gmap3" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;language=es"></script>
  <script src="//cdn.jsdelivr.net/gmap3/5.1.1/gmap3.min.js" type="text/javascript"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="container">
    <h1 class="text-center">gmap3 + GEO Ubicación <small>(<code>getgeoloc</code>)</small> + Impresión de ruta <small>(<code>directionsrenderer</code>)</small> </h1>
    <div id="gmap"></div>
    <div class="googlemap" id="gmap-loc"></div>
  </div>
</body>
</html>

## jsbin.ofehEcug.js
$(document).ready(function(){
  var address = [-34.90692923895607,-54.95887697672117];

  $("#gmap").gmap3({
    marker:{
      options: {
        draggable:false,
        animation: google.maps.Animation.DROP
      },
      latLng:address,
      callback : function(marker) {
        $(this).gmap3({
          getgeoloc:{
            callback : function(geoLatLng){
              if (geoLatLng){
                $(this).gmap3({
                  getroute:{
                    options:{
                      origin: geoLatLng,
                      destination: address,
                      travelMode: google.maps.DirectionsTravelMode.DRIVING
                    },
                    callback: function(results){
                      if (!results) return;
                      $(this).gmap3({
                        directionsrenderer:{
                          container: $('#gmap-loc'),
                          options:{
                            directions:results
                          }
                        }
                      });
                    }
                  }
                });
              }
            }
          }
        });
      }
    },
    map:{
      options:{
        center: address,
        zoom: 9
      }
    }
  });
});
	#gmap {
	width: 100%;
	height: 700px;
	border: 1px solid #dedede;
	background-color: #f2f2f2;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="Geo ubicación usando gmap3" />
	<script src="http://code.jquery.com/jquery.min.js"></script>
	<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
	<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=es"></script>
	<script src="//cdn.jsdelivr.net/gmap3/5.1.1/gmap3.min.js" type="text/javascript"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>
	<div class="container">
	<h1 class="text-center">gmap3 + GEO Ubicación <small>(<code>getgeoloc</code>)</small> + Impresión de ruta <small>(<code>directionsrenderer</code>)</small> </h1>
	<div id="gmap"></div>
	<div class="googlemap" id="gmap-loc"></div>
	</div>
	</body>
	</html>
	$(document).ready(function(){
	var address = [-34.90692923895607,-54.95887697672117];

	$("#gmap").gmap3({
	marker:{
	options: {
	draggable:false,
	animation: google.maps.Animation.DROP
	},
	latLng:address,
	callback : function(marker) {
	$(this).gmap3({
	getgeoloc:{
	callback : function(geoLatLng){
	if (geoLatLng){
	$(this).gmap3({
	getroute:{
	options:{
	origin: geoLatLng,
	destination: address,
	travelMode: google.maps.DirectionsTravelMode.DRIVING
	},
	callback: function(results){
	if (!results) return;
	$(this).gmap3({
	directionsrenderer:{
	container: $('#gmap-loc'),
	options:{
	directions:results
	}
	}
	});
	}
	}
	});
	}
	}
	}
	});
	}
	},
	map:{
	options:{
	center: address,
	zoom: 9
	}
	}
	});
	});