ne s'affiche pas

**Stefan0** · 19/11/2011, 15h35

Bonjour,

On m'a demandé de rajouter une carte google maps dans une page web. Après de longues heures passés sur les tutoriels anglais de google maps, j'ai réussis à afficher google maps soit au dessus du contenu, soit au dessus, mais jamais là ou je voulais. Aujourd'hui, j'ai trouvé un tutoriel français grâce à ce forum ( http://blog.thecodingmachine.com/fr/...oogle-maps-api ). Mais maintenant, je n'arrive plus du tout à afficher de carte. Les seuls changements par apport à avant sont l'apparition d'un texte au dessus du contenu et, pendant une courte période, un message d'erreur indiquant que je devais rentrer true ou false dans le paramètre sensor (mais ça c'est réglé). Vous l'aurez compris, mon niveau est faible, apparemment trop pour ce genre de manipulation. Mais j'aimerai vraiment rendre service à la personne qui m'a demandé de mettre google maps sur sa page, alors je viens demander votre aide. J'ai volontairement modifié le texte, les images et les liens internes de la page afin de préserver l'anonymat de son auteur. De même les coordonnées du marqueur et du centre de la carte ont été modifiés.

Voici ce que Google Chrome m'affiche lorsque je lui demande d'ouvrir la page :

Les fonctions qui permettent de personnaliser la carte sont vers la fin du <body>, je le précise car j'ai vu que ça se faisait souvent dans <head> mais le tutoriel que j'ai cité tout à l'heure le fait dans <body>. Au passage, je signale que je n'ai pas fais de ligne

Code :

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

<div id="map_canvas" style="width:100%; height:100%"></div>

pour insérer la carte, comme indiquer par les tutoriels anglais car je ne l'ai pas vu dans ce tutoriel. Voici le code source de la page :

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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="Content-Type"
 content="text/html; charset=windows-1252"/>
  <meta name="GENERATOR" content="Microsoft FrontPage 4.0">
  <meta name="ProgId" content="FrontPage.Editor.Document">
  <title>Test pour insérer google maps</title> 
<script type="text/javascript" src="https://maps-api-ssl.google.com/maps/api/js?v=3.7&sensor=false"></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
 
 
</head>
<body onload="initialize()">
<table bordercolorlight="#ECFEFF" bordercolordark="#ECFEFF"
 bgcolor="#ecfeff" border="1" bordercolor="#ecfeff" height="1"
 width="100%">
  <tbody>
    <tr>
      <td bordercolorlight="#C4FDFD" bordercolordark="#C4FDFD"
 align="center" bgcolor="#c4fdfd" height="583" valign="top" width="26%">
      <p align="center"><img src="Logo6.jpg" align="top" border="0"
 height="148" width="155"></p>
      <p align="center"><b><a href="une-autre-page.htm"><font face="Georgia" color="#FF00FF" size="4">Une autre<br>
      <br>
      page du site</font></a></b></p>
      <p align="center"><b><a href="index.htm"><u><font color="#008080"
 size="4">Index du site</font></u></a></b> </p>
      <p><b><font color="#000080" face="Verdana" size="3">Un titre</font></b></p>
      <p align="center"> <b><a href="ma-page-cle.htm"><font
 color="#008080" size="3">Ma page clé</font></a></b> </p>
      <p align="center"> <b><a href="page3.htm"><font
 color="#008080" size="3">Page 3</font></a></b> </p>
      <p align="center"> <b><a href="la-page.htm"><font color="#008080"
 size="3">LA page</font></a></b> </p>
      <p align="center"> <b><a href="tout-sur-moi"><font
 color="#008080" size="3">Tout sur moi</font></a></b> </p>
      <p align="center"><b><font color="#000080" face="Verdana" size="3">Autre titre</font></b></p>
      <p align="center"> <b><a href="art-du-rien.htm"><font
 color="#008080" size="3">L'art du rien</font></a></b> </p>
      <p align="center"><b><font color="#000080" face="Verdana" size="3">3ème titre</font></b></p>
      <p align="center"><font size="3"><a
 href="moi.htm"><b><font color="#008080">Moi</font></b></a><font
 color="#008080"><b> </b></font></font></p>
      </td>
      <td bordercolor="#ECFEFF" bordercolorlight="#ECFEFF"
 bordercolordark="#ECFEFF" bgcolor="#ecfeff" height="583" valign="top"
 width="80%">
      <p align="center"> <img src="mon-autre-logo.jpg" border="0"
 height="146" width="619"> </p>
      <p align="left"><b><font size="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font><font
 size="6">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font></b>
      <div align="center">
        <center>
      <table width="130%" border="0">
        <tbody>
          <tr>
            <td width="100%">
            <p align="center"><b><font color="#800000" size="6">Me contacter et localiser</font>
            </b> </p>
            </td>
          </tr>
          <tr>
            <td width="100%">
            <p align="center">&nbsp;</p>
            <b>
            <p align="center"><font color="#000080" size="4">Mon nom et prénom</font></p>
            <font size="3">
            <p align="center"><font color="#000080">Mon numéro de rue et ma rue</font></p>
            <p align="center"><font color="#000080">Mon code postal et ma ville</font></p>
            </font>
            <p align="center"><font color="#000080" size="3">Mon uméro de téléphone</font></p>
            <p align="center"><font color="#000080" size="3">Mon e-mail: </font><font
 color="#0000ff" size="3"><a href="mailto:monemail@yahoo.fr">monemail@yahoo.fr</a>&nbsp;</font></p>
            <p align="center" style="tab-stops: -750.7pt -705.7pt; margin-left: -70.9pt; margin-right: 283.85pt; margin-top: 0cm; margin-bottom: .0001pt"><b style="mso-bidi-font-weight:normal"><span style="mso-bidi-font-weight: normal"><font size="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font><font size="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </font><font size="4" color="#000080">Quelque chose de pas intéressant<br>
 
            </font>
            </span></b></p>
            <p align="center" style="tab-stops: -750.7pt -705.7pt; margin-left: -70.9pt; margin-right: 283.85pt; margin-top: 0cm; margin-bottom: .0001pt"><b style="mso-bidi-font-weight:normal"><font color="#000080" size="4"><span style="mso-bidi-font-weight: normal">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            Un autre truc pas intéressant<o:p>
            </span></font><span style="font-size:14.0pt">
            </o:p>
            </span></b></p>
            </b>
            <p align="center">&nbsp; </p>
			<p align="center">La carte google maps devrait s'afficher entre ici</p>
			<script type="text/javascript">
function initialize() {
    var maLatlng = new google.maps.LatLng(97.544441910939, 95.122767090797424);
    var mesOptions = {
        zoom: 12,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.HYBRID
		panControl: false,	
		zoomControl: true,
		zoomControlOptions: {
			style: google.maps.ZoomControlStyle.LARGE,
			position: google.maps.ControlPosition.LEFT_CENTER
		mapTypeControl: false, 
		scaleControl: false, 
		streetViewControl: false, 
		overviewMapControl: false}
    }
    var carte = new google.maps.Map(document.getElementById("map_canvas"), mesOptions);
    var image = 'monmarqueur.png';
    // Instanciation de notre marqueur
    var marker = new google.maps.Marker({
        position: maLatLng,
        map: carte,
        icon: image
    });
    var message = "Mon message";
    var infowindow = new google.maps.InfoWindow({
        content: message,
        size: new google.maps.Size(50,50)
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(carte,marker);
    });}
	// Création de la balise script pour inclure les fonctions de Google Maps dans notre application
function loadScript() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialisation";
    document.body.appendChild(script);
}
// Au chargement de la page on appelle la fonction loadScript qui appelle la fonction initialisation() grâce au paramètre callback
window.onload = loadScript;
</script>
			<p align="center">
			<div id="map_canvas" style="width: 90%; height: 90%"></div></p>
			<p align="center">et ici...</p>
			</p>
            </td>
          </tr>
        </tbody>
      </table>
        </center>
      </div>
      </td>
    </tr>
  </tbody>
</table>
<p>&nbsp;</p>
</body>
</html>

Merci d'avance pour d'éventuels corrections du code source ou conseils!

PS : Je viens de me rendre compte que ce forum possède une F.A.Q. google maps

. Je vais essayer de trouver ma réponse dedans mais n'hésitez pas à répondre si vous détectez des erreurs (je sais qu'il y en a beaucoup

).

PPS : Si vous comprenez pourquoi le texte est mal centré (un peu excentré à droite) et pourquoi l'image "mon-autre-logo.jpg" est un peu écrasé, merci de me le signaler.

EDIT : Oups, j'oubliais, je souhaite qu'il n'y ai aucun bouton sur la carte à part le zoom. Je souhaite que le centre de la carte, le marqueur (qui aura un icone créé par mes soins) et l'infobulle aient les mêmes coordonnées. Je voulais aussi que le seul type de carte possible soit le type mixte (ou hybride).

ne s'affiche pas

APIs Google

Mode arborescent

Discussions similaires

Partager

Partager