Google maps
Résolu
bonjour,
j'ai besoin d'aide au niveau de mon code
en effet lorsque j'affiche mon marqueur sur google map il affiche les coordonnee de la position du marqueur(lattitude,longitude) mais lorsque je vais deplacer le marqueur sur la carte il ne prend pas en compte la nouvelle position:
voici mon code:
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
var map;
var myCenter=new google.maps.LatLng(5.3096600,-4.0126600);
function initialize()
{
var mapProp = {
center:myCenter,
zoom:10,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var marker = new google.maps.Marker({
position: myCenter,
map:map,
draggable:true,
title:"position initiale!"
});
document.getElementById("lat").value = location.lat();
document.getElementById("long").value = location.lng();
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
<input type="text" id="long">
<input type="text" id="lat">
</body>
</html>
j'ai besoin d'aide au niveau de mon code
en effet lorsque j'affiche mon marqueur sur google map il affiche les coordonnee de la position du marqueur(lattitude,longitude) mais lorsque je vais deplacer le marqueur sur la carte il ne prend pas en compte la nouvelle position:
voici mon code:
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
var map;
var myCenter=new google.maps.LatLng(5.3096600,-4.0126600);
function initialize()
{
var mapProp = {
center:myCenter,
zoom:10,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var marker = new google.maps.Marker({
position: myCenter,
map:map,
draggable:true,
title:"position initiale!"
});
document.getElementById("lat").value = location.lat();
document.getElementById("long").value = location.lng();
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
<input type="text" id="long">
<input type="text" id="lat">
</body>
</html>
5 réponses
-
Donc tu as la solution de Pitet et la mienne qui sont équivalente.
J'avais pas vu celle de Pitet vu que je transformais de mon côté ton code.
Et du coup, pense à passer en résolu ;) -
Salut,
Le problème vient du fait que ta fonction placeMarker() positionne toujours le marker sur les coordonnées myCenter au lieu de prendre la position cliquée par l'utilisateur transmis via le paramètre location de cette fonction.
function placeMarker(location) { var marker = new google.maps.Marker({ position: location, // à la place de myCenter map:map, draggable:true, title:"position initiale!" }); document.getElementById("lat").value = location.lat(); document.getElementById("long").value = location.lng(); }
Bonne journée -
Je préconise également la solution proposée par Spy17.
Elle marche correctement ! -
Sinon, il y a aussi la solution fournie par google :
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d63563.18842788362!2d-4.044910882517792!3d5.309531802545321!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNcKwMTgnMzQuOCJOIDTCsDAwJzQ1LjYiVw!5e0!3m2!1sfr!2sfr!4v1461841173564" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
A intégrer directement en remplacement de ton long code -
Bonjour, si je comprends bien, le but est d'afficher la carte, centré sur Abidjan ?
Mais quel est le soucis ?
Un peu plus d'explication ? :)
Cordialement,
Spy-
-
@cartociD'accord, je crois comprendre.
Quand l'utilisateur clique à un endroit, les coordonnées s'affiche sous la map.
Ce que tu veux c'est que le curseur de google se mette là où l'utilisateur à cliquer. C'est ça ? -
-
@cartociJe pense que tu as suivi ce site ? https://www.cssdebutant.com/
Or, le marqueur est placé lors de la génération de la page.
Par conséquent, je pense qu'il faudrait faire un peu de PHP et placer en $_POST les valeurs récupéré de l'utilisateur et raffraichir la page avec ces coordonnées
Si tu as moyen de tester :) -
-
