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 ^.^
