Reputation: 111
I am using google map embeded api to display direction between two points.
<p><iframe width='600' height='450' frameborder='0' style='border:0' src='https://www.google.com/maps/embed/v1/directions?key=AIzaSyAb9sz-Ih7YtVpdvoT5mLqgkJBx99yR8bc&origin=Anand,+Gujarat,+India&destination=Ahmedabad,+Gujarat,+India&mode=driving'></iframe></p>
This works fine every time in html file.
But when I place it in bootstrap3 modal body, it worked only once and now its not showing correct map, instead it shows whole world map.
I have to zoom to view actual directions.
Below is bootstrap code for same.
<html>
<!--<![endif]-->
<head>
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/bootstrap-theme.min.css" />
</head>
<body>
<!-- Button trigger modal -->
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-cancel"></i></a>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p><iframe width='600' height='450' frameborder='0' style='border:0' src='https://www.google.com/maps/embed/v1/directions?key=AIzaSyAb9sz-Ih7YtVpdvoT5mLqgkJBx99yR8bc&origin=Anand,+Gujarat,+India&destination=Ahmedabad,+Gujarat,+India&mode=driving'></iframe></p>
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- javascript
================================================== -->
<!-- These are all the javascript files -->
<script src="../js/jquery-1.10.2.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/color-picker.js"></script>
</body>
</html>
Unable to figure out What could be the issue?
Upvotes: 2
Views: 5324
Reputation: 454
You can inject the iframe into the modal after load and then apply styling via CSS.
$('#myModal').on('shown.bs.modal', function () {
$('#myModal .modal-body').html('<iframe src="https://www.google.com/maps/embed/v1/directions?key=AIzaSyAb9sz-Ih7YtVpdvoT5mLqgkJBx99yR8bc&origin=Anand,+Gujarat,+India&destination=Ahmedabad,+Gujarat,+India&mode=driving" frameborder="0" style="border:0"></iframe>');
});
In my case I needed the frame to be 100% height & width and this worked nicely :)
Upvotes: 0
Reputation: 1
I've been having the same exact problem.
After scouring the internet for hours (days, possibly) I finally wrote a custom modal dialog strictly for my map's display:
HTML
<div id="viewmap" class="modalDialog">
<div>
<a href="#calendar" runat="server" title="Close" class="close">X</a>
<h4>Map to <%: evnt.VenueName %></h4>
<iframe
width="100%"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=API_KEY&q=ADDRESS&zoom=15">
</iframe>
</div>
</div>
CSS
.modalDialog,
.modalDialog > iframe{
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,.8);
z-index: 99999;
opacity: 0;
-o-transition: opacity 400ms ease-in;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: all;
}
.modalDialog > div {
padding-top: 10px;
width: 700px;
position: relative;
margin: 2.5% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #333;
}
The difference between this modal dialog and bootstrap's is the CSS simply sets the opacity to 0 (completely invisible) as opposed to hiding the div entirely. When it's the target, it sets the opacity to 1.
If you notice, my close anchor tag links to: "#calendar"... if you simply link to "#" it will bring you back to the top of the page.
Hope that helps.
Upvotes: 0
Reputation: 156
the code is working fine.. try deleting your cache in the browser and try again..
<!-- Button trigger modal -->
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-cancel"></i></a>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p><iframe width='600' height='450' frameborder='0' style='border:0' src='https://www.google.com/maps/embed/v1/directions?key=AIzaSyAb9sz-Ih7YtVpdvoT5mLqgkJBx99yR8bc&origin=Anand,+Gujarat,+India&destination=Ahmedabad,+Gujarat,+India&mode=driving'></iframe></p>
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
http://jsfiddle.net/alaskaz1864/VpTR3/
Upvotes: 3