Affichage des markers à un niveau de zoom

**stargate81** · 28/03/2013, 18h21

Bonjour,

Je génère une carte avec un fichier XML avec les positions de markers et le contenu des infobules. Jusque la tout va bien.
Le but est de rajouter 3 markers sur le globe (France, Brésil, Cambodge) et de cliquer sur l'un des marker pour afficher tous les autres à un zoom diffèrent et de masquer celui-ci.

Merci d'avance de votre aide

**NoSmoking** · 29/03/2013, 16h10

Bonjour,
j'ai du mal à comprendre où est ton problème, sur l'événement onclick des marqueurs tu affiches ce qu'il faut si le zoom est correct.

**stargate81** · 29/03/2013, 17h34

Bonjour,
Mon problème est, qu'avant cette étape, je voudrais afficher le globe avec trois points (France "lat: 46.227638 - lng: 2.213749", Brésil "lat: -14.235004 - lng: -51.92527999999998", Cambodge "lat: 12.565679 - lng: 104.9909629999") avec un zoom à 2 et qu'on puisse cliquer dessus "ex: la France" pour arriver au zoom 6 qui afficherai tous les visites de la France en masquant les point des zooms inférieures.

Merci d'avance de ton aide.

Cordialement et bonne visite sur ces panoramiques.

**NoSmoking** · 29/03/2013, 19h14

Peut être qu'une lecture de la FAQ API Google Maps t'apportera les premières réponses à tes questionnements.

**stargate81** · 30/03/2013, 12h38

Bonjour,
La FAQ, je l'ai parcouru dans tous les sens et depuis une bonne dizaine de jour, j'ai lu des centaines de pages sur internet et essayer toutes sortes de commandes comme map.setZoom (number), Marker.setvisible (false) en combinaison avec mon fichier xml et rien ne marche.
Je pense que la solution est de faire une nouvelle page html avec ces trois points et quant on cliquera sur l'un des points, on ouvrira la page html du pays correspondant avec le zoom souhaité.
Merci NoSmoking.
Cordialement.
Pascal

**NoSmoking** · 30/03/2013, 23h08

Sur base des exemples montrés dans la FAQ, je te livre ce point d'entrée sous forme d'un exemple

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
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
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>[Google Maps API V3]</title>
<meta name="Author" content="NoSmoking">
<style type="text/css">
html, body {
  min-height:100%;
  height:100%;
  margin : 0;
  padding :0;
  font-family:Verdana,sans-serif;
  font-size : 1em;
  background:#E8E8EA;
}
#page {
  position:relative;
  width:60em;
  min-height:100%;
  margin:0 auto;
  border-left: 1px solid #B0B0FF;
  border-right:1px solid #B0B0FF;
  background-color:#FFF;
}
#cadre_carte{
  width:51em;
  height:37em;
  margin:4em auto;
  border:1px solid #CCC;
  padding:0.25em;
  box-shadow: 0 2px 4px 2px #CCC;
}
#div_carte{
  width:100%;
  height:100%;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initCarte(){
  // les principaux maker
  var tMarker = [
    {'lat': -14.235004, 'lon': -51.925280, 'pays' :'Brésil'},
    {'lat':  46.227638, 'lon':   2.213749, 'pays' :'France'},
    {'lat':  12.565679, 'lon': 104.990963, 'pays' :'Cambodge'}
  ];
  // creation de la carte
  var oMap = new google.maps.Map(document.getElementById("div_carte"),{
    'center': new google.maps.LatLng( 0, 0),
    'zoom': 2,
    'backgroundColor': '#fff',
    'streetViewControl': false,
    'noClear': true,
    'zoomControlOptions': {
      'style' : google.maps.ZoomControlStyle.SMALL
    },
    'mapTypeId': google.maps.MapTypeId.ROADMAP
  });
  // ajout des marqueurs principaux
  var oMarker, oInfo;
  var i, nb = tMarker.length;
  // création des markers dans une boucle
  for( i = 0; i < nb; i++){
    // création du marker
    oMarker = new google.maps.Marker({
      'position' : new google.maps.LatLng( tMarker[i].lat, tMarker[i].lon),
      'map' : oMap,
      'title' : tMarker[i].pays
    });
    // événement clic sur le marker
    google.maps.event.addListener( oMarker, 'click', function(){
      var map = this.getMap();
      map.setZoom(6);
      map.setCenter( this.getPosition());
      // ICI tu n'a plus qu'à gérer tes marqueurs
    });
  }
}
// init lorsque la page est chargée
google.maps.event.addDomListener(window, 'load', initCarte);
</script>
</head>
<body>
<div id="page">
<img src="http://www.developpez.com/public/images/logo-dev-150x75.gif" alt="developpez">
<div id="cadre_carte">
  <div id="div_carte"></div>
</div>
</div>
</body>
</html>

en attendant ton code pour ce qui coince

**stargate81** · 01/04/2013, 00h58

bonjour NoSmoking,

J'ai bien reçu ton code hier soir et depuis 24 heures, j'ai essayé d'apporter des modifs sans succès.
Le but est de pourvoir cliquer sur le marker et d'ouvrir une nouvelle page html (parent) avec les coordonnées des fichiers XML comme sur l'exemple que j'ai fait. Les 3 points on des pages différentes. L'idéale aussi, s'est d'avoir au survol de la souris (sur le marker) une infobulle qui indiquerai le nombre de visite pour ce pays. Les 3 markers auront si possible, des icons personnalisés.
J'espère que je n'abuse pas trop de ton dévouement.

Merci d'avance de ton aide.
Cordialement.

Pascal

**stargate81** · 01/04/2013, 11h45

bonjour NoSmoking,

Après avoir passer une nuit de repos, ce matin j'ai trouvé la moitié d'une des solutions à mes problèmes : quant je clique sur l'un des markers, il l'ouvre que le dernier URL.

Merci d'avance de ton aide.
Cordialement.

Pascal

**stargate81** · 01/04/2013, 12h28

re bonjour NoSmoking,

J'ai trouvé la solution pour url.

Code sur l'événement du marker :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
google.maps.event.addListener( oMarker, 'click', function() {
      window.location.href = this.url
    });

Il ne reste plus qu'a trouver pour le survol (infowindow) et la personnalisation du marker.

Cordialement.

Pascal

**stargate81** · 01/04/2013, 21h13

Bonsoir NoSmoking,

Depuis mon dernier message, j'ai évolué.
Pour la personnalisation du marker c'est résolut.
Il me reste plus que l'infowindow sur le marker au survol de la souris en combinaison du clique avec celui-ci.
Voici le lien :
Cordialement.

Pascal

**stargate81** · 02/04/2013, 13h33

Bonjour NoSmoking,

Carte finalisé.
Cordialement.

Pascal

Affichage des markers à un niveau de zoom [Google Maps]

APIs Google

Discussions similaires

Partager

Partager