|
|
|
|
|
SOMMAIRE
Sur cette page vous trouverez 3 outils permettant de déterminer les coordonnées d'un point.
COMMENT DÉTERMINER LE CENTRE D'UNE CARTE GOOGLE MAPS (première version)
 A l'aide de cet outil, vous aurez la possibilité de rechercher les coordonnées (longitude/latitude) d'un point.
Coordonnées qui seront utiles pour établir le centre d'une carte Google Maps ou d'un endroit à marquer.
Vous trouverez ci-dessous le code à insérer pour réaliser un tel outil.
<html>
<head>
<title>Application Google Maps : Coordonnées d'un point</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=
ABQIAAAAFw0lDRKsdCra15LPvIxvehS3Kl_ZRrzIrsFqDz8GBXIeW1O52xQh3P31Xg2eTvqFRAyuOMY4dQrRQw"
type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
function load()
{
if (GBrowserIsCompatible())
{
// draggableCursor:"crosshair" modifie le ciurseur de la souris en croix
var map = new GMap2(document.getElementById("map"), {draggableCursor:"crosshair"});
map.setCenter(new GLatLng(46.98025, 3.66943), 6);
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
// Ajoute la commande de zoom par la roulette de souris
map.enableScrollWheelZoom();
// Ajoute un événement "d'écoute" qui captera les coordonnées du point survolé par la souris
// Ces coordonnées seront affichées dans le calque "message" sous la carte
GEvent.addListener(map, "moveend",
function()
{
var center = map.getCenter();
document.getElementById("message").innerHTML = center.toString();
});
}
}
//]]></script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
<!-- "message" est l'identifiant du calque qui recevra les coordonnées du point survolé par la souris -->
<div id="message"></div>
</body>
</html>
|
Utiliser l'outil :
Positionner votre curseur sur votre région et double cliquez sur le bouton gauche de votre souris la carte se recentrera sur ce point.
En cliquant sur le "+" (ou en agissant sur la roulette de votre souris) vous zoomerez et à chaque fois recentrez la carte en double cliquant la position pour la quelle vous souhaitez déterminer les coordonnées.
Continuez jusqu'au zoom maximun afin d'obtenir la précision maximum.
Résultat :
Retour au sommaire
COMMENT DÉTERMINER LE CENTRE D'UNE CARTE GOOGLE MAPS (deuxième version)
La second version affiche les coordonnées (longitude / latitude) d'un point de la carte cliqué.
<html>
<head>
<title>Application Google Maps : Coordonnées d'un point</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=
ABQIAAAAFw0lDRKsdCra15LPvIxvehS3Kl_ZRrzIrsFqDz8GBXIeW1O52xQh3P31Xg2eTvqFRAyuOMY4dQrRQw"
type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
function load()
{
if (GBrowserIsCompatible())
{
// draggableCursor:"crosshair" modifie le ciurseur de la souris en croix
var map = new GMap(document.getElementById("map"), {draggableCursor:"crosshair"});
map.setCenter(new GLatLng(46.98025, 3.66943), 6);
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
map.enableScrollWheelZoom();
// Ajoute un événement "d'écoute" qui captera les coordonnées du point survolé par la souris
// Ces coordonnées seront affichées dans la bulle
GEvent.addListener(map,"click", function(overlay,latlng)
{
if (overlay) { return; }
// Construction du texte qui sera affiché dans la bulle
// Ce texte contiendra toutes les informations de coordonnée et de zoom
var myHtml = "<b>Latitude :</b> " + latlng.lat() + "<br/><b>Longitude :</b> " + latlng.lng()
+ "<br/><b>Zoom :</b> " + map.getZoom() + "<br/><b>Coordonnées :</b><br/> " + latlng;
map.openInfoWindow(latlng, myHtml);
});
}
}
//]]></script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
<!-- "message" est l'identifiant du calque qui recevra les coordonnées du point survolé par la souris -->
<div id="message"></div>
</body>
</html>
|
Utiliser l'outil :
Positionner la carte sur la région souhaitée en la faisant glisser (laisser enfoncé le bouton gauche de votre souris, une main apparaît et déplasser la à votre guise).
En cliquant sur le "+" (ou en agissant sur la roulette de votre souris) vous zoomerez et à chaque fois recentrez la carte vers la position pour la quelle vous souhaitez déterminer les coordonnées.
Continuez jusqu'au zoom maximun afin d'obtenir la précision maximum.
A ce moment, cliquez sur le point pour lequel vous souhaitez connaître les coordonnées, une bulle contenant les coordonnées et la valeur de zoom s'ouvrira.
Résultat :
Retour au sommaire
COMMENT DÉTERMINER LE CENTRE D'UNE CARTE GOOGLE MAPS (troisième version, ajouté le 21/01/2009)
La troisième version affiche les coordonnées (longitude / latitude) d'un marqueur placé sur la carte. Si l'on déplace le marqueur la valeur de la cordonnées sous carte se modifie en fonction de la nouvelle position
<html>
<head>
<title>Application Google Maps : Coordonnées d'un point</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=
ABQIAAAAFw0lDRKsdCra15LPvIxvehS3Kl_ZRrzIrsFqDz8GBXIeW1O52xQh3P31Xg2eTvqFRAyuOMY4dQrRQw"
type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
function load()
{
if (GBrowserIsCompatible())
{
var mapform = new GMap2(document.getElementById("mapform"));
geocoder = new GClientGeocoder(); //Création d'une instance "geocoder"
if (geocoder)
{
// L'adresse est ici déclarée mais vous pouvez par l'intermédiaire d'une
// variable PHP rendre l'adresse dynamique
// La même adresse sera copiée dans la fonction "alert()"
// "geocoder.getLatLng" va convertir en coordonnées l'adresse
geocoder.getLatLng('France 48300 langogne', function(point)
{
if (!point) // L'adresse n'est pas connue par Google Maps
{
mapform.setCenter(new GLatLng(50.0, 4.0), 7);
alert('France 48300 langogne pas trouvé');
}
else // L'adresse est connue par Google Maps
{
mapform.setCenter(point, 13); // Centrage de la carte
// Instantiation de l'objet "markerD" déplaçable
var markerD = new GMarker(point, {draggable: true});
mapform.addOverlay(markerD); // Affichage du marqueur
// Affichage des coordonnées dans la fenêtre sous la carte
document.SearchCenter.CoordGM.value = point.toString();
// "Écoute" d'un déplacement du marqueur, si c'est le cas
// modification des coordonnées dans la fenêtre sous la carte
GEvent.addListener(markerD, "drag", function()
{
document.getElementById("location").value=markerD.getPoint().toUrlValue();
});
}
});
}
mapform.addControl(new GMapTypeControl());
mapform.addControl(new GLargeMapControl());
mapform.enableScrollWheelZoom();
mapform.addControl(new GOverviewMapControl());
mapform.addControl(new GScaleControl());
mapform.addOverlay(markerD);
markerD.enableDragging();
}
}
//]]></script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="mapform" style="width: 500px; height: 300px"></div>
<form method="GET" name="SearchCenter">
<input type="text" id="location" name="CoordGM" readonly><br>
</form>
</body>
</html>
|
Utiliser l'outil :
Étant que l'adresse a été traduite par le "Geocoder" de Google, le marqueur se prépositionne.
En enfonçant le bouton gauche de votre souris, vous pouvez déplace le marqueur, en relachant celui-ci, le marqueur prendra sa nouvelle position
Les coordonnées de la nouvelle position sont alors actualisée dans la boîte sous la carte.
Les commandes de zoom, de type de carte et de déplacement sont toujours d'actualité.
Résultat :
Retour au sommaire
|
|
|
|
