Modal Bootstrap + Google Map
Bonjour je viens vers vous, car impossible de r�soudre mon probl�me. Je souhaite utiliser ce script JQuery : https://github.com/vdw/MapIt
et le combiner avec Bootstrap pour qu'il soit dans une modale. Le souci c'est que lorsque la modal s'ouvre, il y a le fond gris de la map mais la map elle est invisible. DLe plus �trange c'est que lors que je modifie la taille de la fen�tre elle appara�t.
Voici le lien pour t�l�charger tous les fichiers, car il y a tous les fichier js, css.
https://www.dropbox.com/s/m6ylr1q8nbe4brf/demo.zip?dl=0
et voici le code html
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65
| <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MapIt | An easy way to embed google maps in your site.</title>
<meta name="description" content="An easy way to embed google maps in your site">
<link href='http://fonts.googleapis.com/css?family=Nunito:400,300,700' rel='stylesheet' type='text/css'>
<!-- STYLES -->
<link rel="stylesheet" type="text/css" href="stylesheets/reset.css">
<link rel="stylesheet" type="text/css" href="stylesheets/typography.css">
<link rel="stylesheet" type="text/css" href="stylesheets/styles.css">
<link rel="stylesheet" type="text/css" href="stylesheets/github.css">
<link rel="stylesheet" type="text/css" href="stylesheets/css/bootstrap.css">
<script type="text/javascript">
</script>
</head>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" data-lat="23, 18.33" 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 class="modal-body">
<!--MAP-->
<div id="wrapper">
<div id="nav_wrapper">
<nav>
<ul class="vertical">
<li><strong>Points of interest</strong></li>
<li><a onclick="javascript:$('#map_canvas').trigger('show', '1')">Cinemas</a></li>
<li><a onclick="javascript:$('#map_canvas').trigger('show', '2')">Museums</a></li>
<li><strong>Routes</strong></li>
<li><a onclick="javascript:$('#map_canvas').trigger('route', '0')">Airport to The Hotel</a></li>
<li><a onclick="javascript:$('#map_canvas').trigger('route', '1')">The Hotel to Center</a></li>
<li><strong>Controls</strong></li>
<li><a onclick="javascript:$('#map_canvas').trigger('hide_all')">Hide all markers</a></li>
<li><a onclick="javascript:$('#map_canvas').trigger('reset')">Reset Map</a></li>
</ul>
</nav>
</div>
<div id="map_canvas"></div>
</div>
<!--END MAP-->
</div>
</div>
</div>
</div>
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="javascripts/vendor/jquery-1.8.1.min.js"><\/script>')</script>
<!-- JS -->
<script type="text/javascript" src="../jquery.mapit.js"></script>
<script src="javascripts/initializers.js"></script>
<script src="javascripts/js/bootstrap.js"></script>
<!-- JS ends -->
</body>
</html> |
Merci par avance pour ceux qui peuvent m'aider ^.^