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