Api google map et marqueur

Signaler
Messages postés
2
Date d'inscription
dimanche 2 octobre 2011
Statut
Membre
Dernière intervention
2 octobre 2011
-
Messages postés
2
Date d'inscription
dimanche 2 octobre 2011
Statut
Membre
Dernière intervention
2 octobre 2011
-
Bonjour
Je tien a m'excuser si je n'ai posté dans le bon topic, mais je n'ai pas trouvé un forum dédie

Je suis novice en programmation, mais pour mon site internet j'aimerai créer une zone d'intervention de 25 km autour de mon domicile.

j'ai trouve ca:

http://google-maps-api-version-2.touraineverte.com/...

ca correspond bien mais j'aimerai soit : au mieux qu'on ai pas a cliquer sur ma ville pour que le rond apparaisse, soitsi ce n'est pas possible, que ma ville soit représenter avec un marquer.

J'ai cherche depuis 10h mais la j'en peu plus je vous demande donc de l'aide..

merci par avance

Si le lien ne marche pas
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="fr">
<head>
<title>Touraineverte.com - dessiner tracer un disque</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<!-- Chargement du script Google AJAX APIs en précisant votre clé -->
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAF0TiLSL7jMWlK4_47lYh4hQiwXaTBl6CORReW0Gn4tuS54KkChRloKxiZZlccEtYQ_T2Rpek0n5jtQ"></script>
<script type="text/javascript">
/* Chargement du module "maps" dans sa version "2.x" */
google.load("maps", "2.x",{"other_params":"sensor=false"});
/* Déclaration des variables globales */


var maCarte;
var polygoneCercle;
var centre;
var monMarqueur;

var cercleCouleur = "#0000ff";
var cercleEpaisseur = "1";
var cercleOpacite = ".5";
var disqueCouleur = "#0000ff";
var disqueOpacite = ".1";
var rayon = 25;
var segment = 60;

/* Fonction initialize() */
function initialize() {
/* ... Si le navigateur est compatible avec l'API de Google Maps ... */
if (google.maps.BrowserIsCompatible()) {
/* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la
ayant pour identifiant id="EmplacementDeMaCarte" ... */
maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"));
/* ... Désactivation du double click permettant de zoomer sur la carte ... */
maCarte.disableDoubleClickZoom();
/* ... Ajout à la carte nommée "maCarte" du mini contrôle permettant de zoomer et de déplacer la carte ... */
maCarte.addControl(new google.maps.SmallMapControl());
/* ... Ajout à la carte nommée "maCarte" de l'Echelle ... */
maCarte.addControl(new google.maps.ScaleControl());
/* ... Centre la carte nommée "maCarte" sur la Latitude 47.389982, la Longitude 0.688705, avec un niveau de zoom égal à 9 ... */
maCarte.setCenter(new google.maps.LatLng(48.367427,2.102652), 12);
/* ... Ajout d'un observateur d'événement à la carte nommée "maCarte" ... */
/* ... L'événement observé est le double-click sur la carte nommée "maCarte" ... */
google.maps.Event.addListener(maCarte, "dblclick", function(marker, point) {
/* ... Suppression de tous les recouvrements (le cercle précédemment tracé dans notre cas) de la carte nommée "maCarte" .... */
maCarte.clearOverlays();
/* ... Centre la carte nommée "maCarte" sur le point double-cliqué avec un niveau de zoom actuel de la carte nommée "maCarte" ... */
maCarte.setCenter(point, maCarte.getZoom());
/* ... Création d'un marqueur nommé "monMarqueur" ancré sur le point surlequel on a double cliqué sur la carte ... */
monMarqueur = new google.maps.Marker(point);
/* ... Ajout du marqueur nommé "monMarqueur" sur la carte nommée "maCarte" ... */
maCarte.addOverlay(monMarqueur);
/* ... centre = point ayant pour coordonnées le centre actuel de la carte nommée "maCarte" ... */
centre = maCarte.getCenter();
/* ... Appel de la fonction dessineUnCercle() afin de tracer le cercle... */
dessineUnCercle();
});
/* ... Si le navigateur n'est pas compatible avec l'API de Google Maps ... */
}else{
/* ... affichage du message "Désolé, mais votre navigateur n'est pas compatible avec Google Maps". */
alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
}
}
/* Fonction dessineUnCercle() */
function dessineUnCercle(){
var latConv = centre.distanceFrom(new google.maps.LatLng(centre.lat()+0.1, centre.lng()))/100;
var lngConv = centre.distanceFrom(new google.maps.LatLng(centre.lat(), centre.lng()+0.1))/100;
/* ... Création d'un tableau nommé "pointsCercle". Celui-ci va contenir tous les points nécessaires ... */
/* ... à la construction du polygone représentant le cercle nommé "polygoneCercle" ... */
var pointsCercle = [];
var step = parseInt(360/segment)||10;
for(var i=0; i<=360; i+=step){
/* ... "pint" : coordonnées d'un point participant à la construction du polygone nommé "polygoneCercle" ... */
var pint = new google.maps.LatLng(centre.lat() + (rayon/latConv * Math.cos(i * Math.PI/180)), centre.lng() + (rayon/lngConv * Math.sin(i * Math.PI/180)));
/* ... Ajout du point "pint" dans le tableau "pointsCercle" ... */
pointsCercle.push(pint);
}
/* ... Création d'un polygone nommé "polygoneCercle" ... */
polygoneCercle = new google.maps.Polygon(pointsCercle, cercleCouleur, cercleEpaisseur, cercleOpacite, disqueCouleur, disqueOpacite);
/* ... on ajoute le polygone nommé "polygoneCercle" à la carte nommée "maCarte". */
/* ... ce polygone représente le cercle tracé sur la carte. ... */
maCarte.addOverlay(polygoneCercle);
}
/* Appelle la fonction "initialize" lorsque la page web sera chargée */
google.setOnLoadCallback(initialize);
</script>
</head>

<!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
<!-- la balise
ayant pour identifiant id="EmplacementDeMaCarte". -->
<!-- Elle fera donc 100% de large et 400 pixels de haut. -->


<!-- Si JavaScript n'est pas activé sur votre navigateur, le message d'alerte situé entre les balises <noscript></noscript> s'affichera -->
<noscript>
Attention :


Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.


Or, il semble que JavaScript est désactivé ou qu'il n'est pas supporté par votre navigateur.


Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.


</noscript>

</html>[code]

1 réponse

Messages postés
2
Date d'inscription
dimanche 2 octobre 2011
Statut
Membre
Dernière intervention
2 octobre 2011

Bon j'ai fini par trouver trouvé si ca interesse quelqu'un voici le code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="fr">
<head>
<title>Touraineverte.com - dessiner tracer un disque</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<!-- Chargement du script Google AJAX APIs en précisant votre clé -->
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAF0TiLSL7jMWlK4_47lYh4hQiwXaTBl6CORReW0Gn4tuS54KkChRloKxiZZlccEtYQ_T2Rpek0n5jtQ"></script>
<script type="text/javascript">
/* Chargement du module "maps" dans sa version "2.x" */
google.load("maps", "2.x",{"other_params":"sensor=false"});
/* Déclaration des variables globales */


var maCarte;
var polygoneCercle;
var centre;
var monMarqueur;

var cercleCouleur = "#0000ff";
var cercleEpaisseur = "1";
var cercleOpacite = ".5";
var disqueCouleur = "#0000ff";
var disqueOpacite = ".1";
var rayon = 25;
var segment = 60;

/* Fonction initialize() */
function initialize() {
//*TC* Si le navigateur est compatible avec l'API de Google Maps ... **//
if (GBrowserIsCompatible()) {

//** ... Création d'une nouvelle carte ayant pour nom 'MaCarte' et qui se situera en lieu et place de la
ayant pour identifiant (id) 'EmplacementDeMacarte' ... **//
MaCarte = new GMap2(document.getElementById('EmplacementDeMaCarte'));

//** ... On supprime le zoom par double clique sur la carte nommée 'MaCarte' ... **//
MaCarte.disableDoubleClickZoom();

//** ... Ajout des contrôles : boutons permettant le déplacement et le zoom et affichage de l'échelle ... **//
MaCarte.addControl(new GSmallMapControl());
MaCarte.addControl(new GScaleControl());

//** ... La carte 'Macarte' est centrée sur la Latitude 47.389982, la Longitude 0.688705, avec un niveau de zoom égal à 9 ... **//
MaCarte.setCenter(new GLatLng(48.367427,2.102652), 10);

//** ... Un observateur d'événement est ajouté à la carte appelé 'MaCarte'. L'évenement détecté est 'dblclick' (Détecte si un double click est effectué sur le marqueur appelé 'marker'). Si un double-click a été effectué sur la carte appelé 'MaCarte', la fonction située entre les {} sera alors executée ... **//
GEvent.addListener(MaCarte, 'dblclick', function(marker, point) {

//** ... Suppression de tous les recouvrements (marqueurs, polyline, info-bulle, etc...) de la carte nommée 'MaCarte' ... **//
MaCarte.clearOverlays();

//** ... On centre la carte nommée 'MaCarte' sur le point 'point', et avec le niveau de zoom actuel de la carte ( MaCarte.getZoom() ) ... **//
//MaCarte.setCenter(point, MaCarte.getZoom());
MaCarte.setCenter(new GLatLng(48.367427,2.102652), 10);

//** ... un nouveau marqueur nommé 'monMarqueur' est créé. Celui est ancré aux coordonnées géographiques du point 'point' représentant le centre du cercle ... **//
monMarqueur = new GMarker(point);

//** ... Affichage du marqueur nommé 'nomMarqueur' sur la carte nommée 'MaCarte' ... **//
MaCarte.addOverlay(monMarqueur);

//** ... la variable 'centre' est égale aux coorconnées géographiques du point central de la carte affichée 'MaCarte' ... **//
centre = MaCarte.getCenter();

//** ... Appel la fonction dessineUnCercle() pour dessiner le cercle. **//
dessineUnCercle();
});

//** Si le navigateur n'est pas compatible avec l'API de Google Maps ... **//
}else{

//** ... affichage du message 'Désolé, mais votre navigateur n'est pas compatible avec Google Maps'. **//
alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
}
}
/* Fonction dessineUnCercle() */
function dessineUnCercle(){
/*Construction du tableau 'points' contenant toutes les coordonnées des points nécessaires au tracé du cercle **/
var latConv = centre.distanceFrom(new GLatLng(centre.lat()+0.1, centre.lng()))/100;
var lngConv = centre.distanceFrom(new GLatLng(centre.lat(), centre.lng()+0.1))/100;
var points = [];
var step = parseInt(360/segment)||10;
for(var i=0; i<=360; i+=step){
var pint = new GLatLng(centre.lat() + (rayon/latConv * Math.cos(i * Math.PI/180)), centre.lng() + (rayon/lngConv * Math.sin(i * Math.PI/180)));
points.push(pint);
}

//** le cercle 'cercle' est en fait un polygone construit à l'aide des points contenus dans le tableau 'points' **//
cercle = new GPolygon(points, cercleCouleur, cercleEpaisseur, cercleOpacite, disqueCouleur, disqueOpacite);

//** ... Affichage du 'cercle' sur la carte nommée 'MaCarte' ... **//
MaCarte.addOverlay(cercle);;
}
google.setOnLoadCallback(initialize);
</script>
</head>

<!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
<!-- la balise
ayant pour identifiant id="EmplacementDeMaCarte". -->
<!-- Elle fera donc 100% de large et 400 pixels de haut. -->


<!-- Si JavaScript n'est pas activé sur votre navigateur, le message d'alerte situé entre les balises <noscript></noscript> s'affichera -->
<noscript>
Attention :


Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.


Or, il semble que JavaScript est désactivé ou qu'il n'est pas supporté par votre navigateur.


Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.


</noscript>

</html>


Pour changer la carte il suffit de changer : GLatLng(48.367427,2.102652), 10) par vos coordonnées google map