Google map avec des markeurs
Résolu
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
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
16 réponses
-
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 -
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> -
bonjour,
merci pour votre réponse,je ne comprends pas pourquoi Gpoint non
merci de m'expliquer -
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);
} -
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 -
Copie le code plus haut sans rien changer il fnct parfaitement
-
j'ai copié ce code mais lorsque je clique sur le bouton enregistrer il ne fonctionne pas il ya deux markeurs
-
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 -
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());
}
?> -
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 -
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. -
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 -
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 ????? -
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 -
a ma connaissance tu peux pas cliquer directement sur la carte pour créer un marker en dynamique.
-
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.
