Accueil > Forum > > > > Utilisation des Script GoogleMap V3 et les if ==
 Utilisation des Script GoogleMap V3 et les if ==
lundi 29 août 2011 à 11:55:34 |
Utilisation des Script GoogleMap V3 et les if ==
ssd
|
Bonjour,
Je suis entrain de faire un petit script permettant de visualiser sur une carte google map, la porté d'un relais TPH. Pour cela j'utilise les API google map V3.
Je voudrais pouvoir choisir le réseau à afficher en fonction de plusieurs checkbox. Je rencontre un problème quand j'exécute mon script, il m'affiche la carte mais ne dessine pas les cercles. Je semble avoir un problème dans l'écriture de ma condition. Pouvez-vous me renseigner.
Cordialement,
SSD
Ci-dessous la copie de mon code...
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var citymap = {};
// relais Bouygues Télecom
if (bouygues.checked == true) {
citymap['barraux_bouygues'] = {
center: new google.maps.LatLng(45.452334 , 5.987889),
puissance: 5000,
couleur: "#279CDF", // bleu
nom_operateur : "Bouygues Télécom",
adresse :""
};
citymap['allevard_bouygues'] = {
center: new google.maps.LatLng(45.391217 , 6.038089),
puissance: 5000,
couleur: "#279CDF", // bleu
nom_operateur : "Bouygues Télécom",
adresse :""
};
citymap['la_chapelle_blanche_bouygues'] = {
center: new google.maps.LatLng(45.448691 , 6.055691),
puissance: 5000,
couleur: "#279CDF", // bleu
nom_operateur : "Bouygues Télécom",
adresse :"Villard Martin"
};
}
//Relais Orange
citymap['la_chapelle_blanche_orange'] = {
center: new google.maps.LatLng(45.448691 , 6.055691),
puissance: 5000,
couleur: "#0BD426",
nom_operateur : "Orange",
adresse :"Villard Martin"
};
citymap['pontcharra_orange'] = {
center: new google.maps.LatLng(45.436709 , 6.011659),
puissance: 5000,
couleur: "#0BD426",
nom_operateur : "Orange",
adresse :""
};
//Relais sfr
citymap['la_chappelle_blanche_sfr'] = {
center: new google.maps.LatLng(45.448691 , 6.055691),
puissance: 5000,
couleur: "#E80A3D",
nom_operateur : "SFR",
adresse :"Villard Martin"
};
citymap['saint_vincent_de_mercuze_sfr'] = {
center: new google.maps.LatLng(45.379749 , 5.966302),
puissance: 5000,
couleur: "#E80A3D",
nom_operateur : "SFR",
adresse :""
};
citymap['pontcharra_sfr'] = {
center: new google.maps.LatLng(45.43755 , 6.016084),
puissance: 5000,
couleur: "#E80A3D",
nom_operateur : "SFR",
adresse :"795 rue des Méttanies"
}
var cityCircle;
function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(45.452334, 5.987889),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
for (var city in citymap) {
// Dessine le cercle en fonction du rayon de la puissance*2.
var puissanceOptions = {
strokeColor: citymap[city].couleur,
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: citymap[city].couleur, //"#FF0000",
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: citymap[city].puissance * 2
};
cityCircle = new google.maps.Circle(puissanceOptions);
}
}
</script>
</head>
<body> <!--onload="initialize()">-->
<div id="top" style="width:100%; height5%">
<INPUT TYPE=CHECKBOX NAME="sfr">SFR
<INPUT TYPE=CHECKBOX NAME="orange">Orange
<INPUT TYPE=CHECKBOX NAME="bouygues">Bouygues Telecom
<INPUT TYPE=CHECKBOX NAME="free" disabled="disabled ">Free
<!-- Afficher un bouton de style-->
<!--INPUT TYPE=BUTTON NAME="reload" VALUE="Rafraichir" ALIGN=RIGHT>-->
<button type="button" style="background:white; cursor:hand; border:solid 1px white;"
style="background:white; cursor:hand; border:solid 1px white;"
onclick="initialize()">
<img src="./refresh-reload-icone-8719-16.png">
</button>
</div>
<div id="map_canvas" style="width:100%; height:100%"> </div>
</body>
</html> |
|
lundi 29 août 2011 à 17:08:55 |
Re : Utilisation des Script GoogleMap V3 et les if ==
Zobibol
|
Réponse acceptée !
Bonjour, en effet plusieurs petit soucis, mais rien de bien méchant...
il faut faire le traitement en plusieurs étape.
la première est initialiser la listes des opérateurs et les différentes informations relative à la position de l'émetteur et autres...
(ce que j'ai appelé informations ci-dessous).
Ensuite il suffit de mettre en place le traitement qui va bien et la ça roule.
le problème du script fourni est qu'il tourne en erreur rien que sur la ligne:
Code Javascript : if (document.bouygues.checked) en effet, au moment ou ce code est interprété, la page n'est pas encore rendu (on est dans le head, le body, n'est pas passé par la), mais il est a noté que ce test n'est pas faux (donc pas de problème avec le if...  ) juste il est inutile de précisé == true (pas grave de le mettre non plus).
je pense que ceci devrait corrigé le problème
Code HTML : <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
// Contient les informations en fonction du fournisseur d'accès.
// Attention, il doit y a voir une correspondance entre l'identifiant de la case à cochée et l'indice du tableau informations.
// exemple: bouygues -> bouygues...
var informations ={};
// initialisation des maps
// Cas de bouygues
informations["bouygues"] = new Array();
informations["bouygues"].push({
center: new google.maps.LatLng(45.452334 , 5.987889),
puissance: 5000,
couleur: "#279CDF", // bleu
nom_operateur : "Bouygues Télécom",
adresse :""
});
informations["bouygues"].push({
center: new google.maps.LatLng(45.391217 , 6.038089),
puissance: 5000,
couleur: "#279CDF", // bleu
nom_operateur : "Bouygues Télécom",
adresse :""
});
informations["bouygues"].push({
center: new google.maps.LatLng(45.448691 , 6.055691),
puissance: 5000,
couleur: "#279CDF", // bleu
nom_operateur : "Bouygues Télécom",
adresse :"Villard Martin"
});
// Cas d'Orange
informations["orange"] = new Array();
//Relais Orange
informations["orange"].push({
center: new google.maps.LatLng(45.448691 , 6.055691),
puissance: 5000,
couleur: "#0BD426",
nom_operateur : "Orange",
adresse :"Villard Martin"
});
informations["orange"].push({
center: new google.maps.LatLng(45.436709 , 6.011659),
puissance: 5000,
couleur: "#0BD426",
nom_operateur : "Orange",
adresse :""
});
// Cas sfr
informations["sfr"] = new Array();
//Relais sfr
informations["sfr"].push({
center: new google.maps.LatLng(45.448691 , 6.055691),
puissance: 5000,
couleur: "#E80A3D",
nom_operateur : "SFR",
adresse :"Villard Martin"
});
informations["sfr"].push({
center: new google.maps.LatLng(45.379749 , 5.966302),
puissance: 5000,
couleur: "#E80A3D",
nom_operateur : "SFR",
adresse :""
});
informations["sfr"].push({
center: new google.maps.LatLng(45.43755 , 6.016084),
puissance: 5000,
couleur: "#E80A3D",
nom_operateur : "SFR",
adresse :"795 rue des Méttanies"
});
// Pas très utile.
var cityCircle;
/**
* Génération de la map google map
*/
function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(45.452334, 5.987889),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
function getCheck (_id, cityMap){
var _check = document.getElementById(_id);
// si oui
if (_check.checked){
// Alors on ajoute les informations à la map city;
// Parcours les différentes villes.
for ( var i=0; i< informations[_id].length; i++){
cityMap.push(informations[_id][i]);
}
}
}
function refresh(){
initialize() ;
// Réinitialise la liste des case déjà cochée.
var cityMap = new Array();
// Récupération des checks cochées
// récupération des checks
getCheck("bouygues",cityMap);
getCheck("sfr",cityMap);
getCheck("orange",cityMap);
// Parcours la liste des résultats.
for (var i =0; i <cityMap.length; i++) {
// Dessine le cercle en fonction du rayon de la puissance*2.
var puissanceOptions = {
strokeColor: cityMap[i].couleur,
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: cityMap[i].couleur, //"#FF0000",
fillOpacity: 0.35,
map: map,
center: cityMap[i].center,
radius: cityMap[i].puissance * 2
};
// Utilisée ?
var cityCircle = new google.maps.Circle(puissanceOptions);
}
}
</script>
</head>
<body onload="initialize()">
<div id="top" style="width:100%; height5%">
<INPUT TYPE=CHECKBOX NAME="sfr" id="sfr">SFR
<INPUT TYPE=CHECKBOX NAME="orange" id="orange">Orange
<INPUT TYPE=CHECKBOX NAME="bouygues" id="bouygues">Bouygues Telecom
<INPUT TYPE=CHECKBOX NAME="free" disabled="disabled " id="free"> Free
<!-- Afficher un bouton de style-->
<!--INPUT TYPE=BUTTON NAME="reload" VALUE="Rafraichir" ALIGN=RIGHT>-->
<input type="button" style="background:white; cursor:hand; border:solid 1px white;"
style="background:white; cursor:hand; border:solid 1px white;" value="refresh";
onclick="refresh()"/>
</div>
<div id="map_canvas" style="width:100%; height:100%"> </div>
</body>
</html>[o-_-o]
|
|
Cette discussion est classée dans : google, center, puissance, maps, citymap
 Répondre à ce message
 Sujets en rapport avec ce message
google maps api [ par toutpourmoinsch ]
Bonjour,Je suis débutant et donc j'ai du mal a comprendre certaines choses...Notament pour google maps api:je voudrai savoir si quelqu'un pouvais m'ex
google maps [ par wally88 ]
Bonjour, Je n'arrive pas à metttre la carte de google map sur mon site il faut charger une fonction javascript dans le body apparement mais comment fa
Map, carte comme Google Maps [ par rivsc ]
2 plans d'accès google maps sur la même page [ par Ludococo20 ]
Bonjour à tous,je viens de suivre le tuto afin d'intégrer un plan d'accès google maps sur mon site. Tout c'est très bien passé. Or je vo
API Google Maps Villes et Communes [ par mastertom ]
Bonjour,Cela fait déjà 6 mois que je travaille sur un site (qui n'est pas encore en ligne) où l'on peut créer des projets, voter pour ces projets et o
Tracking via Google Maps [ par Tipatt ]
Bonjour !J'ai un problème que je n'arrive pas à résoudre. Je dispose d'un simulateur de mobiles virtuels (qui génère des coordonnées (latitude-longitu
Recupération d'une adresse d'établissement pour google maps [ par math567 ]
Bonjour, Je souhaiterai récupéré dans une variable javascript le contenu de la valeur d'un champ pour l'utiliser afin de situer le lieu d'un établisse
[BAR]Conseils, comprendre et pistes pour google maps [ par Jarod1980 ]
Bonjour à tous, En surfant sur le net, je suis tombé sur une carte google maps qui contenait un bouton supplémentaire, apparemment rajouté par le dév
[API google Maps javascript] affichage page html dans une infobulle [ par abir01 ]
bonjour, je travaille sur google maps javascript, j'ai besoin d'afficher ma page html (qui contient du code JavaScript, et jquery) dans l'infobulle
script pour zoom (comme google maps) [ par Rose6 ]
salut, je repose ma question car je n'ai obtenu aucune réponse satisfaisante... connaissez vous un script pour zoomer et se déplacer sur une image (
 Livres en rapport
|
Derniers Blogs
 POUR RAPPEL ! LES SPéCIFICATIONS DES PROTOCOLES OFFICE ET SHAREPOINT SONT DISPONIBLES SUR MSDNPOUR RAPPEL ! LES SPéCIFICATIONS DES PROTOCOLES OFFICE ET SHAREPOINT SONT DISPONIBLES SUR MSDN par neodante
Quelle est le point commun entre : Microsoft il y a 10 ans et Apple aujourd'hui ? Réponse: avoir une politique de protocoles propriétaires et fermés :) Car pour rappel (si si je vous assure c'est important de le rappeler), la majorité des spécifications e...
Cliquez pour lire la suite de l'article par neodante JOYEUX ANNIVERSAIRE NIXJOYEUX ANNIVERSAIRE NIX par ebartsoft
Souhaitons un bon et joyeux anniversaire à notre hôte à tous, Nix.
Je ne le répéterais jamais assez mais sans lui rien ne serait possible. Il défit en permanence les lois de la gravité et comme il le dit si bien, si tu lui fais confiance ça devra...
Cliquez pour lire la suite de l'article par ebartsoft IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc
Logiciels
 sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|