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 :

Utiliser des marqueurs personnalisés [Google Maps]


Sujet :

APIs Google

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre du Club
    Homme Profil pro
    Technicien maintenance
    Inscrit en
    Mai 2012
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Technicien maintenance
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Mai 2012
    Messages : 9
    Par défaut Utiliser des marqueurs personnalisés
    Bonjour à tous,

    Je souhaiterais ajouter un marker personnalisé sur google map , mais je n'y arrive pas

    J'ai lu pas mal de choses à ce sujet, mais ne maîtrisant pas le javascript, je galère.

    Quelqu'un pourrait-il m'aider svp ?

    Voici le code qui fonctionne, mais avec des markers standard.

    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
     
     
    <!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: 100%;
    				margin: 0;
    				padding: 0
    			}
    			#EmplacementDeMaCarte {
    				height: 100%
    			}
    		</style>
    		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    		<script type="text/javascript">
    			function initialisation(){
    				var centreCarte = new google.maps.LatLng(42.617718, 2.423230999999987);
    				var optionsCarte = {
    					zoom: 16,
    					center: centreCarte,
    					mapTypeId: google.maps.MapTypeId.ROADMAP
    				};
    				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
     
    	 <!-- var optionsMarqueur = {position: new google.maps.LatLng(x,y),	map: maCarte};var marqueur = new google.maps.Marker(optionsMarqueur);	 -->			
     
     
    				var optionsMarqueur = {
    					position: new google.maps.LatLng(42.614920, 2.426644),
    					map: maCarte
    				};
     
     
    				var marqueur = new google.maps.Marker(optionsMarqueur);
     
    				var image = new google.maps.MarkerImage('c:/marker travaux.png');
     
    				var optionsMarqueur = {
    					position: new google.maps.LatLng(42.614119, 2.420700),
     
    					map: maCarte,
     
    					title:"travaux en cours" ,
     
    					icon: image				
     
    				};
     
    				var marqueur = new google.maps.Marker(optionsMarqueur);
    			 }
    			 google.maps.event.addDomListener(window, 'load', initialisation);
    		</script>
    	</head>
     
    	<body>
    		<div id="EmplacementDeMaCarte"></div>
     
    	</body>
    </html>
    J'ai fais des essais avec l'image en question sur mon HDD, mais logiquement elle est hébergée , je l'ai mise ici : http://imagesia.com/marker-travaux_twnk

    enfin, je voudrais qu'en cliquant sur cet icone de la Map, ça renvoie vers une page de mon site.

    Merci beaucoup pour votre aide

    Eddy

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Comment modifier l'aspect (image) d'un marker ?

    Sinon, que vient faire un commentaire HTML dans du code JavaScript ?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var image = new google.maps.MarkerImage('c:/marker travaux.png');
    C'est quoi cette URL ?
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  3. #3
    Membre du Club
    Homme Profil pro
    Technicien maintenance
    Inscrit en
    Mai 2012
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Technicien maintenance
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Mai 2012
    Messages : 9
    Par défaut
    l'url de l'image c'est : http://imagesia.com/marker-travaux_twnk

    je vois pas la syntaxe pour le faire fonctionner ?

    si je remplace par cette url , rien ne s'affiche .

    Je précise que je n'y connaît rien en javascript.

    Merci

    Eddy

  4. #4
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 224
    Par défaut
    Bonjour,
    tu peux également indiquer l'image que tu veux utiliser dans les options du marqueur lors de sa création.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    var optionsMarqueur = {
      position: new google.maps.LatLng(42.614119, 2.420700),
      map: maCarte,
      title: "travaux en cours",
      icon: 'http://img.imagesia.com/fichiers/tw/marker-travaux_imagesia-com_twnk.png'
    };
    Pour info google.maps.MarkerImage est "deprecated" depuis la version 3.11, maintenant il faut passer par un google.maps.Icon, même si cela continu de fonctionner.

  5. #5
    Membre du Club
    Homme Profil pro
    Technicien maintenance
    Inscrit en
    Mai 2012
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Technicien maintenance
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Mai 2012
    Messages : 9
    Par défaut
    Bonsoir,

    Merci, nickel ça fonctionne !

    J'ai essayé pas mal de trucs , j'ai bien envie de m'y mettre (maîtriser le javascript et le html) car je risque d'en avoir de plus en plus besoin pour mes applications.

    D'ailleurs j'ai récupéréun code intéressant sur le site, sur la mise en place de plusieurs marqueurs indexés, beaucoup plus propre que mes copiés/collés.

    Je voudrais faire la même chose pour cet icone, mais je vois pas trop comment faire pour passer une variable contenant l'adresse de l'icone (location[i] [3]) contient l'URL de l'image:

    En fait, je voudrais pouvoir attribuer un icone différent selon les types de marqueurs.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    for (i = 0; i < locations.length; i++) { 
     
     
    		marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][4]),
            map: map,
    		icon : (locations[i],[3]) 
          });
    Merci encore mille fois

    David

  6. #6
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 224
    Par défaut
    icon : (locations[i],[3])
    cela sort d'où ?
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][4]),
      map: map,
      icon: locations[i][3]  // ATTENTION à la syntaxe !!
    });

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

Discussions similaires

  1. Rapports personnalisés - pb sur l'utilisation des FilteredView
    Par patsai dans le forum Microsoft Dynamics CRM
    Réponses: 1
    Dernier message: 25/08/2010, 14h59
  2. Utilisation des popups comme marqueurs
    Par mga_geo dans le forum IGN API Géoportail
    Réponses: 38
    Dernier message: 22/06/2009, 22h06
  3. Utilisation des types personnalisés
    Par juccuj dans le forum SQL
    Réponses: 1
    Dernier message: 31/07/2008, 16h13
  4. [BCB5] Utilisation des Ressources (.res)
    Par Vince78 dans le forum C++Builder
    Réponses: 2
    Dernier message: 04/04/2002, 17h01

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