Sujet Précédent Sujet Suivant

Modifier javascript pour plusieurs données

Résolu/Fermé
Ricky38 Messages postés 4347 Date d'inscription samedi 15 mars 2008 Statut Contributeur Dernière intervention 2 novembre 2013 - Modifié par Ricky38 le 6/11/2010 à 13:18
Ricky38 Messages postés 4347 Date d'inscription samedi 15 mars 2008 Statut Contributeur Dernière intervention 2 novembre 2013 - 6 nov. 2010 à 16:56
Bonjour,

j'aimerais mettre sur un site une carte Google et y insérer des marqueurs ainsi qu'une description quand on clique sur le marqueur.

J'ai déjà un code qui me permet d'afficher 1 marqueur et une description: 

<!DOCTYPE html>  
<html>  
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<style type="text/css">  
  html { height: 100% }  
  body { height: 100%; margin: 0px; padding: 0px }  
  #map_canvas { height: 100% }  
</style>  
<script type="text/javascript"  
    src="http://maps.google.com/maps/api/js?sensor=true">  
</script>  
<script type="text/javascript">  
  function initialize() {  
    var latlng = new google.maps.LatLng(49.366667, -95.133333);  
    var myOptions = {  
      zoom: 5,  
      center: latlng,  
      mapTypeId: google.maps.MapTypeId.ROADMAP  
    };  
    var map = new google.maps.Map(document.getElementById("map_canvas"),  
        myOptions);  
 var contentString = '<div id="content">'+  
    '<div id="siteNotice">'+  
    '</div>'+  
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+  
    '<div id="bodyContent">'+  
    '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +  
    'sandstone rock formation in the southern part of the '+  
    'Northern Territory, central Australia. It lies 335 km (208 mi) '+  
    'south west of the nearest large town, Alice Springs; 450 km '+  
    '(280 mi) by road. Kata Tjuta and Uluru are the two major '+  
    'features of the Uluru - Kata Tjuta National Park. Uluru is '+  
    'sacred to the Pitjantjatjara and Yankunytjatjara, the '+  
    'Aboriginal people of the area. It has many springs, waterholes, '+  
    'rock caves and ancient paintings. Uluru is listed as a World '+  
    'Heritage Site.</p>'+  
    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+  
    'http://en.wikipedia.org/w/index.php?title=Uluru</a> (last visited June 22, 2009).</p>'+  
    '</div>'+  
    '</div>';  

var infowindow = new google.maps.InfoWindow({  
    content: contentString  
});  

var marker = new google.maps.Marker({  
    position: new google.maps.LatLng(43.53, -84.08),  
    map: map,  
    title:"Uluru (Ayers Rock)"  
});  

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

</script>  
</head>  
<body onLoad="initialize()">  
  <div id="map_canvas" style="width:100%; height:100%"></div>  
</body>  
</html>


Maintenant j'aimerais savoir comment faire pour ajouter plusieurs autre marqueurs et leur descriptions.

En passant, j'ai fait une base de données avec comme champs Id, Lat, Lng, Nom, Description et Titre. Il y a surement une façon modifier ce code afin de faire apparaître les marqueurs qui sont dans ma base de données ainsi que leurs descriptions, nom, lat, lng et titre respectifs.

Merci d'avance à ceux qui se pencheront sur mon problème





Tout problème a une solution...il faut juste être persévérant.
A voir également:

11 réponses

Réponse 1 / 11
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
Modifié par avion-f16 le 6/11/2010 à 13:39
Salut.

Il suffit de répéter ces 4 opérations :

- Création d'une variable contenant le contenu de l'infobulle 
var contenu1 = 'Contenu du premier marqueur';


- Création d'une fenêtre d'infos contenant le texte précédemment défini :
var infoWindow1 = new google.maps.InfoWindow({ 
    content: contenu1, 
});


- Création du marqueur :
var marker1 = new google.maps.Marker({ 
    position: new google.maps.LatLng(latitude, longitude), 
    map: map, 
    title: "Titre du marqueur 1" 
})
Où map est l'objet représentant la carte

- Ajout de l'évènement qui permet d'affichage la fenêtre d'info au clic sur le marqueur :
google.maps.event.addListener(marker1 , 'click', function() { 
  infoWindow1.open(map, marker1); 
});



http://www.siteduzero.com/tutoriel-3-262083-google-maps-javascript-api-v3.html
http://code.google.com/intl/fr-FR/apis/maps/documentation/javascript/basics.html
Ton ordinateur ne fait pas ce que tu veux ... mais ce que tu lui dis de faire.
0
Réponse 2 / 11
Ricky38 Messages postés 4347 Date d'inscription samedi 15 mars 2008 Statut Contributeur Dernière intervention 2 novembre 2013 1 458
6 nov. 2010 à 13:44
Salut Avion-f16
merci pour ta réponse

c'est bien ce que je pensais comme solution. Mais étant donné que j'ai environ 1000 entrées dans ma base de données (donc 1000 marqueurs et description) je me demandais s'il y avait une façon de le faire avec du PHP pour aller chercher les informations dans la base et les faire afficher.

Merci beaucoup
0
Réponse 3 / 11
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
6 nov. 2010 à 13:49
Je te propose de créer une fonction en JS qui se charge de faire toutes ces étapes.
Ensuite, en PHP, tu génères le JS qui fait appel à ces fonctions, en passant des variables en argument.

Voilà la déclaration de la fonction JS :
function ajouter_marqueur(titre, contenu, lat, lng) {
    /* Code qui génère le marqueur en utilisant
        les variables titre, contenu, lat et lng */
}


Et l'appel en PHP :
<?php
...

echo '<script type="text/javascript">';
while(...) {
    echo 'ajouter_marqueur("'.$m['titre'].'", "'.$m['contenu'].'", '.$m['lat'].', '.$m['lng'].');';
}
echo '</script>';


J'ai beaucoup simplifié, j'espère que tu comprendras.
0
Réponse 4 / 11
Ricky38 Messages postés 4347 Date d'inscription samedi 15 mars 2008 Statut Contributeur Dernière intervention 2 novembre 2013 1 458
6 nov. 2010 à 14:02
merci encore avion-f16

Oui tu as simplifié beaucoup lolll
Je suis capable de me débrouiller avec le PHP mais le javascript c'est une autre chose.

J'avoue ne pas trop comprendre.

J'ai ce code pour aller chercher mes données dans la table ponts 
<?php
$dbhost ="******"; 
$dbuser ="****";
$dbpass="******";
$dbbase="*******";
@mysql_connect($dbhost,$dbuser,$dbpass) or die("La Connexion a échouée");   
/* On se connecte à la base ou on envoie un message d'erreur */
@mysql_select_db($dbbase) or die("La Base $dbbase n'existe pas");

$requete = mysql_query("SELECT * FROM ponts");


while($donnees = mysql_fetch_array($requete)) 
{ // boucle parcours des resultats
$id = $donnees['Id'];
$lat = $donnees['Lat'];
$lng = $donnees['Lng'];
$nom = $donnees['Nom'];
$description = $donnees['Description'];
$titre = $donnees['Titre'];

?>


Mais pour le reste de ton code je bloque car j'imagine que je dois garder le code de base (mon premier message).

Merci beaucoup pour ton temps
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 11
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
6 nov. 2010 à 14:59
Voilà :
https://gist.github.com/0c12571ee0f83884ecc6
0
Réponse 6 / 11
Ricky38 Messages postés 4347 Date d'inscription samedi 15 mars 2008 Statut Contributeur Dernière intervention 2 novembre 2013 1 458
6 nov. 2010 à 15:12
Re avion-f16

merci beaucoup pour ton code
j'ai bel et bien ajouté mes identifiants pour la base de données mais quand je mets la page en ligne rien ne s'affiche sur la page.

J'essaie de comprendre le pourquoi?

0
Réponse 7 / 11
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
6 nov. 2010 à 15:15
Rien ? Même pas la carte ?
Vois-tu des erreurs en regardant le code source ?
Que te dit la console ?
Y'a-t-il du texte contenant des guillemets ?
0
Réponse 8 / 11
Ricky38 Messages postés 4347 Date d'inscription samedi 15 mars 2008 Statut Contributeur Dernière intervention 2 novembre 2013 1 458
6 nov. 2010 à 15:27
Re,

non rien ne s'affiche, même pas la carte, et aucune erreur.

Bon dans ma base (description) j'ai enlevé les guillemets et les apostrophe.

De plus pour les champs lat et lng je dois mettre des données du style 43.9987 ou -85.87555. Je cherche le type de champs que ça prends pour garder les bonnes données.
0
Réponse 9 / 11
Ricky38 Messages postés 4347 Date d'inscription samedi 15 mars 2008 Statut Contributeur Dernière intervention 2 novembre 2013 1 458
6 nov. 2010 à 15:40
bon ok pour mes données lat et lng c'est correct

Mais je ne vois toujours rien sur ma page

0
Réponse 10 / 11
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
6 nov. 2010 à 16:41
À la ligne 58, ajoute le caractère }
C'est une faute de frappe.
0
Réponse 11 / 11
Ricky38 Messages postés 4347 Date d'inscription samedi 15 mars 2008 Statut Contributeur Dernière intervention 2 novembre 2013 1 458
6 nov. 2010 à 16:56
Ok c'est fait et tout fonctionne à merveille

Merci Beaucoup pour ton expérience et ton temps

Bonne fin de journée mon ami
0