google maps api v3 & php

merci mais j'ai cherché dans pas mal de site et j'ai rien trouvé

J'ai rien compris à ton message... tu veux insérer des adresses sur Google Map ?

Salut Djase,

Voilà l'aide que je peux t'apporter,

Commence par ajouter la librairie Google Map : https://maps.googleapis.com/maps/api/js

Imaginons que tu rentres l'adresse d'une personne dans un champ, il faut que tu puisses obtenir deux paramètres essentiels, c'est la latitude ainsi que la longitude

Pour les obtenir, on va se créer une fonction :

    function codeAddress(address) {
        var geocoder = new google.maps.Geocoder(); //J'utilise une fonction de la librairie que j'ai importé
        geocoder.geocode( { 'address': address}, function(results, status) { //Je lui donne l'adresse que je souhaite trouver
         if (status == google.maps.GeocoderStatus.OK) { //Si Google Map a trouvé cette adresse.
             var code = []; 
             code['latitude']  = results[0].geometry.location.k; //Je récupére la latitude grâce à la réponse
             code['longitude'] = results[0].geometry.location.D; // Ainsi que la longitude
             doAjax(code); // Je fais un appel Ajax pour enregistrer les informations de l'adresse grâce à mon tableau.
          }
      }); 
    }

Ca reste très basique.

Ensuite, il faut pouvoir envoyer les données que tu as récupéré de l'adresse (logitude, latitude) pour pouvoir positionner un marqueur sur la Map.

Tu te créé une balise html qui va contenir ta map :

<div id="googlemap"></div>

Ensuite dans ta partie JS :

var $googleMap = $('#googlemap'); //Je récupère l'élément 
$googleMap.Map(coords); //coords est un tableau de coordonées

Tu peux, si tu le souhaites, te créer un petit plugin jQuery que tu agrémenteras par la suite

$.fn.Map = function(c) { // le paramètre c représente un tableau de coordonnées
    var settings = $.extend({
        home: { latitude: 46.4452382, longitude: 2.8455487 }, // on centre par défaut sur la carte de la france par exemple
        zoom: 5

    }, c );

    var coord = new google.maps.LatLng(settings.home.latitude, settings.home.longitude);

    return this.each(function() {
        var element = $(this);

        var options = {
            zoom: settings.zoom,
            scrollwheel: false,
            center: coord,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: true,
            scaleControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.DEFAULT
            },
            overviewMapControl: true
        };

        var map = new google.maps.Map(element[0], options);

        var coords = new google.maps.LatLng(c[0].latitude, c[0].longitude);

        var marker = new google.maps.Marker({
            position: coords,
            map: map,
            draggable: false
        });

        addInfoWindow(marker);

        function addInfoWindow(marker) {
            google.maps.event.addListener(marker, 'click', function () {
                infoWindow.open(map, marker);
            });
        }
    });
};

Je t'ai rajouté une fonction qui permet d'avoir une interaction au clic sur le "marker".