google maps api v3 & php

Par Djase Dub, il y a 11 ans

PHP

Salut tt le monde
comment je peux inserer des adresses des places sur google map
en utilisant php & ajax & gmap3 & jquery
merci

4 réponses

Djase Dub, il y a 11 ans

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

Defy, il y a 11 ans

tien vas voir ici

shinix, il y a 11 ans

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

Pachenko, il y a 11 ans

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".