Google Map : Marqueur déplaçable et récupération coordonnées GPS dans MySQL

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par arnaud_76, 9 Août 2010.

  1. arnaud_76
    arnaud_76 Nouveau WRInaute
    Inscrit:
    9 Août 2010
    Messages:
    3
    J'aime reçus:
    0
    Bonjour,

    Dans un formulaire (ou l'internaute indique sa ville et autres........), je souhaiterais insérer une carte google map avec marqueur déplaçable. Ceci afin que l'internaute géolocalise précisément son lieux de résidence......
    J'aimerais lors de l'envoi du formulaire pouvoir stocker dans une base de données MySQL les coordonnées GPS (latitude et longitude) du marqueur que l'internaute aura précisément placé.

    N'ayant pas de connaissance en AJAX pour l'instant je cale......
    j'ai bien trouvé un tuto pour obtenir les coordonnées GPS...... mais je ne sais pas comment les insérer dans ma base de données....
    (http://www.touraineverte.com/aide-documentation-exemple-tutoriel-didac ... ostale.htm)

    Merci par avance pour votre aide.
    Arnaud
     
  2. HawkEye
    HawkEye WRInaute accro
    Inscrit:
    23 Février 2004
    Messages:
    13 932
    J'aime reçus:
    5
    Ca m'intéresse également.
    L'affichage de la carte, je devrais m'en sortir, mais la détermination des coordonnées, je ne comprends pas :(
     
  3. OTP
    OTP WRInaute accro
    Inscrit:
    16 Décembre 2005
    Messages:
    14 715
    J'aime reçus:
    3
    J'ai un script (récupéré sur WRI) qui place les coordonnées dans le presse papier.
    Si ça peut aider.
    A priori, le plus dur doit être fait, l'insertion SQL ne devant pas être compliqué.
     
  4. UsagiYojimbo
    UsagiYojimbo WRInaute accro
    Inscrit:
    23 Novembre 2005
    Messages:
    11 912
    J'aime reçus:
    75
    Plus simple encore, en partant de l'exemple. Si on observe la fonction afficheCoordonnees(point), celle-ci prend en paramètre le marqueur, qui est un object constitué au moins de deux choses, sa latitude point.lat() et sa longitude point.lng().

    Pas très compliqué donc, à ce niveau, d'envoyer ses deux infos à un script ajax qui sauverait en base de données ces deux informations.
     
  5. arnaud_76
    arnaud_76 Nouveau WRInaute
    Inscrit:
    9 Août 2010
    Messages:
    3
    J'aime reçus:
    0
    Merci beaucoup pour vos réponses.

    Comme je n'y connais vraiment rien en Ajax, je vais lire "Premières applications Web avec Ajax, jQUERY et PHP" de JM Defrance.... Je l'avais acheté il y a plusieurs mois.... Cela va permettre de comprendre Ajax et de ne pas bricoler sur d'autres points de mon site.....

    D'ici quelques temps (enfin quelques semaines, il fait plus de 400 pages) je vous publierais mon code google map.

    Merci à vous
    Arnaud
     
  6. UsagiYojimbo
    UsagiYojimbo WRInaute accro
    Inscrit:
    23 Novembre 2005
    Messages:
    11 912
    J'aime reçus:
    75
    En fait je ne pense pas qu'il y ait besoin d'avoir recours à un bouquin pour comprendre le principe de la communication asynchrone.

    Comme je l'ai dit dans mon précédent billet, l'objet point, qui est transmis à afficheCoordonnees() contient les infos qu'on cherche à enregistrer en base de données.

    On va également supposer qu'on utilise la librairie js prototype, ce qui va permettre de simplifier les appels (notamment leur portabilité).

    On part de la fonction principale
    Code:
    function geocodeAdresse(addresse) {
    	if (geoCodeur) {
    		geoCodeur.getLatLng(
    			addresse,
    			function(point) {
    				if (!point) {
    					alert("Impossible de géolocaliser cette adresse" + addresse);
    				} else {
    					maCarte.addControl(new google.maps.LargeMapControl());
    					maCarte.addControl(new google.maps.MapTypeControl());
    					maCarte.addControl(new google.maps.OverviewMapControl());
    					maCarte.addControl(new google.maps.ScaleControl());
    					marker = new google.maps.Marker(point, {draggable: true});
    					google.maps.Event.addListener(marker, 'dragstart', function() {
    						maCarte.closeInfoWindow();
    					});
    					google.maps.Event.addListener(marker, 'dragend', function(point) {
    						centreCarte();
    					});
    					google.maps.Event.addListener(marker, "drag", function(point) {
    						afficheCoordonnees(point);
    					});
    					maCarte.clearOverlays();
    					maCarte.addOverlay(marker);
    					maCarte.setCenter(point, 15);
    					afficheCoordonnees(point);
    
                                            //appel Ajax pour enregistrement des coordonnées en base
                                            //on passe au script PHP register.php la latitude et la longitude
                                            var urlCoords =  "http://<?php echo $_SERVER['SERVER_NAME'']; ?>register.php?latitude='+point.lat()+'&longitude='+point.long();
        var reqCoords = new Ajax.Request(urlCoords, {
            method: 'get',
            onSuccess: function(transport) {
            }
        });	
    
    				}
    			}
    		);
    	}
    }
    
    Et dans register.php, tu récupère donc les donnés latitude et longitude :

    Code:
    if (isset($_GET['latitude']) && is_numeric($_GET['latitude']))
    {
         $latitude = $_GET['latitude'];
    }
    if (isset($_GET['longitude']) && is_numeric($_GET['longitude']))
    {
         $longitude = $_GET['longitude'];
    }
    if (isset($longitude) && isset($latitude))
    {
         $sql = "INSERT INTO table (latitude, longitude) VALUES (".$latitude.",".$longitude.")";
         $res = mysql_query($sql);
    }
    
    Bien sûr tu auras sans doute besoin de sauver d'autres infos en base avec la latitude et longitude, de manière à identifier a qui sont associées ces coordonnées. Il suffira juste de passer également ces données au script register.php.

    Il faut également penser à rendre accessible, dans register.php, la connexion au serveur mysql.
     
  7. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 153
    J'aime reçus:
    325
    Le tuto de touraineverte que tu nous montre est toujours avec l'API Google Maps v2 qui est dépréciée, c'est dommage de faire du nouveau avec une API dépréciée.
    Voici un tuto bcp plus simple que touraineverte pour l'API v3 et avec auto-complétion:
    http://tech.cibul.org/geocode-with-google-maps-api-v3/

    Edit: exemples réalisés (champ lieu):
    -http://iziads.be/fr/annonces/form
    -http://eaupotable.info/fr/posts/form
     
  8. arnaud_76
    arnaud_76 Nouveau WRInaute
    Inscrit:
    9 Août 2010
    Messages:
    3
    J'aime reçus:
    0
    Merci beaucoup pour vos aides précieuses....
     
Chargement...
Similar Threads - Google Map Marqueur Forum Date
Supprimer son compte google maps pour cause d'avis négatifs YouTube, Google Images et Google Maps 10 Décembre 2020
Search Console Google n'explore pas les liens du sitemap (de desindexation) Crawl et indexation Google, sitemaps 6 Juillet 2020
GoogleMyMap Avertissement de redirection YouTube, Google Images et Google Maps 6 Mai 2020
WordPress Créer un sitemap simple pour Google Débuter en référencement 9 Mars 2020
Ajouter un texte sur une carte Google Maps (JS) Développement d'un site Web ou d'une appli mobile 15 Janvier 2020
Ranker dans les résultats Google maps YouTube, Google Images et Google Maps 1 Août 2019
Référencement google maps Débuter en référencement 28 Juillet 2019
Annuaires payants pour référencement Google Map Annuaires et moteurs 16 Juillet 2019
3D globe terrestre google maps API JS Développement d'un site Web ou d'une appli mobile 2 Décembre 2018
Comment indiquer mon sitemap XML à Google ? Crawl et indexation Google, sitemaps 13 Août 2018