Affichage d'une carte map google après requête Ajax

**nadia85** · 14/04/2021, 15h44

Bonjour à tous,

Je suis débutante en Ajax et je souhaite l'utiliser pour afficher une carte map google.

Pour cela, j'ai écrit un fichier getMap.php qui, en l’exécutant tout seul, affiche avec succès la carte de paris.

Maintenant, je souhaite loader le contenu du fichier getMap.php (la carte) dans le second fichier index.php en appelant la fonction carte() dans index.php.

Dans index.php j'ai utilisé deux input texte pour faire entrer les coordonnées et un bouton, qui en cliquant dessus, la fonction carte() est exécutée.

carte() récupère les cordonnées et les envoie avec Ajax à getMap.php.

Puis dans la fonction success de carte() j'exécute le code $('#idmap').html(data);, avec idmap l'id du div dans lequel je veux afficher la carte dans le fichier index.php.

Sauf que l'affichage de la carte ne s'effectue pas dans le div du fichier index.php.
Est ce que quelqu’un pourrait m'aider à trouver le problème et Merci d'avance.
index.php

Code html :

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
<!DOCTYPE html>
<html>
<header>
<title>Gestion hotel</title>
<!--    <link rel="stylesheet" href="css/bootstrap.min.css"> -->
<script src="jQuery-2.1.4.min.js"></script>
</header>
<body>
<center>
Entrer vos coordonéées: <br> <input type="text" id="longitude" value=""> <br>
<input type="text" id="latitude" value=""> <br>
<input type="button" onclick="carte()" value="Afficher carte">  <br>
</center>
<div id="idmap">
</div>
</body>
</html>
<script>
function carte() {
    longitude = $('#longitude').val();
    latitude = $('#latitude').val();
    map1 = "map1";
    $.ajax({
        type: 'POST',
        data: {
            longitude: longitude,
            latitude: latitude,
            map1: map1
        },
        async: 'false',
        cache: 'false',
        dataType: 'text',
        url: "getMap.php",
        success: function(data) {
            alert("success");
            $('#idmap').html(data);
            //$('#idmap').css("visibility","visible");
        }
    })
}
</script>

getMap.php

Code html :

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
<?php
$longitude=$_POST['longitude'];
$latitude=$_POST['latitude'];
$map1=$_POST['map1'];
$longitude=48.852969; /* j'ai remplacé les coordonnees entrees par la page index.php par ces valeurs*/
$latitude=2.349903;
?>
<!DOCTYPE html>
<html>
<script src="jQuery-2.1.4.min.js"></script>
<meta charset="utf-8">
<script src="https://maps.google.com/maps/api/js?key=AIzaSyATyEwdEKVPa7tNKQcHj1pSKaC9heDIo54" type="text/javascript"></script>
<script async type="text/javascript">
// On initialise la latitude et la longitude de Paris (centre de la carte)
var lat = < ? php echo $longitude; ? > //48.852969;
var lon = < ? php echo $latitude; ? > //2.349903;
var map = null;
// Fonction d'initialisation de la carte
function initMap() {
    // Créer l'objet "map" et l'insèrer dans l'élément HTML qui a l'ID "map"
    map = new google.maps.Map(document.getElementById("map1"), {
        // Nous plaçons le centre de la carte avec les coordonnées ci-dessus
        center: new google.maps.LatLng(lat, lon),
        // Nous définissons le zoom par défaut
        zoom: 11,
        // Nous définissons le type de carte (ici carte routière)
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        // Nous activons les options de contrôle de la carte (plan, satellite...)
        mapTypeControl: true,
        // Nous désactivons la roulette de souris
        scrollwheel: false,
        mapTypeControlOptions: {
            // Cette option sert à définir comment les options se placent
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
        },
        // Activation des options de navigation dans la carte (zoom...)
        navigationControl: true,
        navigationControlOptions: {
            // Comment ces options doivent-elles s'afficher
            style: google.maps.NavigationControlStyle.ZOOM_PAN
        }
    });
}
window.onload = function() {
    // Fonction d'initialisation qui s'exécute lorsque le DOM est chargé
    initMap();
};
alert(lat);
alert(lon);
alert(map1);</script>
<style type="text/css">
#map1{ /* la carte DOIT avoir une hauteur sinon elle n'apparaît pas */
        height:200px;
        width:200px;
        left:0px;
        top:0px;
}
</style>
 
 <div id="map1">
</div>
<!-- <script>
$('#map1').css("visibility","visible");
</script>-->
</html>

getMap.php - index.php

**ProgElecT** · 14/04/2021, 16h02

Salut

Moi je commencerai par mettre la partie <script> function carte(){ .... }</script> dans la partie <body> .... </body>

**nadia85** · 15/04/2021, 13h09

Bonjour,

Merci pour votre réponse.

J'ai déplacé la fonction carte() dans la partie body, mais toujours rien n'est affiché.

Quand j'inspecte le code d'index.php dans le navigateur chrome, la div est vide.

Quand j’exécute le fichier getMap.php seul, la carte s'affiche sans problème. Mais le problème est quand j'essaie de l'afficher dans le contenu d'index.php en utilisant la fonction carte().

Pourriez-vous m'aider à résoudre le problème?

Merci d'avance

**Dave Hiock** · 15/04/2021, 15h47

\ô/
ton retour d'Ajax n'interprète pas le script contenu dans la page insérée, pourquoi ne pas intégrer ta carte directement dans ta page index.php, quelle est la plus value de procéder ainsi ?

**nadia85** · 15/04/2021, 22h17

Bonsoir à tous,

J'ai intégré la carte directement et ça marche. Mais je voudrais exploiter Ajax pour l'affichage et pour plus de modularité (minimiser le code dans index.php).
Est ce que cela n'a pas d'issue?

Merci

**NoSmoking** · 17/04/2021, 10h48

Bonjour,

Mais je voudrais exploiter Ajax pour l'affichage et pour plus de modularité (minimiser le code dans index.php).

sur ce coup Ajax n'aura que peu d'utilité, pour la modularité par contre tu peux mettre le script de ta carte dans un fichier .js séparé.

**nadia85** · 17/04/2021, 18h52

Bonjour à tous,

Oui, j'ai séparé les deux fichiers et ça marche. Mais ça reste l'exécution avec Ajax avec deux fichiers indépendants: un qui contient le code d'affichage de la carte et l'autre contenant la fonction qui appelle le premier fichier.
Je suis encore plantée là.

Merci et bonne journée

**NoSmoking** · 22/04/2021, 08h53

Oui, j'ai séparé les deux fichiers et ça marche.

alors de quoi se plaint-on !!

Mais ça reste l'exécution avec Ajax avec deux fichiers indépendants: ...

Là je ne comprends plus ce que tu cherches à faire avec Ajax ?

... un qui contient le code d'affichage de la carte

pour moi c'est un fichier, par exemple, ma-carte.js, que l'on intègre à la page via un

Code html :

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

<script src="ma-carte.js"></script>

**nadia85** · 28/04/2021, 19h37

Bonjour à tous,

Merci pour votre aide.

L'affichage se fait normalement quand j’inclus tout le code dans la même page d’accueil (index.php) par exemple.

Mais mon idée est de séparer le code d'affichage dans un fichier appelé (getMap.php). Et dans index.php je lui fait un appel en utilisant une fonction qui utilise ajax.

le code des deux fichier est donné ci-joint.

Remarque: quand vous exécutez getMap.php tout seul, l'affichage de la carte se fait normalement.

Merci d'avance
Bonne journée

getMap.php

index.php

**NoSmoking** · 29/04/2021, 11h17

Je ne vois vraiment pas l'intérêt de séparer ces deux fichiers d'autant que lors de ton appel Ajax tu ne fais rien de particulier attendu que tu ne transfères aucun paramètre.

Ta logique m'échappe complétement

**nadia85** · 29/04/2021, 23h31

Bonjour à tous,

OK, je vais utiliser un seul fichier.

Merci pour votre aide.

Affichage d'une carte map google après requête Ajax

AJAX

Discussions similaires

Partager

Partager