Posez votre question Format imprimable Liste des forums Aidez-les Statistiques Rechercher Charte Forum Programmation

Google map avec des markeurs

Dernière réponse le 4 sep 2009 à 15:48:26 marmar1984, le 3 sep 2009 à 14:07:29

Signaler ce message aux modérateurs

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

Configuration: Windows XP Internet Explorer 7.0

Meilleures réponses pour « google map avec des markeurs » dans :

Cette page

Posez votre question Répondre

boblerondin, le 3 sep 2009 à 18:18:57

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

Répondre à boblerondin

marmar1984, le 4 sep 2009 à 11:32:47

Bonjour,
merci pour votre réponse,je ne comprends pas pourquoi Gpoint non
merci de m'expliquer

Répondre à marmar1984

boblerondin, le 4 sep 2009 à 12:11:30

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);
}

Répondre à boblerondin

marmar1984, le 4 sep 2009 à 13:01:58

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

Répondre à marmar1984

boblerondin, le 4 sep 2009 à 13:48:57

Copie le code plus haut sans rien changer il fnct parfaitement

Répondre à boblerondin

marmar1984, le 4 sep 2009 à 14:02:04

J'ai copié ce code mais lorsque je clique sur le bouton enregistrer il ne fonctionne pas il ya deux markeurs

Répondre à marmar1984

boblerondin, le 4 sep 2009 à 14:17:35

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

Répondre à boblerondin

marmar1984, le 4 sep 2009 à 14:22:52

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());
}

?>

Répondre à marmar1984

boblerondin, le 4 sep 2009 à 14:37:41

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>

Répondre à boblerondin

marmar1984, le 4 sep 2009 à 14:52:28

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

Répondre à marmar1984

boblerondin, le 4 sep 2009 à 15:08:58

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.

Répondre à boblerondin

marmar1984, le 4 sep 2009 à 15:15:49

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

Répondre à marmar1984

boblerondin, le 4 sep 2009 à 15:19:55

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 ?????

Répondre à boblerondin

marmar1984, le 4 sep 2009 à 15:25:11

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

Répondre à marmar1984

boblerondin, le 4 sep 2009 à 15:48:26

A ma connaissance tu peux pas cliquer directement sur la carte pour créer un marker en dynamique.

Répondre à boblerondin

Posez votre question Répondre