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 ;-)