[WP.org] google maps add save button

lamouche69 · Membre · février 9, 2021 at 4:01

Bonjour,

Cela fait deux semaines que j’essaie d’intégrer un bouton submit à infoWindow sur une carte google…

Je n’y connais rien en java (je m’y connais seulement en php, css, html, mysql)…

Autodidacte j’avoue bloquer complet et c’est déjà un exploit que j’ai réussi à mettre en place ce code tel qu’il est… Mais là je suis à bout…

Quelqu’un pourrait m’aider?

javascript:

<script type="text/javascript">
var bounds;
var markers = [];
var markerCount = 0;
	function initialize(){
			bounds = new google.maps.LatLngBounds();
			var myLatLng = new google.maps.LatLng(46.775090, 2.507969);
			var mapOptions={
				zoom: 6,
				center: myLatLng,
				maxZoom: 11,
			},
			map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
			setMarkers(map,marker);
			const geocoder = new google.maps.Geocoder();
			document.getElementById("submit").addEventListener("click", () => {
			  geocodeAddress(geocoder, map);
			});

	}
	
	function setMarkers(map,locations){
		for(var i=0; i<locations.length; i++){
			var station = locations[i];
			var myLatLng = new google.maps.LatLng(station['marker_latitude'], station['marker_longitude']);
			var infoWindow = new google.maps.InfoWindow();
			var image = 'https://marchad.fr/wp-includes/images/marchad.png';
			var description = station['marker_text'];
			
			
			var marker = new google.maps.Marker({
				position: myLatLng,
				map: map,
				icon: image,
				title: station['marker_ville']
			});
			
			(function(i){
				google.maps.event.addListener(marker, "click",function(){
					var station = locations[i];
					var contentString = ("<div id='infoWindow'>"
						+"<p class='texte'><strong>"+station['marker_text']+"</strong><p>"
						+"<p class='texte'>Ce staliad est géré par un "+station['marker_user_type']+"<p>"
						+"<p class='texte'><strong>Adresse : </strong>"+station['marker_adresse']+"<p>"
						+"<p class='texte'><strong>Jour de permanence : </strong>"+station['marker_day']+"<p>"
						+"<p class='texte'><strong>Dépôts : </strong>de "+station['marker_depot_start_time']+" à "+station['marker_depot_end_time']+"<p>"
						+"<p class='texte'><strong>Retraits : </strong>de "+station['marker_start_time']+" à "+station['marker_end_time']+"<p>"
						+"<p class='texte'><strong>Téléphone : </strong>"+station['marker_user_contact']+"<p>"
						+"<p class='texte'><strong>Mail : </strong>"+station['marker_contact_mail']+"<p>"
						+"<p class='texte'><strong>Commentaire : </strong>"+station['marker_commentaire']+"<p>"
						+"</div>"
);	
					infoWindow.close();
					infoWindow.setContent(contentString);
					infoWindow.open(map,this);
					
					var input = document.createElement('input');
				   input.setAttribute('type', 'button');
				   input.setAttribute('value','Edit');
				   function editPreference(preference){ }
				   google.maps.event.addDomListener(input, "click", editPreference);

				});
				
				
					
				
			})(i);
		}
	}

 
		
	function geocodeAddress(geocoder, resultsMap) {
        const address = document.getElementById("address").value;
        geocoder.geocode({ address: address }, (results, status) => {
          if (status === "OK") {
            resultsMap.setCenter(results[0].geometry.location);
            new google.maps.Marker({
              map: resultsMap,
              position: results[0].geometry.location,
            });
			markerCount++;
      		markers[markerCount] = marker;
      
      		// extend the bounds here to consider each location
      		bounds.extend(results[0].geometry.location);
			// then call fitBounts()
      		resultsMap.fitBounds(bounds);
          } else {
            alert(
              "Geocode was not successful for the following reason: " + status
            );
          }
        });
    }

	google.maps.event.addDomListener(window, 'load', initialize);
	
	function myFunction() {
  		infoWindow.setContent('<div style="background-color: green">' 
		+ infoWindow.getContent() + "</div>");
	}
	
	
</script>

<script type="text/javascript">
function initializeAutocomplete(id) {
  var element = document.getElementById(id);
  if (element) {
    var autocomplete = new google.maps.places.Autocomplete(element, { types: ['geocode'] });
    google.maps.event.addListener(autocomplete, 'place_changed', onPlaceChanged);
  }
}

function onPlaceChanged() {
  var place = this.getPlace();
  var latitude = place.geometry.location.lat();
  var longitude = place.geometry.location.lng();
  document.getElementById('lat').value = latitude;
  document.getElementById('lng').value = longitude;
  // console.log(place);  // Uncomment this line to view the full object returned by Google API.

  for (var i in place.address_components) {
    var component = place.address_components[i];
    for (var j in component.types) {  // Some types are ["country", "political"]
      var type_element = document.getElementById(component.types[j]);
      if (type_element) {
        type_element.value = component.long_name;
      }
    }
  }
}

google.maps.event.addDomListener(window, 'load', function() {
  initializeAutocomplete('user_input_autocomplete_address');
});
</script>

<a href="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false&language=fr&key=AIzaSyAuqfPBE0NGwQVdpOW3j31jHG-yw9iSR8o&callback=initMap">https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false&language=fr&key=AIzaSyAuqfPBE0NGwQVdpOW3j31jHG-yw9iSR8o&callback=initMap</a>

php :

 $catMarkers 				= wcfmmp_getAllMarkersActif("Oui", "Oui");
  $allMarkersJson 			= json_encode($catMarkers);

<div id="floating-panel">
      <label>Indiquez votre adresse : </label><input id="address" type="textbox" value="Sydney, NSW" />
      <input id="submit" type="button" value="Geocode" />
    </div>
	
	<div id="map-canvas"  style="width:90%; height:600px;"></div>
	
	<script>
    	var marker = <?php echo $allMarkersJson ?>
			
		google.maps.event.addListener(marker, 'mouseover', function() {
			$(document).ready(function(){
			$('input[type=checkbox]').click(function(){
			  if($(this).is(':checked')){
			   // alert($(this).attr('id'));  
				  alert ("checked");
			 }   
			else {alert("unchecked");}
			 });
		   });
		});
    </script>

mysql :

//__Affiche tous les points actifs sur une Google Maps
	function wcfmmp_getAllMarkersActif($markerActif = "Oui", $iconeActif = "Oui" ) {
        global $wpdb;
		
		$sql = "SELECT * FROM markers LEFT OUTER JOIN markers_users ON (markers.marker_id) = (markers_users.mark_id) ";

		
        $datas = $wpdb->get_results($sql);
		
		var_dump($datas);
		
		$array = array();
	
		foreach ($datas as $resultat){
			$count[] = $resultat;
		}
	
		return $count; // Accès au résultat

    }

J’ai testé de nombreuses façons d’intégrer un bouton à ce code… MAis sans résultat.

Je voudrais juste savoir comment ajouter un bouton qui traitera un formulaire basique (marker_id, user_id) à insérer dans une seconde bdd (markers_users). Le but de la manoeuvre étant de permettre à des utilisateurs d’inscrire leur paricipation à un « marché » organisé par un autre utilisateur (ce marché étant enregistré dans la bdd markers).

J’espère que c’est à peu près clair… D’habitude je me débrouille toujours seuls mais la je ne sais plus quoi faire…

Merci d’avance à ceux qui voudront bien m’aider.

L’adresse du blog concerné est (visible uniquement pour les utilisateurs connectés).

airodyssey · Modérateur · février 9, 2021 at 8:05
Copier le lien
Bonjour. Vous êtes sur le forum WordPress.com. Nous sommes habilités à répondre uniquement aux questions sur les sites WordPress qui sont hébergés par WordPress.com.

Votre site fonctionne lui aussi sous WordPress, mais il n’est pas hébergé sur les serveurs de WordPress.com. Veuillez donc reposer votre question à l’adresse : https://wpfr.net/support/

Pour mieux comprendre, je vous invite à lire attentivement cette annonce importante : https://wordpress.com/fr/forums/topic/important-ce-forum-est-reserve-aux-sites-heberges-par-wordpresscom/

Merci et bonne continuation.

Le sujet ‘[WP.org] google maps add save button’ est fermé aux nouvelles réponses.

[WP.org] google maps add save button

Vous n’avez pas trouvé ce dont vous avez besoin ?

Contactez-nous

Parcourir nos guides

Applications mobiles

Réseau social