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 :

Changer l'icône du marqueur après clic API V3 [Google Maps]


Sujet :

APIs Google

  1. #1
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Mars 2016
    Messages
    28
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Agroalimentaire - Agriculture

    Informations forums :
    Inscription : Mars 2016
    Messages : 28
    Points : 18
    Points
    18
    Par défaut Changer l'icône du marqueur après clic API V3
    Bonjour
    En fait dès que je clic sur mon icône il apparaît un bulle d'information sur laquelle j'ai insérer un bouton "Départ".
    je voudrais qu'au clic de ce bouton, je voudrais changer l'icone du marqueur.
    J'espère que mon explication est suffisante si non n'hésiter pas à me le dire
    Je ne sais vraiment pas comment faire pour changer l'icone dès que je fais un clic
    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
    80
    81
    82
    83
     <script type="text/javascript">
                var map;
                var markers = [];
                var uniqueId = 1;
                var infoWindow;
                window.onload = function () 
                {
                    var mapOptions = 
                    {
                        center: new google.maps.LatLng(48.858565, 2.347198),
                        zoom: 6,
                        //draggable:true,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
     
                    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
                    //Direction requests
                    directionsService = new google.maps.DirectionsService;
    				directionsDisplay = new google.maps.DirectionsRenderer({draggable: true,});
     
     
                    //Attach click event handler to the map.
                    google.maps.event.addListener(map, 'click', function (event) 
                    {
                        //Determine the location where the user has clicked.
                        var location = event.latLng;
     
                        //Create a marker and placed it on the map.
                        var marker = new google.maps.Marker(
                        {
                            position: location,
                            map: map,
                        });
     
                        //Set unique id
                        marker.id = uniqueId;
                        uniqueId++;
     
                        //Attach click event handler to the marker.
                        google.maps.event.addListener(marker, "click", function (event) 
                        {
                            var lat = location.lat();
                            var lng = location.lng();
                            var content = 'Latitude: ' + location.lat() + '<br />Longitude: ' + location.lng();
                            content += "<input type = 'button' va;ue = 'Depart' onclick = 'DepartMarker(" + marker.id + ");' value = 'Depart' />";
                            infoWindow = new google.maps.InfoWindow({content: content});
                            infoWindow.open(map, marker);
                        });
     
                        //Add marker to the array.
                        markers.push(marker);
                    });
                };
                function DepartMarker(id) 
                {
                    //Find and remove the marker from the Array
                    for (var i = 0; i < markers.length; i++) 
                    {
                        if (markers[i].id == id) 
                        {
                            //Remove the marker from Map
                            markers[i].setMap(null);
                            markers[i] = new google.maps.Marker(
                            {
    						  position: new google.maps.LatLng(this.lat, this.lng),
    						  map: map,
    						  icon:'http://mapicons.mapsmarker.com/wp-content/uploads/mapicons/shape-default/color-9d7050/shapecolor-color/shadow-1/border-dark/symbolstyle-white/symbolshadowstyle-dark/gradient-no/car.png'
    						}),
                            markerA = new google.maps.Marker(
                            {
    						  position: new google.maps.LatLng(this.lat, this.lng),
    						  map: map,
    						  icon:'http://mapicons.mapsmarker.com/wp-content/uploads/mapicons/shape-default/color-9d7050/shapecolor-color/shadow-1/border-dark/symbolstyle-white/symbolshadowstyle-dark/gradient-no/car.png'
    						}),
     
                            //InfoWindow close after clic.
                            infoWindow.close(map,markers);;
                            return;
                        }
                    }
                }
     
                }

  2. #2
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 039
    Points : 44 449
    Points
    44 449
    Par défaut
    Bonjour,
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    oMarker.setOptions({'icon' :  'url_icone'});

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

Discussions similaires

  1. API IGN v3 et OL3 - Ecouteur du marqueur au clic
    Par Felix7942 dans le forum IGN API Géoportail
    Réponses: 2
    Dernier message: 29/11/2016, 11h23
  2. Réponses: 1
    Dernier message: 14/01/2015, 14h43
  3. changer la couleur d'une cellule après clic sur case à cocher
    Par zozoman dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 04/07/2013, 11h49
  4. [MySQL] Compter Nbres de clics sur marqueur google map API v3
    Par math567 dans le forum PHP & Base de données
    Réponses: 2
    Dernier message: 27/03/2012, 09h40
  5. Changer l'icône d'une fenêtre à partir d'un .res
    Par henderson dans le forum C++Builder
    Réponses: 8
    Dernier message: 11/03/2003, 10h48

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