Discussion :

[josse34]

Bonjour!
J'utilise Joomla3 avec RSformPRO pour mes formulaires, le seul hic étant que ce composant ne permet qu'un seul et unique positionnement initial de la carte malgré la possibilité de le faire sur les coordonnées.
En clair, voici un exemple concret : https://www.astracontrol.com/TESTFORM3MAPCENTER , le positionnement de la carte est sur Paris alors que les coordonnées en dessous ont été fournies par un code PHP pointant sur Montpellier, assez déroutant pour un utilisateur!

J'ai donc demandé cette possibilité à l'éditeur mais il ne réalise pas de code à la demande mais m'indique :

You can control the center, marker of the Google map with the help of the `rsformmapxxx`, `rsformmarkerxxx` variables. You can retrieve the actual variable names by inspecting the source code of your form page, the `xxx` syntax needs to be replaced with the actual component id.
You could try using a custom Javascript that uses these variables in order to control the center and marker of the generated Google map, this needs to be triggered when the page is loaded.

Une zone dans RSformPRO permet l'appel à du javascript, c'est ici qu'il faut que j’insère un script permettant de piquer le center: new google.maps.LatLng(48.858221,2.294446), pour le transformer selon un script PHP en 42.858221,2.294446 par exemple. J'en profiterais pour changer le type google.maps.MapTypeId.ROADMAP, en HYBRID.

Voici le script d'appel de la carte :

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
<script type="text/javascript">
var rsformmap3102; var geocoder; var rsformmarker3102;
function rsfp_initialize_map3102() {
	geocoder = new google.maps.Geocoder();
	var rsformmapDiv3102 = document.getElementById('rsform-map3102');
	rsformmap3102 = new google.maps.Map(rsformmapDiv3102, {
		center: new google.maps.LatLng(48.858221,2.294446),
		zoom: 18,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		streetViewControl: false
	});
 
	rsformmarker3102 = new google.maps.Marker({
		map: rsformmap3102,
		position: new google.maps.LatLng(42.858221,2.294446),
		draggable: true
	});
 
	google.maps.event.addListener(rsformmarker3102, 'drag', function() {
		geocoder.geocode({'latLng': rsformmarker3102.getPosition()}, function(results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				if (results[0]) {
					document.getElementById('formgps').value = rsformmarker3102.getPosition().toUrlValue();
				}
			}
		});
	});
}
google.maps.event.addDomListener(window, 'load', rsfp_initialize_map3102);
 
rsfp_addEvent(document.getElementById('formgps'),'keyup', function() { 
	rsfp_geolocation(this.value,3102,'formgps',rsformmap3102,rsformmarker3102,geocoder, 0);
});
 
</script>

Avez vous une idée de comment faire cela?

Grand merci et bonne journée / année à tous!

Bye

[NoSmoking]

Bonjour,
j'ai vraiment du mal à comprendre où est le problème.

Code :

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

1
2
3
// définition du point de centre
var centre = new google.maps.LatLng(42.858221,2.294446);
oMap.setCenter( centre);

[josse34]

Désolé, je me suis certainement mal exprimé!

Mille excuses également, je viens de recréer le lien https://www.astracontrol.com/TESTFORM3MAPCENTER , en y regardant la source, on y vois la variable de positionnement initiale center: new google.maps.LatLng(48.858221,2.294446), et le type mapTypeId: google.maps.MapTypeId.ROADMAP,

Ce code est généré automatiquement par RSform PRO, je souhaite donc simplement attraper les variables de positionnement et type initiaux pour les modifier en PHP avant que la carte ne soit affichée.

En ce qui me concerne, l'ajout en JS de ton code ne me change rien, mais je ne maîtrise pas bien la chose!

Merci de ton aide!

Bye

[NoSmoking]

Ce code est généré automatiquement par RSform PRO

pourquoi dans ce cas ne pas mettre ton propre code qui ne représente somme toute que quelques lignes.

[josse34]

Pas con ton idée!!
Je sais faire mais pas la géolocalisation et le rendu en coordonnées.

Je viens de trouver cela mais :

• Comment en sortir les coordonnées GPS
• Est il possible de limiter le geocoding à la France métro?
• Est il possible d'activer la "divination" de l'adresse durant la frappe?

Merci!

[NoSmoking]

Je sais faire mais pas la géolocalisation, as tu un exemple...

reprend le code qui t'est mis à disposition ou inspire toi de la documentation officielle.
Geocoding Service

[josse34]

Merci NoSmocking,

En fait, le seul exemple correspondant à peu prés à mes besoins se trouve ici mais même après ta correction, je ne parviens pas à le faire fonctionner (voir pièce jointe ou ce lien)

Je souhaiterais une carte comme celle ci (j'ai l'impression de grande differences avec le code exemple google, est ce trop vieux?) avec :

• le marqueur draggable
• un bouton pour géolocalisation automatique
• un input pour taper l'adresse avec présentation de la liste des adresses probables en cours de frappe.
• input pour sortir les coordonnées GPS

Merci

[josse34]

Bon à force de persister, j'ai BEAUCOUP avancé !! voir pièce jointe ou :

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
 
<style>
  html, body, #map-canvas {
    margin: 0px;
    min-width: 100%;
    height: 500px;
    padding: 0px
  }
  #geocoding {
    width : 60%; 
    margin : auto 
  }
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var geocoder;
var map;
  function initialize() 
  {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(43.558323,4.069036);
      var mapOptions = 
      {
        zoom: 18,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.HYBRID    
      }
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
 
      marker = new google.maps.Marker
      ({
        map: map,
        draggable: true,
        position: new google.maps.LatLng(43.558323,4.069036),
        icon: "https://www.astracontrol.com/KML/markers/South.png"    
      });
 
      function update() 
      {
        document.getElementById('gpscoor').value = [marker.getPosition().lat(),marker.getPosition().lng()];
      }
 
    google.maps.event.addListener(marker, 'position_changed', update);
       google.maps.event.addListener(map, 'click', function(event) 
       {
          var pos0 = (event.latLng);
          marker.setPosition(pos0);
       });
 
 
  }  
 
 
 
  function codeAddress()
  {
    var address = document.getElementById('address').value;
      geocoder.geocode( { 'address': address}, function(results, status) 
      {
          if (status == google.maps.GeocoderStatus.OK)
          {
            map.setCenter(results[0].geometry.location);
            marker.setPosition(results[0].geometry.location);
          } else {
            alert('Adresse inconnue : ' + status);
          }
      });  
  }
 
  function geolocation() 
  {    
      if(navigator.geolocation)
      {
          navigator.geolocation.getCurrentPosition(function(position) 
          {
            var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            map.setCenter(pos);
            marker.setPosition(pos);
          });
      } else {
        alert('Impossible de vous localiser automatiquement');
      }
  }  
 
google.maps.event.addDomListener(window, 'load', initialize);
 
</script>
 
<div id="geocoding">  
Votre adresse : <input id="address" type="textbox" size="50" style="text-align:center;">
<input type="button" value="Localiser cette adresse" onclick="codeAddress()">
ou <input type="button" value="Géolocalisation automatique" onclick="geolocation()">
</div>
<br>
<div id="map-canvas"></div>
<br>
Coordonnées GPS : <input id="gpscoor" type="text" size="50" style="text-align:center;" readonly>

Il ne me semble pas avoir relevé d'erreur particulière, néanmoins je souhaiterais rajouter :
- Dans la fonction codeAddress rajouter l'apparition d'une liste à cliquer en cours de frappe des lieux probables ainsi que la limitation de ces recherches à la France uniquement.
- Empêcher un utilisateur de placer le marker en dehors de la France.

Merci!!!!

[NoSmoking]

- Dans la fonction codeAddress rajouter l'apparition d'une liste à cliquer en cours de frappe des lieux probables ainsi que la limitation de ces recherches à la France uniquement.

il existe dans la librairie places quelque chose qui devrait t'intéresser.

- Empêcher un utilisateur de placer le marker en dehors de la France.

tu peux toujours essayer avec le geocoding service et vérifier que le pays est bien dans la réponse formatted_address.