Google Maps et balise HTML

**The Dindon** · 31/07/2014, 22h44

Bonjour,

Je suis en train de faire un site en HTML et j'aimerais bien mettre un "gadget" pour google map mais ça ne fonctionne pas jusqu'à ce que j'enlève:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<!DOCTYPE html>

mais si j'enlève cette ligne tout mon site déconne et s'allonge ... je sais pas comment faire.

Quelqu'un a t-il une astuce ou alors des lignes de codes pour mettre facilement un fenêtre de google map ?

Merci de votre aide.

EDIT: resultat : https://www.dropbox.com/s/cet35g7w27...2022.20.12.png

**NoSmoking** · 01/08/2014, 00h12

Bonjour,
un conseil remet ton DOCTYPE et refait correctement ta page.

Pourquoi l'ajout d'un doctype casse-t-il mon design ?

**s0h3ck** · 01/08/2014, 04h25

Profitez aussi des nouvelles balises sémantiques de l'HTML5.
Mieux vaut le dire plusieurs fois que d'abuser de balise <div> carrément inutile.

Bonne journée,
s0h3ck.

**The Dindon** · 01/08/2014, 17h30

Bah en faite ce n'est pas le fait que je veux le rajouter , c'est que mon code HTML + java ne fonctionne pas avec cette ligne en question.
donc après c'est peu être mon code HTML qui ne va pas.
Si vous voulez je peux le partager.

merci de vos réponses en tout cas

**s0h3ck** · 01/08/2014, 18h52

@The Dindon

Je vous suggère fortement de faire le partage de votre code HTML. Ça vous aidera à voir plus clair et pour nous aussi.

Pour savoir comment mettre un google maps dans votre code HTML, je vous propose deux liens à voir si ce n'est pas déjà fait :

Bonne journée!

**NoSmoking** · 01/08/2014, 18h55

Bonjour,
sans oublier la FAQ API Google Maps

**The Dindon** · 02/08/2014, 11h43

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="style.css" />
		<title>Comptoir des Isles aux Brumes - Acceuil</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
                        function initialiser() {
                                var latlng = new google.maps.LatLng(47.497188, 2.858020);
                                
                                var options = {
                                        center: latlng,
                                        zoom: 19,
                                        mapTypeId: google.maps.MapTypeId.SATELLITE
                                        
                                        
                                };
                                
                                var carte = new google.maps.Map(document.getElementById("carte"), options);
                                
                                var marqueur = new google.maps.Marker({
                                position: new google.maps.LatLng(47.497188, 2.858020),
                                map: carte
                        });
                        }
                </script>
 
 
	</head>
 
 
	<div id="bloc_page">
	<div id="bloc_fond">
	<header>
	<div class="foo" ></div>
		<div id="fond_titre">
		<img src="images/fondtitre2.jpg" height="100%" width="100%"/>
		</div>
		<div id="titre_principal">
		<h1>Comptoir des Isles aux Brumes</h1>		
		</div>
		<div id="barre_de_navigation">
		<h2><hr style="width: 60%; color:#AA691A; background-color:#AA691A; height:3px;" /></h2>
		<!-- <h2><img src="images/separateur1.png" height="50%" width="50%"/></h2> -->
 
	<nav>
		<ul>
			<li><a href="ile_acceuil.html">Acceuil</a></li>
			<li><a href="lieux.html">Lieux</a></li>
			<li><a href="lien acceuil">Restauration</a></li>
			<li><a href="lien Karaoke">Animation</a></li>
			<!-- 
			<li><a href="lien Nous Trouver">Nous trouver</a></li>
			<li><a href="lien Contact">Contact</a></li>*/ 
 
			==== Peut être a la fin ====
			-->
		</ul>
	</nav>
	<h3><hr style="width: 60%; color:#AA691A; background-color:#AA691A; height:3px;" /></h3>
	<!-- <h3><img src="images/separateur2.png" height="50%" width="50%"/></h3> -->
	</div>
	</header>
 
	<body onload="initialiser()">
		<div id="carte" style="width:50%; height:50%"></div>
	</body>
 
	<footer>
	<hr style="width: 98%; color:#AA691A; background-color:black; height:3px;" />
		<p>Copyright Isles aux Brumes - Tous droits réservés<br />
		<a href="">Me contacter !</a></p>
	</footer>
</div>
</div>
 
</html>

CSS:

Code :

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
body
{
background-image: url("images/fond_redim.png");
background-attachment: scroll/*fixed*/;
background-repeat: no-repeat; 
background-position: center top;
background-size: 100% 150%; 
}
 
header ,nav ,body
{
    color: #c43227;
    font-family: papyrus;
    text-shadow: 1px 1px 1px #60160d;
}
 
#fond_titre
{
	margin-bottom: -160px;
	margin-top: -2px;
	/*border: 1px black"/*brown*//* solid;*/
	/*padding-bottom: -100px;*/
}
 
#titre_principal
{
	font-size: 25px;
	margin-left: 3%;
	margin-bottom: 80px;
	padding-top: -100px;
}
 
#Histoire
{
	color: #760001;
    margin-left: 8%;
    margin-right: 8%;
}
 
#texte
{
	color: #760001;
    margin-left: 10%;
    margin-right: 8%;
}
 
#bloc_fond
{
	width: 100%;
	height: 100%;
	background-color: rgba(164,103,64,0.5);
	margin: auto;
    border: 3px black/*brown*/ solid;
    border-radius: 5px;
    box-shadow: 3px 3px 10px black;
}
 
#bloc_page
{
	width: 780px;/*1100*/
	margin: auto;
}
 
header h2
{
	text-align: center;
	margin-bottom: -20px;
}
 
header h3
{
	text-align: center;
	margin-top: -18px;
}
 
nav
{ 
display: inline-block; 
width: 70%; 
text-align: center;
margin-left: 15%;
}
 
nav ul
{
list-style-type: none;
}
 
nav li
{ 
display: inline-block;
margin-right: 15px;
}
 
nav a
{
font-size: 1.3em; 
color: #181818; 
padding-bottom: -20px;
 text-decoration: none;
}
 
nav a:hover
{ 
color: #760001;
 border-bottom: 3px solid #760001;
}
 
/*#background2
{
	width: 50%;
}
*/
.foo {   
    float: center;
    width: 100%;
    height: 100%;
    /*margin: 5px 5px 5px 5px;*/
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0,0,0,.2);
}
 
hr {
 
    text-align: center;
    font-size: 60px;
    line-height: 4;
 
}
 
footer
{
	margin-left: 5px;
	color: black;
}

SI c'est trop dur a regarder , je peux vous envoyer les fichiers.

Sinon je peux mettre un spoiler ? mais je ne sais pas comment faire :/

Google Maps et balise HTML

CSS

Vue hybride

Discussions similaires

Partager

Partager