ajouter add button google map

Nattydreadnatty, mardi 09 février 2021 à 17h34
Modifié

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 = '/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>

https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false&language=fr&key=&callback=initMap

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 participation à 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.

09/02/21 à 17h34
Modifié

+0 -0

Pas encore membre ?