11484 sujets

JavaScript, DOM et API Web HTML5

Modérateur
Bonjour,

C'est la première fois que je mets en place une carte avec marqueurs à l'aide de Google maps. Mes premiers essais étaient plutôt concluant mais à présent, la carte ne s'affiche plus.
J'ai regardé le code généré par l'api et ai pu constater que certains scripts avaient été ajoutés :
<script src="https://maps.gstatic.com/cat_js/intl/fr_ALL/mapfiles/api-3/13/11/%7Bcommon,map,util,marker%7D.js" charset="UTF-8" type="text/javascript"></script><script src="https://maps.gstatic.com/cat_js/intl/fr_ALL/mapfiles/api-3/13/11/%7Bonion%7D.js" charset="UTF-8" type="text/javascript"></script><script src="https://maps.gstatic.com/cat_js/intl/fr_ALL/mapfiles/api-3/13/11/%7Bcontrols,infowindow,stats%7D.js" charset="UTF-8" type="text/javascript"></script><script src="https://maps.googleapis.com/maps/api/js/ViewportInfoService.GetViewportInfo?1m6&amp;1m2&amp;1d48.861326999999996&amp;2d-180&amp;2m2&amp;1d48.861328&amp;2d180&amp;2u2&amp;4sfr&amp;5e0&amp;6sm%40227000000&amp;7b0&amp;8e0&amp;9b0&amp;callback=_xdc_._8xreeq&amp;token=34087" charset="UTF-8" type="text/javascript"></script><script src="https://mts0.googleapis.com/mapslt/ft?hl=fr&amp;lyrs=m%40227000000%7Csalt%3A2122054160&amp;las=tu,tw,vu,vw&amp;z=2&amp;src=apiv3&amp;xc=1&amp;style=59%2C37%7Csmartmaps&amp;callback=_xdc_._fcpgdv&amp;token=101635" charset="UTF-8" type="text/javascript"></script><script src="https://maps.googleapis.com/maps/api/js/AuthenticationService.Authenticate?1shttp%3A%2F%2Fjojaba.fr%2Fzdm%2Ftest-gmap.html&amp;5e1&amp;callback=_xdc_._y8gomy&amp;token=121077" charset="UTF-8" type="text/javascript"></script>

Pour mes tests, j'ai dû actualiser la page peut-être une trentaine de fois, guère plus. Or, j'ai le fort doute que l'on m'a bridé. Je sais que des quotas ont été définis mais j'en suis encore loin...
Mais peut-être est-ce dû à l'utilisation intensive sur un laps de temps très court...
Ou peut-être une erreur de codage de ma part...
L'adresse de la page de test est dans le code que je viens de donner...
http://jojaba.fr/zdm/test-gmap.html

Merci d'avance.
**edit*****
J'oubliais de mentionner que mes premiers tests ont été réalisés en plaçant 1499 marqueurs. C'est peut-être ça qui a causé l'arrêt brutal du fonctionnement...
En tout cas, j'ai tenté de créer une nouvelle page de test avec un exemple proposé sur le site des développeurs dont je parle plus haut et pas d'affichage non plus de ma carte.
Comment je fais maintenant pour débloquer la situation Smiley ohwell
**/edit*****
Modifié par jojaba (07 Aug 2013 - 12:00)
Administrateur
As-tu ouvert une clé d'API pour le domaine concerné ? https://developers.google.com/maps/documentation/javascript/tutorial?hl=fr#api_key

Normalement la limite est assez difficile à atteindre même avec des tests (c'est de l'ordre de 5 000 à 25 000 requêtes par jour il me semble).

À ma connaissance une seule balise <script> suffit avec la bonne url pour charger la lib, ensuite tout le reste se passe de ton côté. Il se peut qu'elle injecte d'autres choses dynamiquement mais ça ne devrait pas te concerner directement.
Modérateur
Salut Dew et merci poour le coup de pouce.

Alors je suis allé visiter le lien que tu me donnes. Je ne suis pas sûr d'avoir tout compris.
J'ai bien activé Google Maps v3 dans le menu de gauche "Services". Y-a-t-il autre chose à faire ?
**Edit***
Ben oui, il faut ajouter la clé dans l'appel de l'api !!!
**/Edit***
Modifié par jojaba (07 Aug 2013 - 14:50)
Modérateur
J'ai fait tout ce qu'il fallait, toujours rien !!!
Je me suis rendu-compte (par hasard) que ça fonctionnait lorsque j'enlevais le doctype de la page. J'y comprends plus rien !!!
Modérateur
Ça y est, j'ai trouvé !
En fait, il fallait utiliser des valeurs de largeur et de hauteur en pixels et non en pourcentage (ce qui m'embête bien pour ma page Web, mais on va tâcher de s'adapter...).
Donc au lieu de définir la chose suivante :

#map-canvas {
width: 100%;
height: 100%;
}

Il faut faire :
#map-canvas {
width: 800px;
height: 600px;
}
[/code]

Le liens vers le sujet qui m'a aidé à trouver la solution : http://stackoverflow.com/questions/3217928/google-map-not-working-with-xhtml-doctype-document-type

Pour le script permettant d'utiliser la clé c'est cette ligne-là :

<script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=Votre_Clé_API&amp;sensor=false"></script>

Modifié par jojaba (07 Aug 2013 - 15:44)
Je n'ai aucun problème à utiliser des pourcentage comme valeur avec gmap v3 (avec doctype html5 mais ça ne devrait rien changer).

C'est possible que les pourcentages utilisés (surtout la hauteur) ne sont pas applicable dans le contexte où sont trouve ton élément?
Modérateur
La carte se trouve dans le contexte suivant :

<section id="main" role="main">
  <article>
     <div id="map-canvas"></div>
  </article>
</section>



html {
  width: 100%;
}
body {
width: 100%;
}
section#main {
  margin: 20px auto 0 auto;
  max-width: 960px;
  background: #FFF;
  box-shadow: 0 0 8px #000;
}

#map-canvas {
  width: 800px;
  height: 600px;
  margin: 5% auto;
}


Je ne vois pas ce qui devrait empêcher le bon fonctionnement de l'api dans ce cas "simple".