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

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

APIs Google

Vue hybride

Discussions similaires

Partager

Partager