Modal Bootstrap + Google Map

**luangue** · 23/10/2015, 18h21

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 html :

S�lectionner tout - Visualiser dans une fen�tre � part

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">&times;</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 ^.^

Invit� · 24/10/2015, 18h40

C'est la premi�re fois que je viens en aide � un dev sur un forum

Explication du code ci-dessous:
En gros, une fois que la modal est visible tu actives mapIt

c'est simple ^^ heureusement c'est toujours comme �a en webDev

Remplace ton code dans "initializers.js" par

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
 
// Run javascript after DOM is initialized
$(document).ready(function() {
     $("#myModal").on("shown.bs.modal", function () {
         $('#map_canvas').mapit();
    });
});

*En plus tu sais quoi? Je travaille sur un projet et mapIt m'aidera peut etre ;-)