Google API V3

Bonjour,

Pour afficher sur la carte de google map on a besoin des latitudes et longitudes des différentes adresses.

Ma question est :
Est-ce qu'on peut configurer les différents markers uniquement avec les adresses en mode : 17 avenue de la pompière CP VILLE ?

Merci

Oui, je l'ai développé pour mes sites WordPress côté admin, comme cela les "webmaters en herbe" n'ont rien à coder, pas même les coordonnées GPS :


Pour ce faire j'ai utilisé la fonction geocoder de l'API, qui convertit l'adresse en coordonnées GPS. J'entre la conversion ainsi obtenue dans un champ input hidden via javascript pour une sauvegarde en base de donnée.

Il y a un moment que j'ai mis en place cette solution, j'ai oublié un peu comment il faut procéder. De mémoire, j'avais suivi un tuto comme celui-ci et l'ai adapté à mes besoins. Pour les parties qui vous concernent ça ressemble à ceci :

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var geocoder;
var map;
// Initialisation de la carte Google Map de départ
function initialiserCarte() {
  geocoder = new google.maps.Geocoder();
  // Centrage de la carte de départ
  var latlng = new google.maps.LatLng(47,3);
  var mapOptions = {
    zoom      : 6,
    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 testAdresse000() {
  // Récupération de l'adresse tapée dans le formulaire
  var adresse = document.getElementById('scriptura_adresse000').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
      document.getElementById('scriptura_google_maps_center').value=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>

Et pour le formulaire correspondant sur la même page :

<tr>
	<th scope="row">
		<label><?php echo __('Center of the map', 'scriptura'); ?></label>
	</th>
	<td>
		<input type="text" id="scriptura_adresse000" name="option[scriptura_adresse000]" value="<?php echo get_option('scriptura_adresse000', ''); ?>" class="regular-text" placeholder="ex : 75000 Paris"/><button type="button" onclick="testAdresse000();" class="button-secondary"><?php echo __('Locate on map', 'scriptura'); ?></button>
		<p class="description"><?php echo __('Enter a location or address', 'scriptura'); ?></p>
		<input type="hidden" id="scriptura_google_maps_center" name="option[scriptura_google_maps_center]" value="<?php echo get_option('scriptura_google_maps_center', ''); ?>">
	</td>
</tr>

Les données sont enregistrées en tableau (option[]). Ne vous occupez pas des fonctions echo __() : elles sont là pour répondre à l'internationalisation des fichiers sous WordPress.