Categorias
iiiiii
google maps en una modal
Descripcion
Mostrar un mapa en una ventana modal
html
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target=".mimodal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade mimodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div id="map" class="modal-body" style="width: 100%; height: 200px">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!--jquery cdn-->
<script src="http://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<!--js Bootstrap cdn-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--se elimina el callback de la url-->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDF_eOOEADSIQKphdwt7Lm_r5LpVXryqOs" async defer></script>
<script>
$(document).ready(function() {
function crearMapa(mlatitud,mlongitud){
var map;
var punto = {lat: mlatitud, lng: mlongitud};
map = new google.maps.Map(document.getElementById('map'), {
center: punto,
zoom: 18,
});
var marker = new google.maps.Marker({map: map, position: punto});
}
$('.mimodal').on('shown.bs.modal', function () {
// al dar click en el boton ver mapa
$('#map').html("");
/* Act on the event */
latitud=3.415164;
longitud=-76.496336;
crearMapa(parseFloat(latitud),parseFloat(longitud));
});
});// .ready
</script>
</body>
</html>