11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous !

j'ai une page web sur laquelle je veux intégrer un google map (google API)

anciennement, le body de cette page commencait avec :

<body onLoad="boucle_images2();" >


Mais mon body doit être comme ceci pour faire fonctionner Google API :

<body onload="load()" onunload="GUnload()">


Une question se posait alors : comment faire pour mixer les deux ?

recherche Google et je tombe avec ça :

<body onload="boucle_images2();load()" onunload="GUnload()">


Cela marche parfaitement sous IE7.0 mais pas sous Firefox 3.0.2
et c'est bien la première fois que ça m'arrive dans ce sens...

Quelqu'un a une idée ?

Merci d'avance !
Modifié par Ollivier (25 Sep 2008 - 13:57)
Salut,

tu pourrais utiliser la méthode suivante :
// fonction addEvent (http://www.scottandrew.com/weblog/jsjunk)
function addEvent(oElem, sEvType, fn, bCapture)
{
   return oElem.addEventListener?
      oElem.addEventListener(sEvType, fn, bCapture):
      oElem.attachEvent?
         oElem.attachEvent('on' + sEvType, fn):
         oElem['on' + sEvType] = fn;
}

addEvent(window, 'load', boucle_images2, false);
addEvent(window, 'load', load, false);
addEvent(window, 'unload', GUnload, false);

A+
ça a l'air sympas...

où ça se place ? tout dans le head ?
Modifié par Ollivier (25 Sep 2008 - 10:12)
Ollivier a écrit :

où ça se place ? tout dans le head ?
Yep !
...
<script type="text/javascript"><!--
// fonction addEvent (http://www.scottandrew.com/weblog/jsjunk)
function addEvent(oElem, sEvType, fn, bCapture)
{
   return oElem.addEventListener?
      oElem.addEventListener(sEvType, fn, bCapture):
      oElem.attachEvent?
         oElem.attachEvent('on' + sEvType, fn):
         oElem['on' + sEvType] = fn;
}

addEvent(window, 'load', boucle_images2, false);
addEvent(window, 'load', load, false);
addEvent(window, 'unload', GUnload, false);
//--></script>
</head>
<body>
...
C'est bon j'ai refais, ça marche !

Heu, pendant que j'y suis avec ce google API, je génère un formulaire plus bas dans la page et je recupère une adresse et un code postal dans une BDD que j'insère ensuite directement dans le formulaire. L'utilisateur peut ensuite cliquer sur un bouton pour rechercher cette adresse, voici le code :

      <form action="#" onsubmit="afficherAdresse(this.address.value); return false"> 
        <p> 
          <input type="text" size="88" name="address" value="<?php echo $adresse ?>&nbsp;<?php echo $cp ?>" /> 
          <input type="submit" value="Localiser !" /> 
        </p> 
        <div id="map" style="width: 760px; height: 400px"></div> 
      </form>


Ma question : n'y aurait t-il pas un moyen de générer la carte automatiquement ? sans passer par ce formulaire ?

Voici le code Goggle API que je place dans le HEAD :


    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=MA CLEF PERSO"
      type="text/javascript"></script>
    <script type="text/javascript"> 
      //<![CDATA[ 
    
      var map = null; 
      var geocoder = null; 
    
      function load() { 
        if (GBrowserIsCompatible()) { 
          map = new GMap2(document.getElementById("map")); 
          map.setCenter(new GLatLng(48.9, 2.3), 7); 
          map.addControl(new GSmallMapControl()); 
          map.addControl(new GMapTypeControl()); 
          geocoder = new GClientGeocoder(); 
        } 
      } 
    
      function afficherAdresse(address) { 
        if (geocoder) { 
          geocoder.getLatLng( 
            address, 
            function(point) { 
              if (!point) { 
                alert(address + " introuvable"); 
              } else { 
                map.setCenter(point, 13); 
                var marker = new GMarker(point); 
                map.addOverlay(marker); 
                marker.openInfoWindowHtml(address); 
              } 
            } 
          ); 
        } 
      } 
      //]]> 
</script>

Modifié par Ollivier (25 Sep 2008 - 10:18)
j'attends juste de voir si qqun a une solution pour cette google map... (pas évident la première fois qu'on s'en sert !)