2 pièce(s) jointe(s)
Affichage d'une carte map google après requête Ajax
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:
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:
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> |
Pièce jointe 595657 - Pièce jointe 595659
affichage map google avec ajax
Bonjour,
Merci pour votre réponse. :plusser:
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
Affichage d'une carte map google après requête Ajax
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
Affichage d'une carte map google après requête Ajax
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
2 pièce(s) jointe(s)
Affichage d'une carte map google après requête Ajax
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
Pièce jointe 596760
Pièce jointe 596761
Affichage d'une carte map google après requête Ajax
Bonjour à tous,
OK, je vais utiliser un seul fichier.
Merci pour votre aide.
