begin process at 2012 05 28 16:19:02
  Trouver un code source :
 
dans
 
Accueil > Forum > 

PHP

 > 

Web 2.0

 > 

Autre

 > 

Api google map et marqueur


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Api google map et marqueur

dimanche 2 octobre 2011 à 19:01:33 | Api google map et marqueur

sourissot123456

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/aide-documentation-exemple-tutoriel-didacticiel/polygone/faire-creer-creation-dessiner-tracer/un-cercle-rond-disque-carte-map-google-maps/rayon-couleur-trait-fond-epaisseur.htm

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 <div> 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>
<body>
<!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
<!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
<!-- Elle fera donc 100% de large et 400 pixels de haut. -->
<div id="EmplacementDeMaCarte" style="width: 100%; height: 600px"></div>
<!-- Si JavaScript n'est pas activé sur votre navigateur, le message d'alerte situé entre les balises <noscript></noscript> s'affichera -->
<noscript>
<p>Attention : </p>
<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
<p>Or, il semble que JavaScript est désactivé ou qu'il n'est pas supporté par votre navigateur.</p>
<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
</noscript>
</body>
</html>[code]
dimanche 2 octobre 2011 à 22:24:22 | Re : Api google map et marqueur

sourissot123456

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 <div> 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>
<body>
<!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
<!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
<!-- Elle fera donc 100% de large et 400 pixels de haut. -->
<div id="EmplacementDeMaCarte" style="width: 100%; height: 700px"></div>
<!-- Si JavaScript n'est pas activé sur votre navigateur, le message d'alerte situé entre les balises <noscript></noscript> s'affichera -->
<noscript>
<p>Attention : </p>
<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
<p>Or, il semble que JavaScript est désactivé ou qu'il n'est pas supporté par votre navigateur.</p>
<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
</noscript>
</body>
</html>


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


Cette discussion est classée dans : carte, var, google, maps, macarte


Répondre à ce message

Sujets en rapport avec ce message

API GOOGLE MAPS [ par 4lman78 ] Bonjour à tous, J'ai un fichier de 1600 adresses à localiser sur une carte avec l'API google MAPS. Y-a t-il une source qui pourrait m'aider? Passe PHP et Google maps API [ par jofer1989 ] bonjour Je possède un site de chambres d'hôtes (1500 chambres répertoriées dans une BDD) et je voudrais mettre pour chacune d'elle une localisation G Modification d'appel avec l'API google-Maps [ par sigouil1 ] Bonjour, j'ai un script php qui m'affiche une page avec une carte Google-Maps. Cette page utilise les coordonnées d'un point pour centrer la carte. J' Google maps meteo [ par DrMaboul71 ] Bonjour,Je doit creer une application web avec l'API goolge mapsJ'ai eu une idée je voudrais rajouter un module de meteo genre un lien sur lequel l'ut Problème fonction et coordonnées BDD [ par gnut ] Bonjour, Je suis nouveau ici et novice en PHP. Voila je souhaite faire le lien entre les coordonnées de ma BDD et le script google MAP API. Trop de Google Maps API & PHP [ par begueradj ] Bonjour, Peut-on utiliser Google Maps plusieurs fois sur son site par une même clé ? Google mpas api et php [ par easysofts ] Bonjour,Généralement je ne poste pas et je trouve ma réponse tous seul, mais mon niveau de débutant, ne me permet pas de trouver pour ceci,je veux aff Google Maps Api [ par lammiiaa ] Bonjour,Je travaille avec google maps api et je veux afficher un point sur le map en utilisant GlatLng,mais les coordonnees en parametres de GlatLng s Google Maps! probleme de texte [ par totalhackerz ] Bonjour, je voudrai incorporai dans mon site Google Maps! j'ai donc suivi un tuto aucun probleme pour le tuto mais le s Google Maps (Distance) [ par kakoo ] Bonjour,J'ai beau chercher, je n'arrive pas à trouver de classes (ou un bout de source) me permettant de récupérer la distance (voir le temps de parco


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,154 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales