Google Map API bug

Sujet résolu

11 juillet 2016 à 11:30:07

Bonjour,

Je suis novice en javascript mais j'ai besoin d'afficher une map sur mon site. J'ai donc tenté de suivre le tuto suivant : https://openclassrooms.com/courses/google-maps-javascript-api-v3

J'ai donc ce code dans ma page :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">


    <head>

        <title>Tutoriel Google Maps</title>

        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

        <!-- Elément Google Maps indiquant que la carte doit être affiché en plein écran et

        qu'elle ne peut pas être redimensionnée par l'utilisateur -->

        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

        <!-- Inclusion de l'API Google MAPS -->

        <!-- Le paramètre "sensor" indique si cette application utilise détecteur pour déterminer la position de l'utilisateur -->

        <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(46.779231, 6.659431);

                //objet contenant des propriétés avec des identificateurs prédéfinis dans Google Maps permettant

                //de définir des options d'affichage de notre carte

                var options = {

                    center: latlng,

                    zoom: 19,

                    mapTypeId: google.maps.MapTypeId.ROADMAP

                };

                

                //constructeur de la carte qui prend en paramêtre le conteneur HTML

                //dans lequel la carte doit s'afficher et les options

                var carte = new google.maps.Map(document.getElementById("carte"), options);

            }

        </script>

    </head>


    <body onload="initialiser()">

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

    </body>

</html>

Quand je lance la page, la carte s'affiche pendant une demi seconde puis j'ai une message d'erreur :

"Petit problème... Une erreur s'est produite

Google Maps ne s'est pas chargé correctement sur cette page. Pour plus d'informations techniques sur cette erreur, veuillez consulter la console JavaScript."

la console renvoie l'erreur suivante :

11:22:44,636 "Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error"1 js:32:179
_.ab() js:32
Qm/this.f</<() common.js:51
_.kz</<() common.js:190
zm/c() common.js:45
<anonyme> AuthenticationService.Authenticate:1

En effet je n'ai pas rentré de clé, (j'en ai une mais je ne voit pas où la placer dans le code)

Merci d'avance pour votre aide !!

N'hésitez pas à visiter mon site en construction et à donner des avis :) Merci !! Lien : http://foxwork.esy.es/

Krogoth

11 juillet 2016 à 17:20:57

Bonjour,

Je pense que si tu vaus avoir des réponses c'est mieux d'enlever le tag résolu

Un petit +1 si je vous ai aidé est toujours appréciable :).

AntoineStartup

11 juillet 2016 à 17:28:34

non non j'ai bien résolu mon problème après des énièmes tests

N'hésitez pas à visiter mon site en construction et à donner des avis :) Merci !! Lien : http://foxwork.esy.es/

Krogoth

11 juillet 2016 à 18:34:29

La personne qui rencontre un jour le même problème que toi serra heureux de le savoir....

Un petit +1 si je vous ai aidé est toujours appréciable :).

AntoineStartup

11 juillet 2016 à 19:01:38

Effectivement alors j'ai simplement changé la ligne 20 :

Avant c'était

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Désormais :

<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AZFZERGOPNRGPNERGPIONERGPN&exp&sensor=false&libraries=places">sensor=false"></script>

J'ai donc ajouté ceci :key=AZFZERGOPNRGPNERGPIONERGPN

Attention, la valeur de la variable key est à récupérer en créant un projet google API. C'est un simple clé qui permet l'utilisation de google map. Ils ont fait ça pour pouvoir nous faire accepter des conditions d'utilisations.

A bientot !!

-
Edité par AntoineStartup 11 juillet 2016 à 19:02:57

N'hésitez pas à visiter mon site en construction et à donner des avis :) Merci !! Lien : http://foxwork.esy.es/

adel4ever

30 octobre 2016 à 7:46:45

si je veux le tester sur mon site au localhost je choisi quoi pour qu'il me donne la clé, est ce ce je le donne ip:127.0.0.1 ? ou mon ip?

MounaGhorbel

3 janvier 2017 à 10:22:45

bonjour,

moi aussi mon site est en réseau local, et j'ai la même erreur (j'utilise la composante ZH GoogleMap)

Quelqu'un a une idée comment résoudre ?

Merci

GtariAbir

3 février 2017 à 16:02:11

Bonjour,

moi aussi je suis tombée sur le même problème et je vous poste la réponse, ça pourrait être utile à quelques uns ...

J'ai remplacé la ligne suivante :

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

par :

<script src="http://maps.google.com/maps/api/js?key=value_of_my_key&language=fr" type="text/javascript"></script>

Sachant que j'ai obtenu la valeur de key value_of_my_key en suivant ce lien :

https://developers.google.com/maps/documentation/javascript/get-api-key?hl=Fr (cliquer sur le bouton Get A Key ...)

Bon courage à tous,

idilecool

28 avril 2017 à 16:46:56

https://www.youtube.com/watch?v=z1hQgVpfTKU

sur cette vidéo vous trouvera comment mapé votre clé pour pouvoir acceder a l'api méme ne local apres avoir généré la clé @mounaghourbel

AmethThiam1

27 mars 2018 à 13:27:27

Bonjour a tous j'ai le meme messge d'erreur mais moi j'utilise GoogleMapAPI.class.php.

merci de m'aider si vous avez la solution.

Genroa

27 mars 2018 à 14:40:00

C'est un forum dédié au JS ici. Pour des questions liées à des classes PHP, va poser ta question sur le forum PHP.

/!\ Si je cesse de répondre c'est parce que vous êtes venus poster sans avoir suivi les cours de base sur le sujet. /!\

ŇåîmåĖłÅbîåd

4 mars 2019 à 16:30:29

bonjour, j'ai besoin d'afficher une map sur mon site mais j'ai un problème en relation avec la maniére de créer un API pour google maps.

voilà mon code :

<!DOCTYPE html>

<html>

<head>

<title>Simple Map</title>

<style>

/* Always set the map height explicitly to define the size of the div

* element that contains the map. */

#map {

height: 100%;

}

/* Optional: Makes the sample page fill the window. */

html, body {

height: 100%;

margin: 0;

padding: 0;

}

</style>

</head>

<body>

async defer></script>

var map;

function initMap() {

map = new google.maps.Map(document.getElementById('map'), {

center: {lat: 31.6258257, lng: -7.9891608},

zoom: 8

});

}

</script>

</body>

</html>

et voilà le message d'erreur qui s'affiche :

impossible de charger google maps correctement sur cette page.

ClaireBAUJARD

16 juillet 2019 à 11:55:15

Bonjour,

J'ai le même message, mais j'utilise le plugin wordpress mappress. J'ai beau renseigner l'api key de google dans la config du plugin, mais j'ai toujours le message. Quelqu'un a-t-il déjà eu le cas et a trouvé comment le résoudre ?

Merci pour votre aide