Sujet Précédent Sujet Suivant

Google map avec des markeurs

Résolu/Fermé
marmar1984 Messages postés 40 Date d'inscription samedi 1 août 2009 Statut Membre Dernière intervention 5 février 2010 - 3 sept. 2009 à 14:07
 Simon - 14 juin 2010 à 10:57
Bonjour,
bonjour,
j'ai essayé de créer une carte google map avec des markeurs en javascript
à chaque fois qu'on crée des markeurs sur la carte je clicke sur le bouton enregistrer pour les enregistrer dans la base de donné.jai réalisé ce code
il m'affiche une page blanche,je suis vraiment débloqué ,quelle est ma faute
voici mon code:


<script src="http://maps.google.com/..." type="text/javascript"></script>
<title>GoogleMap</title>
<script>
function createMarker(point,message) {
var icon = new GIcon(G_DEFAULT_ICON);
icon.image = "http://www.numabilis.com/files/demos/google-maps/blue-dot.png";

var options = {
icon: icon,
draggable: true
};
var marker = new GMarker(point, options);
GEvent.addListener(marker, "dragstart", function() {
map.openInfoWindowHtml(message);
});

GEvent.addListener(marker, "dragend", function() {
marker.closeInfoWindowHtml(message);
});

GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(message);
});

return marker;
}
function load() {
if (GBrowserIsCompatible()) {
var Lat=50.009481 // rentrez ici votre longitude
var Lng=0.00287 // rentrez ici votre lattitude
var Zoom=16 // rentrez ici le zoom désiré entre 1 et 16
var message="Mes souvenirs sont ici"; // rentrez ici votre texte qui sera affiche sur le point marqueur

var map = new GMap2(document.getElementById("map")); // affiche le module
map.setCenter(new GLatLng(Lat,Lng ),Zoom ); //affiche la carte au lieu précisé
map.addControl(new GSmallMapControl()); // affiche le curseur de zoom
map.addControl(new GMapTypeControl()); // affiche le curseur de déplacement

var point = new GLatLng(Lat,Lng);
if(point)
{ pt = new Gpoint(point.x,point.y);
mark = new GMarker(pt);
map.addOverlay(mark);
map.getCenter(point);
var lat=point.y;
var marker = createMarker(point,message);
map.addOverlay(marker); // ces 3 lignes définissent le point et sa légende
}
}
function save()
var latlng= marker.getLatLng();
var lat=latlng.lat();
var lng=latlng.lng();
var url="sql.php";
GDownloadUrl(url,function(date,responseCode){
if(responseCode==200 && data.length<=1)
{ marker.closeInfoWindow();
document.getElementById("message").innerHTML = "Location added.";
}
});
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width:600px;height:400px"></div>
<input type="button" value="enregistrer" onClick="javascript:save();">
</body>

merci pour votre aide
A voir également:

16 réponses

Réponse 1 / 16
boblerondin
3 sept. 2009 à 18:18
Salut,
Ton code est mal indenté (manque des parentheses)
Gpoint n'existe pas.
Pour la function save il manque des lignes

voici ton code modifé

<script type="text/javascript">

function createMarker(point,message) {
var icon = new GIcon(G_DEFAULT_ICON);
icon.image = "http://www.numabilis.com/files/demos/google-maps/blue-dot.png";
var options = {
icon: icon,
draggable: true
};
var marker = new GMarker(point, options);
GEvent.addListener(marker, "dragstart", function() { map.openInfoWindowHtml(message); });
GEvent.addListener(marker, "dragend", function() {marker.closeInfoWindowHtml(message);});
GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(message);});
return marker;
}

function load() {
if (GBrowserIsCompatible()) {
var Lat= 48.8530240 // rentrez ici votre longitude
var Lng= 2.3497110 // rentrez ici votre lattitude
var Zoom=16 // rentrez ici le zoom désiré entre 1 et 16
var message="Mes souvenirs sont ici"; // rentrez ici votre texte qui sera affiche sur le point marqueur

var map = new GMap2(document.getElementById("map")); // affiche le module
map.setCenter(new GLatLng(Lat,Lng ),Zoom ); //affiche la carte au lieu précisé
map.addControl(new GSmallMapControl()); // affiche le curseur de zoom
map.addControl(new GMapTypeControl()); // affiche le curseur de déplacement

var point = new GLatLng(Lat,Lng);
if(point){
mark = new GMarker(point.x,point.y);
map.addOverlay(mark);
map.getCenter(point);
var lat=point.y;
var marker = createMarker(point,message);
map.addOverlay(marker); // ces 3 lignes définissent le point et sa légende
}
}
}

function save(){
var latlng= marker.getLatLng();
var lat=latlng.lat();
var lng=latlng.lng();
var url="sql.php";
GDownloadUrl(url,function(date,responseCode){
if(responseCode==200 && data.length<=1){
marker.closeInfoWindow();
document.getElementById("message").innerHTML = "Location added.";
}
});
}

</script>
</head>

<body onload="load()" onunload="GUnload()">
<div id="map" style="width:600px;height:400px"></div>
<input type="button" value="enregistrer" onClick="javascript:save();">
</body>

Bon courage
5
Réponse 2 / 16
boblerondin Messages postés 9 Date d'inscription jeudi 3 septembre 2009 Statut Membre Dernière intervention 10 septembre 2009 1
4 sept. 2009 à 14:37
GDownloadUrl permet d'envoyer des data vers la carte pas de les récupérer.

Si tu veux envoyer une requête vers le serveur tu dois utiliser ajax

Si tu connais pas ajax utilise un formulaire en php :

<form id="save" method="post" action="$_SERVER['SELF_PHP']" >
<input type="submit" value="enregistrer">
</form>
1
Réponse 3 / 16
marmar1984 Messages postés 40 Date d'inscription samedi 1 août 2009 Statut Membre Dernière intervention 5 février 2010
4 sept. 2009 à 11:32
bonjour,
merci pour votre réponse,je ne comprends pas pourquoi Gpoint non
merci de m'expliquer
0
Réponse 4 / 16
boblerondin Messages postés 9 Date d'inscription jeudi 3 septembre 2009 Statut Membre Dernière intervention 10 septembre 2009 1
4 sept. 2009 à 12:11
Bjr,

Gpoint = point très certainement

Dans ton code tu affiche 2 fois le meme Marker
1ere fois
Marker -> var point = new GLatLng(Lat,Lng);
pt = new Gpoint(point.x,point.y);
mark = new GMarker(pt);
map.addOverlay(mark); //affiche un marker en 0,0 normal Gpoint n'existe pas
map.getCenter(point);

2eme fois
var marker = createMarker(point,message); //affiche un marker a la bonne position
map.addOverlay(marker);
}
0

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

Posez votre question
Réponse 5 / 16
marmar1984 Messages postés 40 Date d'inscription samedi 1 août 2009 Statut Membre Dernière intervention 5 février 2010
4 sept. 2009 à 13:01
bonjour,
j'ai enlever cette ligne pt = new Gpoint(point.x,point.y);
et j'ai laissé juste cela mark = new GMarker(point.x,point.y);
il ya toujours les mémes fautes.
est ce que vous pouvez m'aider
merci
0
Réponse 6 / 16
boblerondin Messages postés 9 Date d'inscription jeudi 3 septembre 2009 Statut Membre Dernière intervention 10 septembre 2009 1
4 sept. 2009 à 13:48
Copie le code plus haut sans rien changer il fnct parfaitement
0
Réponse 7 / 16
marmar1984 Messages postés 40 Date d'inscription samedi 1 août 2009 Statut Membre Dernière intervention 5 février 2010
4 sept. 2009 à 14:02
j'ai copié ce code mais lorsque je clique sur le bouton enregistrer il ne fonctionne pas il ya deux markeurs
0
Réponse 8 / 16
boblerondin Messages postés 9 Date d'inscription jeudi 3 septembre 2009 Statut Membre Dernière intervention 10 septembre 2009 1
4 sept. 2009 à 14:17
En effet.

Supprime les lignes suivantes :

mark = new GMarker(point.x,point.y);
map.addOverlay(mark);
map.getCenter(point);
var lat=point.y;

Pour Enregistrer la function save est incomplète envoi le reste du code
0
Réponse 9 / 16
marmar1984 Messages postés 40 Date d'inscription samedi 1 août 2009 Statut Membre Dernière intervention 5 février 2010
4 sept. 2009 à 14:22
voici la fonction save:
function save()
{
var latlng= marker.getLatLng();
var lat=latlng.lat();
var lng=latlng.lng();
var url="sql.php?lat="+ lat + "&lng=" + lng;
GDownloadUrl(url,function(data,responseCode){
if(responseCode==200 && data.length<=1)
{ marker.closeInfoWindow();
document.getElementById("message").innerHTML = "Location added.";
}
});
}
le code de fichier sql.php:

<?php
require("connexion.php");
//prend les données de paramétres de l'URL

$lat = $_GET['lat'];
$lng = $_GET['lng'];


// ouvrir une connexion au serveur mysql
$connection=mysql_connect ("localhost", $username, $password);
if (!$connection) {
die('Not connected : ' . mysql_error());
}

// recupére la base de donné mysql
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
die ('Can\'t use db : ' . mysql_error());
}


//insérer une nouvelle colonne avec les données de l'utilisateur
$query = sprintf("INSERT INTO markers " .
" (lat, lng ) " .
" VALUES ('%s', '%s');",

mysql_real_escape_string($lat),
mysql_real_escape_string($lng));

$result = mysql_query($query);

if (!$result) {
die('Invalid query: ' . mysql_error());
}

?>
0
Réponse 10 / 16
marmar1984 Messages postés 40 Date d'inscription samedi 1 août 2009 Statut Membre Dernière intervention 5 février 2010
4 sept. 2009 à 14:52
j'ai pas compris est ce que je remplace cette ligne
var url="sql.php?lat=" + lat + "&lng=" + lng;
GDownloadUrl(url,function(data,responseCode)
par <form id="save" method="post" action="$_SERVER['SELF_PHP']" >
<input type="submit" value="enregistrer">
</form>
est que vous pouvez m'expliquer
merci
0
Réponse 11 / 16
boblerondin Messages postés 9 Date d'inscription jeudi 3 septembre 2009 Statut Membre Dernière intervention 10 septembre 2009 1
4 sept. 2009 à 15:08
Déjà il faut récupérer la position du Marker

var posMarker = marker.getPoint(); // récupère la position duMarker dans la variable posMarker
et l'envoyer en ajax vers ton serveur

Qui créer les Marker sur la carte ?

Si c'est toi tu connais forcément la position Lat Long du point (marker)
ou alors tu veux récupérer la position par exemple de la "tour eiffel" et la sauver dans une base ?

J'ai pas compris la finalité ton code.
0
Réponse 12 / 16
marmar1984 Messages postés 40 Date d'inscription samedi 1 août 2009 Statut Membre Dernière intervention 5 février 2010
4 sept. 2009 à 15:15
oui c'est moi qui crée les markeurs dans différentes emplacement
je veux sauvegarder ces markeurs dans une base de donné
j'ai développé cette fonction mais elle ça marche pas
0
Réponse 13 / 16
boblerondin Messages postés 9 Date d'inscription jeudi 3 septembre 2009 Statut Membre Dernière intervention 10 septembre 2009 1
4 sept. 2009 à 15:19
Je comprend rien...

Dans ton code tu créer un marker avec :

var Lat = 50.009481 // rentrez ici votre longitude
var Lng = 0.00287 // rentrez ici votre lattitude

Tu les récupère ou ces valeurs lat et lng ?????
0
Réponse 14 / 16
marmar1984 Messages postés 40 Date d'inscription samedi 1 août 2009 Statut Membre Dernière intervention 5 février 2010
4 sept. 2009 à 15:25
j'ai pas des valeurs précis je les récupère par hasard
je veux lorsque je clique sur un emplacement je crée le markeur et avec le bouton enregistrer je sauvegarde le markeur
0
Réponse 15 / 16
boblerondin Messages postés 9 Date d'inscription jeudi 3 septembre 2009 Statut Membre Dernière intervention 10 septembre 2009 1
4 sept. 2009 à 15:48
a ma connaissance tu peux pas cliquer directement sur la carte pour créer un marker en dynamique.
0
Réponse 16 / 16
Simon
14 juin 2010 à 10:57
Bonjour,

En fait c'est possible de créer un marker en cliquant sur la carte... Le problème c'est que je ne sais pas comment ça marche ! mais j'ai utilisé le module GMAP avec le CMS Drupal, et dans la configuration du module il était possible de le mettre en place. Il suffisait de cliquer sur la carte, et GoogleMap sortait la latitude et longitude du clic. Je l'ai utilisé et ça permettait aux utlisateurs de se positionner sur tout le monde entier, et donc ensuite de générer une carte avec tous les utilisateurs dessus.

Désolé de ne pas vous apporter plus, mais sachez juste que c'est possible...

Simon.
0