Salut j'ai plusieurs adresse en bdd qui correspondant chacune à un id bien précis.
J'aimerais en fonction du lien que l'utilisateur a cliqué lui afficher la google map de telle ou telle adresse.
Donc juste une adresse par page.
Le truc c'est que j'ai en ma possession uniquement l'adresse sous la forme: 100 rue du test, 75000, Paris

Merci pour vos lumières
Avec google map on peu integrer un iframe mais le pbm ce sont les coordonnées je pense ....

le code ressemble à ca :

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2812.2914634502044!2d5.7268064!3d45.1811959!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x478af493b9acb8e3%3A0x2df2228ecc12a97d!2s100+Rue+Mallifaud%2C+38100+Grenoble!5e0!3m2!1sfr!2sfr!4v1433401706924" width="600" height="450" frameborder="0" style="border:0"></iframe>

Sinan j'ai un code qui marche très bien mais il mais une position par default qui m'embete beacuoup du coup, ca marche au clic et j'aimerais qua le plan s'affiche directement, je suis une brèle du js
Mon code :

<form>
  <input type="hidden" id="adresse" value="<?php if($ligne['street'] == NULL) { echo "Non renseigné";} else {echo htmlspecialchars ($ligne['street']);}?> , <?php echo htmlspecialchars ($ligne['postcode'].' '.$ligne['city']);?>"/>
  <a id="toggler_plan"><input class="visual_map" type="button"  value="Localiser sur Google Map" onclick="TrouverAdresse();"/></a>

  
</form>

<span class="custom_adress"><?php if($ligne['street'] == NULL) { echo "Non renseigné";} else {echo htmlspecialchars ($ligne['street']);}?> , <?php echo htmlspecialchars ($ligne['postcode'].' '.$ligne['city']);?></span>
<div id="map-canvas" style="height:270px;width:100%; margin-bottom:15px; margin-top:7px"></div>




<script type="text/javascript">
var geocoder;
var map;
// initialisation de la carte Google Map de départ
function initialiserCarte() {
  geocoder = new google.maps.Geocoder();
  // Ici j'ai mis la latitude et longitude du vieux Port de Marseille pour centrer la carte de départ
  var latlng = new google.maps.LatLng(43.295309,5.374457);
  var mapOptions = {
    zoom      : 16,
    center    : latlng,
    mapTypeId : google.maps.MapTypeId.ROADMAP
  }
  // map-canvas est le conteneur HTML de la carte Google Map
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
 
function TrouverAdresse() {
  // Récupération de l'adresse tapée dans le formulaire
  var adresse = document.getElementById('adresse').value;
  geocoder.geocode( { 'address': adresse}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      // Récupération des coordonnées GPS du lieu tapé dans le formulaire
      var strposition = results[0].geometry.location+"";
      strposition=strposition.replace('(', '');
      strposition=strposition.replace(')', '');
      // Affichage des coordonnées dans le <span>
      document.getElementById('text_latlng').innerHTML='Coordonnées : '+strposition;
      // Création du marqueur du lieu (épingle)
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });
    } else {
      alert('Adresse introuvable');
    }
  });
}
// Lancement de la construction de la carte google map
google.maps.event.addDomListener(window, 'load', initialiserCarte);
</script>

Enfin si quelqu'un à la solution

Bonjour,

Il faut en effet partir de ton second code. Là où tu mets une valeur en dur pour initialiser la carte il te suffit en fait d'utiliser une valeur dynamique.
au lieu de

var latlng = new google.maps.LatLng(43.295309,5.374457);

tu pourrais faire quelque chose du genre

var latlng = TrouverAdresse('<?php echo htmlspecialchars($ligne['street'] . ' ' . $ligne['postcode'] . ' ' . $ligne['city']); ?>');

Et adapter ta fonction TrouverAdresse() pour que celle ci prenne en argument l'adresse spécifiée via php (au lieu d'aller la chercher dans un champ du formulaire) et qu'elle appelle la méthode Geocoder.geocode() sur cette adresse et retourne l'objet geometry.location (qui est déjà un objet de type LatLng) et que tu peux donc utiliser pour centrer ta carte sur l'adresse spécifiée à l'initialisation

https://developers.google.com/maps/docu ... /geocoding

Merci pr le petit truc, c'est ok.
J'essai just avec un petit bout de js de le caché par default et faire apparaitre au clik le plan.
Ca marche pr la localisations sur le plan la carte s'affiche au clik mais reste le vide, si je supprime la div : <div id="toggle_plan" style="display:none;"> pas de problème, donc je pense ca vien du hide, comment y remédier , merci encore.

Voilà le code: ( PS: pour l'instant j'ai laisser mon form ).

<form>
  <input type="hidden" id="adresse" value="<?php if($ligne['street'] == NULL) { echo "Non renseigné";} else {echo htmlspecialchars ($ligne['street']);}?> , <?php echo htmlspecialchars ($ligne['postcode'].' '.$ligne['city']);?>"/>
  <a id="toggler_plan"><input class="visual_map" type="button"  value="Localiser sur Google Map" onclick="TrouverAdresse();"/></a>

  
</form>
<div id="toggle_plan" style="display:none;">
<span class="custom_adress"><?php if($ligne['street'] == NULL) { echo "Non renseigné";} else {echo htmlspecialchars ($ligne['street']);}?> , <?php echo htmlspecialchars ($ligne['postcode'].' '.$ligne['city']);?></span>
<div id="map-canvas" style="height:270px;width:100%; margin-bottom:15px; margin-top:7px"></div>
</div>

et le petit bout de js:

<script type='text/javascript'>
jQuery(document).ready(function()
{
   // On cache la zone de texte
   jQuery('#toggle_plan').hide();
   // toggle() lorsque le lien avec l'ID #toggler est cliqué
   jQuery('a#toggler_plan').click(function()
  {
      jQuery('#toggle_plan').toggle(400);
      return false;
   });
});
</script>

oki le script tel quel me va... mais au lieu d'afficher les coordonnées par default...
Je souhaite mettre une image ( une boussole ).
Le script qu'on avait plus haut empeche l'affichage du marker, mais tt iré bien si au lieu des coordonnée gps de marseille je pouvais y mettre une photo, si oui comment, merci encore.

<script type="text/javascript">
var geocoder;
var map;
// initialisation de la carte Google Map de départ
function initialiserCarte() {
  geocoder = new google.maps.Geocoder();
  // Ici j'ai mis la latitude et longitude du vieux Port de Marseille pour centrer la carte de départ
  var latlng = new google.maps.LatLng(43.295309,5.374457);
  var mapOptions = {
    zoom      : 14,
    center    : latlng,
    mapTypeId : google.maps.MapTypeId.ROADMAP
  }
  // map-canvas est le conteneur HTML de la carte Google Map
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
 
function TrouverAdresse() {
  // Récupération de l'adresse tapée dans le formulaire
  var adresse = document.getElementById('adresse').value;
  geocoder.geocode( { 'address': adresse}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      // Récupération des coordonnées GPS du lieu tapé dans le formulaire
      var strposition = results[0].geometry.location+"";
      strposition=strposition.replace('(', '');
      strposition=strposition.replace(')', '');
      // Affichage des coordonnées dans le <span>
      document.getElementById('text_latlng').innerHTML='Coordonnées : '+strposition;
      // Création du marqueur du lieu (épingle)
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });
    } else {
      alert('Adresse introuvable: ' + status);
    }
  });
}
// Lancement de la construction de la carte google map
google.maps.event.addDomListener(window, 'load', initialiserCarte);
</script>