IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

APIs Google Discussion :

Afficher la scalebar dans une <div> [Google Maps]


Sujet :

APIs Google

  1. #1
    Membre du Club
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mai 2011
    Messages
    55
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Mai 2011
    Messages : 55
    Points : 51
    Points
    51
    Par défaut Afficher la scalebar dans une <div>
    Bonjour à tous.
    Je suis en train de travailler sur une appli google map en v3 pour ma structure, et je viens vers vous pour un petit problème.

    L'appli permet de faire des cartes avec, fond de carte google map, kml pour des contour, xml pour des markers.

    Du côté html j'ai des div mobile en absolute permettant d'afficher logo, fleche nord et titre où l'on veut sur la carte.

    J'aurai voulu savoir s'il était possible d'afficher la scalebar de l'API google map dans une <div> afin de la rendre mobile pour l'utilisateur ?

    Car dans scaleControlOptions: position, j'ai juste trouvé les positions prédéfinies (top, bottom, left...)


    Edit: Ou alors dans le pire des cas est-il possible, via un checkbox d'afficher ou non cette barre d'échelle ?

    En vous remerciant d'avance.

  2. #2
    Membre du Club
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mai 2011
    Messages
    55
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Mai 2011
    Messages : 55
    Points : 51
    Points
    51
    Par défaut
    Pour étoffer mon post, voici un exemple de carte sur lequel je fais mes test:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
     
    <!DOCTYPE html>
    <html lang="fr">
    	<head>
    		<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    		<meta charset="UTF-8" />
    		<title>Titre de votre page</title>
    		<style type="text/css">
    			html {
    				height: 100%
    			}
    			body {
    				height: 80%;
    				margin: 0;
    				padding: 0
    			}
    			#EmplacementDeMaCarte {
    				height: 100%
    			}
    			#menu{
    				width: 120px;
    				bottom: 10%; 
    				left: 5px;
    				position : absolute;
    				border:1px solid black;
    			}
    		</style>
    		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    		<script type="text/javascript">
    		var testscale;
    		var map;
     
    		//fonction qui ne fonctionne pas pour afficher l'échelle:
    			function afficheechelle(){
    				if (document.getElementById("echelle").checked==true) {
    				   var testscale=true;
    				} else {
    				   var testscale=false;
    				}
    			}
     
    		//fonction d'initialisation
    			function initialisation(){
    				var centreCarte = new google.maps.LatLng(47.389982, 0.688877);
     
    				var optionsCarte = {
    					zoom: 8,
    					center: centreCarte,
    					mapTypeId: google.maps.MapTypeId.ROADMAP,
    					scaleControl: testscale,
    					scaleControlOptions: {
    					position: google.maps.ControlPosition.RIGHT_BOTTOM,
    					style: google.maps.ScaleControlStyle.DEFAULT
     
     
    					}
    				}
    		//création de la carte en fonction des options, et dans la dic EmplacementDeMaCarte
    				var map = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
    			}
    		</script>
    	</head>
     
    	<body onload="initialisation()">
     
    		<!-- emplacement de la carte définie plus haut -->
    		<div id="EmplacementDeMaCarte"></div>
     
    		<!-- checkbox permettant d'afficher ou non l'échelle -->
    		<div id="menu">Echelle: </td><td><input type="checkbox" id="echelle" onclick="afficheechelle();"/></div>
     
    		<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 ne soit 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>

  3. #3
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 946
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 946
    Points : 44 086
    Points
    44 086
    Par défaut
    Bonjour,
    tu peux faire simplement
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    function afficheechelle( obj){
      map.setOptions({'scaleControl' : obj.checked});
    }
    avec un appel
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <input type="checkbox" id="echelle" onclick="afficheechelle(this);"/>

    Attention: avec ce type de code il te faut mettre ta variable map en globale.

    Encore un point, le chargement de l'API ce fait à cette adresse, <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

  4. #4
    Membre du Club
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mai 2011
    Messages
    55
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Mai 2011
    Messages : 55
    Points : 51
    Points
    51
    Par défaut
    Merci ça marche impec!

    Me manque plus que la possibilité de la rendre non-fixe pour l'utilisateur, ou le arriver à la faire apparaitre dans une div, mais j'ai trouvé aucune info à ce sujet, du coup, je doute que cela soit possible.

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 946
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 946
    Points : 44 086
    Points
    44 086
    Par défaut
    Me manque plus que la possibilité de la rendre non-fixe pour l'utilisateur,
    tu peux également jouer sur la position du scaleControl
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    map.setOptions({
      'scaleControl' : obj.checked,
      'scaleControlOptions': {
          'position': google.maps.ControlPosition.TOP_RIGHT  // par exemple
        }
    });
    L'image de l'échelle est réalisée à partir d'une image "sprite" et n'existe donc pas en temps que telle, par contre tu as la possibilité de la créer toi même.

    exemple de code généré par l'API
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <div style="-moz-user-select: none; width: 95px; height: 26px; color: rgb(0, 0, 0); font-family: Arial,sans-serif; font-size: 11px; margin-bottom: 3px; position: absolute; left: 69px; bottom: 0px;">
      <div style="width: 4px; height: 26px; overflow: hidden; position: absolute; left: 0px; top: 0px;">
        <img style="position: absolute; left: 0px; top: -398px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; width: 59px; height: 492px;" src="http://maps.gstatic.com/mapfiles/mapcontrols3d6.png" draggable="false">
      </div>
      <div style="width: 91px; height: 4px; overflow: hidden; position: absolute; left: 3px; top: 11px;">
        <img style="position: absolute; left: 0px; top: -424px; width: 91px; height: 492px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;" src="http://maps.gstatic.com/mapfiles/mapcontrols3d6.png" draggable="false">
      </div>
      <div style="position: absolute; left: 0px; top: 11px; width: 1px; height: 4px; overflow: hidden;">
        <img style="position: absolute; left: 0px; top: -398px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; width: 59px; height: 492px;" src="http://maps.gstatic.com/mapfiles/mapcontrols3d6.png" draggable="false">
      </div>
      <div style="position: absolute; left: 0px; top: 11px; width: 1px; height: 4px; overflow: hidden; right: 0px;" class="gmnoprint">
        <img style="position: absolute; left: 0px; top: -398px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; width: 59px; height: 492px;" src="http://maps.gstatic.com/mapfiles/mapcontrols3d6.png" draggable="false">
      </div>
      <div style="width: 4px; height: 12px; overflow: hidden; position: absolute; left: 91px; top: 0px;">
        <img style="position: absolute; left: -4px; top: -398px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; width: 59px; height: 492px;" src="http://maps.gstatic.com/mapfiles/mapcontrols3d6.png" draggable="false">
      </div>
      <div style="width: 4px; height: 12px; overflow: hidden; position: absolute; left: 74px; top: 14px;">
        <img style="position: absolute; left: -8px; top: -398px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; width: 59px; height: 492px;" src="http://maps.gstatic.com/mapfiles/mapcontrols3d6.png" draggable="false">
      </div>
      <div style="position: absolute; left: 8px; bottom: 15px; direction: ltr;">
        20 km
      </div>
      <div style="position: absolute; left: 8px; top: 15px; direction: ltr;">
        10 mi
      </div>
    </div>

  6. #6
    Membre du Club
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mai 2011
    Messages
    55
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Mai 2011
    Messages : 55
    Points : 51
    Points
    51
    Par défaut
    Tiens, ça c'est intéressant.
    Mais du coup me faudrait faire un test en fonction du zoom utilisé pour réécrire le 20km/10mi ?

    Je garde l'idée, car je ne savais pas que c'était possible, mais j'ai trouvé une place pour mon échelle qui convenait à toute mes "mises en page", ça évitera que l'utilisateur mette l'échelle en plein milieu de sa carte pour l'impression.

    Encore merci pour ton aide.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Comment afficher un texte dans une div au survol d'un lien menu ?
    Par ryohazuki100 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 07/12/2014, 13h38
  2. Afficher le contenu d'une page Web dans une balise div
    Par rolls dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 05/11/2012, 08h30
  3. Réponses: 4
    Dernier message: 27/06/2012, 13h44
  4. afficher attr(title) dans une DIV
    Par learningcode dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 28/11/2011, 07h07
  5. Afficher un pdf dans une div
    Par tatutatu2009 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 6
    Dernier message: 01/06/2011, 15h14

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo