Formulaire de contact dans infobulle sous Fusiontable

**tibolemont** · 10/03/2014, 10h36

Bonjour à tous,
Déja ça fait plaisir de trouver des renseignements en Français sur l''API de Google Map, donc merci.
Je viens vers vous car je bloque sur le codage de ma carte.
Je ne suis pas certain de poster dans la bonne rubrique car il y a de l'API de Google, du Javascript, du css, du php et du HTML.

En fait je souhaiterais mettre en place un formulaire de contact dans mes infobulles de mes markers en récupérant les donnée par fusiontable. La personne devrait renseigner son nom, son mail, et son message (logique pour un formulaire de contact), mais voila je bloque, que cela soit sur la mise en page de l'infobulle ou les fonction a appeler pour l'envoie du mail.

J'ai déja pu écrire le code ci dessous:

Code :

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html><html>
<head>
<title>Merge of SF CARTE GROUPE FUSIONNE and TABLE POUR LA FUSION FICHIER SF - Google Fusion Tables</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
    html, body, #googft-mapCanvas {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}
 
 
</style>
 
 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" /><!-- include the stylesheet -->
<script type="text/javascript">
  function initialize() {
    google.maps.visualRefresh = true;
    var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') > -1) ||
      (navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/));
    if (isMobile) {
      var viewport = document.querySelector("meta[name=viewport]");
      viewport.setAttribute('content', 'initial-scale=1.0, user-scalable=no');
    }
    var mapDiv = document.getElementById('googft-mapCanvas');
    mapDiv.style.width = isMobile ? '100%' : '100%';
    mapDiv.style.height = isMobile ? '100%' : '100%';
    var map = new google.maps.Map(mapDiv, {
      center: new google.maps.LatLng(49.28746738673077, 1.3598954105468586),
      zoom: 6,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend-open'));
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend'));
 
 
    layer = new google.maps.FusionTablesLayer({
      map: map,
      heatmap: { enabled: false },
      query: {
        select: "col2\x3e\x3e0",
        from: "1XIexa42celM67ONRVEcJcPNckjjKzO2xhqphc9I",
        where: ""
      },
      suppressInfoWindows: true,
      options: {
        styleId: 2,
        templateId: 2
      }
    });
 
 
    if (isMobile) {
      var legend = document.getElementById('googft-legend');
      var legendOpenButton = document.getElementById('googft-legend-open');
      var legendCloseButton = document.getElementById('googft-legend-close');
      legend.style.display = 'none';
      legendOpenButton.style.display = 'block';
      legendCloseButton.style.display = 'block';
      legendOpenButton.onclick = function() {
        legend.style.display = 'block';
        legendOpenButton.style.display = 'none';
      }
      legendCloseButton.onclick = function() {
        legend.style.display = 'none';
        legendOpenButton.style.display = 'block';
      }
    }
 
  //Add a listener to the layer 
  google.maps.event.addListener(layer, 'click',
  function(e){
      infowindow = new google.maps.InfoWindow({
      });
 
 
      //Set the content of the infowindow to contain a form
      infowindow.setContent("<p>GROUPE DE <b>" + e.row['Firmenname'].value + "</b><br />Adresse: " + e.row['ADRESSECOMPLETE'].value + "</p>" +
                        "<form name='myform' onsubmit='runAlert(this)'>" +
                        "<input type='text' name='country_id' value='name' /><br />" +
                        "<input type='text' name='name' value='Email'/><br />" +
                        "<input type='text' name='location' value='Tapez votre message'/><br />" +
                        "<input type='submit' value='Envoyer' />" +
                        "</form>"); 
      infowindow.setPosition(e.latLng);
      infowindow.open(map);
 });
  layer.setMap(map); 
 
}
 
 
//function that runs on form submit
function runAlert(form) {
    alert(form.name.value + " " + form.location.value);
}
 
 
 
 
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
  <div id="googft-mapCanvas"></div>
</body>
</html>

Au niveau du css je suis presque au point mort car il ne fonctionne pas sur la mise en page de l'infowindow.

Code :

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

1
2
3
/* Infowindow style */.infowindow {
    width: 350px !important;
}

Voila, après il faut créer le fichier php et alors la c'est le néant total pour moi.
En gros suis un peux perdu et donc jee. réclame votre aide bienfaisante.

En vous remerciant d'avance de votre aide.

**NoSmoking** · 11/03/2014, 14h17

Bonjour,

La personne devrait renseigner son nom, son mail, et son message (logique pour un formulaire de contact), mais voila je bloque, que cela soit sur la mise en page de l'infobulle ou les fonction a appeler pour l'envoie du mail.

La mise en page de l'infobulle n'est qu'accessoire devant ce qui te reste à faire

La "fonction" à appeler devra se faire coté serveur et pour cela ou tu submit ton formulaire, ou tu envoies les données coté serveur via Ajax, dans tous les cas c'est coté serveur que tu dois faire les vérifications élémentaire avant mise en base éventuelle.

Voila, après il faut créer le fichier php et alors la c'est le néant total pour moi.

il existe de merveilleux cours Les meilleurs cours et tutoriels PHP.

**tibolemont** · 26/03/2014, 11h27

Merci de ta réponse NoSmoking, j'ai trouvé comment faire maiis via l'API de Google Map et non plus en passant par Fusiontable, mais merci de ta contribution, les tutos m'ont bien aidé, ils sont claire et simple. Et désolé e ma réponse tardive.

Formulaire de contact dans infobulle sous Fusiontable [Google Maps]

APIs Google

Discussions similaires

Partager

Partager