API GoogleMap ok sous FF mais pas sous IE

**David4** · 07/07/2008, 11h44

Bonjour,

j'ai une API GoogleMap sur une page de mon site, qui affiche le nombre de maisons et d'appartements trouvés selon les choix de l'utilisateur.

Tout marche nikel sous FF. Par contre, sous IE, pas d'affichage de Marker, par de possibilité de zoom, rien quoi!
ça me signale meme pas d'erreurs Javascript.

Je colle mon code :

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
 
<script type="text/javascript" src="http://www.google.com/jsapi?key=">
</script>
 
<script type="text/javascript">
google.load("maps", "2" );
function initialize()
{
var map = new google.maps.Map2(document.getElementById("map" ));
map.setCenter(new google.maps.LatLng(46.850095, 2.509003), 5);
}
google.setOnLoadCallback(initialize);
</script>
 
<script type="text/javascript">
 
	//<![CDATA[
     function load() {
      if (GBrowserIsCompatible()) {
          function createMarker(point, number) {
                  var marker = new GMarker(point,icon);
                  GEvent.addListener(marker, "click", function() {
                  marker.openInfoWindowTabsHtml(infoTabs);            
                  });
                   return marker;
            }
            var infoTabs = [
             new GInfoWindowTab("Description", "maison de 200m² en bord de plage"),
              new GInfoWindowTab("Photo", "  ")
            ];               
 
		  //création d'une carte nommé "map"
            var map = new GMap2(document.getElementById("map"));
                        GEvent.addListener(map, "moveend", function() {
 
            var center = map.getCenter();
                });
 
            map.addControl(new GSmallMapControl());
            map.enableScrollWheelZoom();
            map.addControl(new GMapTypeControl());
 
 
            map.setCenter(new GLatLng(46.850095, 2.509003), 5);
 
            var icon = new GIcon();
 
            icon.image = "./marker.png";
 
            icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
 
            icon.iconSize = new GSize(20, 19);
            icon.shadowSize = new GSize(22, 20);
            icon.iconAnchor = new GPoint(6, 20);
            icon.infoWindowAnchor = new GPoint(10, 34);            
 
 
<?php while ($donnees = mysql_fetch_array($reponse))
{
?>
 
var point = new GLatLng('<?php echo $donnees['latitude'];?>','<?php echo $donnees['longitude'];?>');
var infoTabs = [new GInfoWindowTab("", "")];
var marker = new createMarker(point,icon,infoTabs);
map.addOverlay(marker);
 
<?php 
} 
?>
    }
}
</script>

Si qq'un peut me donner une solution, ça m'arrangerait beaucoup.
Merci d'avance.

Invité · 09/07/2008, 12h23

Bonjour,

Je ne sais pas si cela peut d'aider, mais teste avec ce code ( en changeant la clé si nécessaire (ici pour localhost)) sous IE7 et FF3

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="generator" content="">
  <title></title>
  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script>
  <style type="text/css">
  .map {
    width: 700px;
    height: 700px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid black;
  }
  </style>
 
  </head>
  <body>
  <div id="map" class="map"></div>
  <script language="JavaScript">
  <!--
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(37.4419, -122.1419), 12);
 
    // Add 20 markers to the map at random locations
    var bounds = map.getBounds();
    var southWest = bounds.getSouthWest();
    var northEast = bounds.getNorthEast();
    var lngSpan = northEast.lng() - southWest.lng();
    var latSpan = northEast.lat() - southWest.lat();
 
    for (var i = 0; i < 20; i++) {
      var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
                              southWest.lng() + lngSpan * Math.random());
      map.addOverlay(new GMarker(point));
    }
  }
  // -->
  </script>
  </body>
</html>

**David4** · 09/07/2008, 13h07

En effet, ton code fonctionne bien sous les 2 navigateurs, tu met ton <script> dans le body en fait.

Le soucis, c'est que moi si je fais pareil avec mon script, tout marche bien sauf la création de marker, que ce soit sous FF ou IE. IE me détecte une erreur JS ("caractère attendu") mais je ne sais pas corriger.

Invité · 09/07/2008, 14h26

Salut,

Le script pour la création de la carte et des marqueurs peut être dans un fichier externe.

Voir example ICI
Pour commencer le tracé tu cliques sur le bouton "add etape", puis tu trace le parcours sur la carte. Tu peux y mettre plusieurs étapes. (bon c'est un test)

A+

PS: je ne comprends pas pourquoi il y a deux création de map dans ton script

API GoogleMap ok sous FF mais pas sous IE

JavaScript

Discussions similaires

Partager

Partager