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