Plugins pour Google Maps

**Souleyre** · 10/01/2015, 15h28

Bonjour,
Jusqu'à présent, j'utilisais, avec satisfaction, Leaflet pour ma cartographie.
En raison de l'impossibilité d'accès à StreetView, je suis obligé de me réorienter vers Google Maps.
Avec Leaflet, je disposais d'un grand nombre d'outils accessibles par une riche collection de plugins tels que:

affichage des coordonnées dans une boîte,
bouton de plein écran,
mesures de distances,
recherches d'éléments,
impressions d'écran,
etc.

Je n'ai pas réussi à trouver sur le web de tels plugins pour Google Maps.
Pensez-vous que ces outils existent?

**kevin254kl** · 10/01/2015, 15h53

Bonjour ,je pense qu'avec les librairies de google map qui à ajouter des fonctionnalité récemment on peut faire la plus part des choses que vous avez besoins cordialement

**Souleyre** · 10/01/2015, 23h05

Bonjour Kevin,
J'ai beau regarder les nouvelles librairies proposées par Google, je ne vois rien qui correspond à mes attentes.

**NoSmoking** · 11/01/2015, 14h35

Bonjour,

(...)je ne vois rien qui correspond à mes attentes.

il n'y a pas effectivement de plugin au sens de ce qui a été fait et accroché à Leaflet, mais rien ou presque n'existe pas déjà quelque part.

Montre nous une page sur laquelle on pourrait voir ce dont tu as besoin.

**Souleyre** · 11/01/2015, 16h46

Bonjour NoSmoking,

Montre nous une page sur laquelle on pourrait voir ce dont tu as besoin.

Voici les 3 plugins de Leaflet qui me sont les plus utiles:
Outil de mesure sur la carte:
http://makinacorpus.github.io/Leaflet.MeasureControl/
Outil de recherche:
http://labs.easyblog.it/maps/leaflet...es/simple.html
Outil d'affichage des coordonnées:
http://mrmufflon.github.io/Leaflet.C...ples/demo.html

**NoSmoking** · 11/01/2015, 18h51

Concernant :
- Outil de mesure sur la carte
- Outil d'affichage des coordonnées
j'ai déjà rencontré de tels codes me semble t-il dans https://developers.google.com/maps/d...ript/examples/

Concernant :
- Outil de recherche, il te faut regarder la carte des membres qui exploite le principe

**Souleyre** · 12/01/2015, 11h34

Pour les deux premiers outils, je n'ai pas trouvé grand chose dans https://developers.google.com/maps/d...ript/examples/.
Quant au troisième, il semble très intéressant mais il est pour moi d'une grande complexité.

**NoSmoking** · 12/01/2015, 20h29

Ah! les "bougres" il en manque ou la présentation à changée !?!

**Souleyre** · 19/01/2015, 17h15

J'ai trouvé une solution à mon problème d'affichage des coordonnées.

Je la poste ici ; elle peut peut-être dépanner quelqu'un...

Code css :

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

1
2
3
4
5
<style>
    html, body, #map-canvas {height: 100%;margin: 0px;padding: 0px}
    #coor-box {background-color: white;border: 1px solid red;bottom: 30px;height: 35px;width: 110px;
    padding: 10px;position: absolute;right: 30px;font-family: "Arial";}
</style>

Code :

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

1
2
3
4
5
6
function displayCoordinates(pnt) {
   var lat = pnt.lat();
   lat = lat.toFixed(6);
   var lng = pnt.lng();
   lng = lng.toFixed(6);
   document.getElementById('coor-box').textContent  = "Lat: " + lat + "  Lon: " + lng; };

Code :

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

1
2
  map.data.addListener('mouseover', function(event) {
    displayCoordinates(event.latLng);});

Code html :

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

1
2
3
<body>
  <div id="coor-box"></div>
</body>

**NoSmoking** · 24/01/2015, 09h38

map.data.addListener

Attention quand même cela ne concerne que les Data Layer ajoutés à ta carte.

Dans ton cas,[Outil d'affichage des coordonnées:] il est préférable d'utiliser google.maps.event.addListener( oMap, 'mousemove', function(data), le reste de la démarche restant correcte.

Je te signalerais toutefois que dans le lien que tu fournis il y a visiblement une coquille dans la fonction de conversion en DMS,on peut voir pour les valeurs négatives par exemple :
Lng: -0.1318 > E -1° 52' 05"

**Souleyre** · 24/01/2015, 18h36

C'est vrai qu'avec ma méthode les coordonnées ne s'affichent qu'au survol des polygones.
Merci pour le signalement du bug du plugin.

**NoSmoking** · 24/01/2015, 21h50

Je te mets un exemple de ce que cela pourrait donné

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>[Google Map]Affichage coordonnées souris</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<style>
html,
body,
#div_carte {
  font: 1em/1.5 Verdana, sans-serif;
  height:100%;
  margin:0;
  padding:0;
}
/* ajout classe devant l'ID pour surcharger le sélecteur */
.gm-style #info {
  /* pas visible au départ */
  position: absolute;
  left:-999em;
  /* - */
  background: #FFF;
  background-color:rgba( 255, 255, 240, 0.9);
  font-family:Verdana, sans-serif;
  font-size:13px;
  padding: 0.25em;
  margin-top:0.5em;
  text-align:center;
  height: 3em;
  line-height:1.5em;
  width:20em;
  cursor:pointer;
  /* style google map */
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  border-radius: 2px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
/* /!\ Pas d'utilisation de Leaflet.Coordinates-0.1.4.js car buggé */
/*
* OpenLayers.Util.getFormattedLonLat = function(        coordinate,     axis,   dmsOption       )
* http://dev.openlayers.org/docs/files/OpenLayers/Util-js.html#Util.getFormattedLonLat
*/
function getDMS(a, b, c) {
    c || (c = "dms");
    a = (a + 540) % 360 - 180;
    var d = Math.abs(a),
        e = Math.floor(d),
        f = d = (d - e) / (1 / 60),
        d = Math.floor(d),
        f = Math.round(10 * ((f - d) / (1 / 60))),
        f = f / 10;
    60 <= f && (f -= 60, d += 1, 60 <= d && (d -= 60, e += 1));
    10 > e && (e = "0" + e);
    e += "\u00b0 ";
    0 <= c.indexOf("dm") && (10 > d && (d = "0" + d), e += d + "\u2032 ", 0 <= c.indexOf("dms") && (10 > f && (f = "0" + f), e += f + '\u2033 '));
    return e = "lon" == b ? e + (0 > a ? "W" : "E") : e + (0 > a ? "S" : "N")
};
 
function initialize() {
  var oMap,
      oInfo = document.getElementById('info');
  // création de la carte
  oMap = new google.maps.Map(document.getElementById('div_carte'), {
    'zoom': 3,
    'center': {lat: 46.8, lng: 1.70}
  });
  // ajout du control sur la carte en haut au centre
  oMap.controls[google.maps.ControlPosition.TOP_CENTER].push( oInfo);
  // ajout événement sur mouseover de la carte
  google.maps.event.addListener( oMap, 'mousemove', function(data) {
      var lat = data.lat ? data.lat() : data.latLng.lat(),
          lng = data.lng ? data.lng() : data.latLng.lng();
      oInfo.innerHTML = 'lat : ' +lat.toFixed(5) +' | lng : '+ lng.toFixed(5);
      oInfo.innerHTML += '<br>' +getDMS( lat, 'lat') +' | ' +getDMS( lng, 'lon');
    });
  // remplissage par défaut info position
  google.maps.event.trigger( oMap, 'mousemove', oMap.getCenter());
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
  <div id="div_carte"></div>
  <div id="info"></div>
</body>
</html>

**Souleyre** · 26/01/2015, 11h23

Bravo NoSmoking, un très bel exemple facilement adaptable aux besoins de chacun.

**Souleyre** · 30/01/2015, 16h59

J'ai adapté ta routine à ma carto et elle fonctionne très bien.
Cependant, les objets représentés étant majoritairement des polygones, les coordonnées ne sont plus affichées lorsque ces derniers sont survolés.
Vois-tu une façon de contourner la difficulté?

**NoSmoking** · 31/01/2015, 06h27

Il y a lourd à parier que tu utilises des Data Layer et dans ce cas il "absorbe" les événements.
Il te faut donc transmettre à la map les informations reçues par le Data Layer, pour ce faire il te suffit de rajouter ce code

Code :

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

1
2
3
map.data.addListener('mousemove', function(event) {
  google.maps.event.trigger( this.getMap(), 'mousemove', event); // remonte l'évément à la carte
});

**Souleyre** · 31/01/2015, 17h30

J'ai modifié mon code en suivant tes prescriptions:

Code :

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

1
2
3
4
5
6
7
  map.controls[google.maps.ControlPosition.TOP_CENTER].push( oInfo);
  google.maps.event.addListener( map, 'mousemove', function(data) {
      var lat = data.lat ? data.lat() : data.latLng.lat(),
          lng = data.lng ? data.lng() : data.latLng.lng();
      oInfo.innerHTML = 'Lat : ' +lat.toFixed(6) +' - Lng : '+ lng.toFixed(6);
      google.maps.event.trigger(  this.getMap(), 'mousemove', data);
    });

mais le résultat est inchangé...

**NoSmoking** · 01/02/2015, 08h23

J'ai modifié mon code en suivant tes prescriptions:

Non pas exactement, l'événement est à mettre sur le Data Layer

Code :

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

1
2
3
  map.data.addListener('mousemove', function(event) {
    google.maps.event.trigger( this.getMap(), 'mousemove', event);
  });

**NoSmoking** · 02/02/2015, 21h44

Pas de MP, merci de bien vouloir rester sur le Forum

Envoyé par Souleyre

Bonsoir NoSmoking,
Je ne m'en sors pas.
Je n'arrive pas à intégrer correctement le code que tu m'as fourni.
Puis-je me permettre de t'envoyer mon fichier tel que je l'ai modifié:
(...)

J'ai extrait de ton code le code suivant, ré-indenté pour l'occasion

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
function initialize() {
    var MonCentre = new google.maps.LatLng(43.522256, 5.50554)
    var mapOptions = {
      center: MonCentre,
      zoom: 17,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      streetViewControl: true
    };
    var oInfo = document.getElementById('info');
    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    window.map = map;
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(oInfo);
    google.maps.event.addListener(map, 'mousemove', function(data) {
      var lat = data.lat ? data.lat() : data.latLng.lat(),
        lng = data.lng ? data.lng() : data.latLng.lng();
      oInfo.innerHTML = 'Lat : ' + lat.toFixed(6) + ' - Lng : ' + lng.toFixed(6);
    });
    map.data.addListener('mousemove', function(data) {
      google.maps.event.trigger(this.getMap(), 'mousemove', data);
    });
 
    function attachPolygonInfoWindow(polygon, html) {
      polygon.infoWindow = new google.maps.InfoWindow({
        content: html,
      });
      google.maps.event.addListener(polygon, 'click', function(e) {
        var latLng = e.latLng;
        this.setOptions({
          fillOpacity: 0.1
        });
        polygon.infoWindow.setPosition(latLng);
        polygon.infoWindow.open(map);
      });
    }
    var cBatD = [
      new google.maps.LatLng(43.527428, 5.501129),
      new google.maps.LatLng(43.52738, 5.501116),
      new google.maps.LatLng(43.52737, 5.501185),
      new google.maps.LatLng(43.527429, 5.501201),
      new google.maps.LatLng(43.527431, 5.501189),
      new google.maps.LatLng(43.527421, 5.501187),
      new google.maps.LatLng(43.527424, 5.501161),
      new google.maps.LatLng(43.527428, 5.501129)
    ];
    var oBatD = new google.maps.Polygon({
      paths: cBatD,
      strokeColor: "#CC0000",
      strokeOpacity: 1,
      strokeWeight: 1,
      fillColor: "#CC0000",
      fillOpacity: 0.3,
    });
    oBatD.setMap(map);
    attachPolygonInfoWindow(oBatD, '0A0050');
    var cBatD = [
      new google.maps.LatLng(43.523634, 5.495693),
      new google.maps.LatLng(43.523689, 5.495877),
      new google.maps.LatLng(43.52375, 5.495843),
      new google.maps.LatLng(43.523711, 5.495716),
      new google.maps.LatLng(43.523765, 5.495682),
      new google.maps.LatLng(43.523742, 5.495606),
      new google.maps.LatLng(43.523686, 5.495636),
      new google.maps.LatLng(43.523692, 5.495658),
      new google.maps.LatLng(43.523634, 5.495693)
    ];
    var oBatD = new google.maps.Polygon({
      paths: cBatD,
      strokeColor: "#CC0000",
      strokeOpacity: 1,
      strokeWeight: 1,
      fillColor: "#CC0000",
      fillOpacity: 0.3,
    });
    oBatD.setMap(map);
    attachPolygonInfoWindow(oBatD, '0A0300');

La première chose qui ressort est que tu n'utilises pas des Data Layer mais de "simples" Polygon, dans ce cas la mise en place d'un observateur d'événement n'est pas la même, exit donc

Code :

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

1
2
3
    map.data.addListener('mousemove', function(data) {
      google.maps.event.trigger(this.getMap(), 'mousemove', data);
    });

et remplacement par

Code :

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

1
2
3
    google.maps.event.addListener(polygon, 'mousemove', function(data) {
        google.maps.event.trigger( this.getMap(), 'mousemove', data);
      });

dans la fonction d'initialisation de tes polygones, de plus on retrouve de partout dans ton code des oBatD.setMap(map) précédant des attachPolygonInfoWindow(oBatD, '0A0300'), il serait bon de regrouper cela ce qui allégera un peu ton code ENORME.

Ta fonction devient donc

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
  function attachPolygonInfoWindow(map, polygon, html) {
    polygon.setMap(map);
 
    polygon.infoWindow = new google.maps.InfoWindow({
      content: html,
    });
    google.maps.event.addListener(polygon, 'mousemove', function(data) {
        google.maps.event.trigger( this.getMap(), 'mousemove', data);
      });      
 
    google.maps.event.addListener(polygon, 'click', function (e) {
      var latLng = e.latLng;
      this.setOptions({
        fillOpacity: 0.1
      });
      polygon.infoWindow.setPosition(latLng);
      polygon.infoWindow.open(map);
    });
  }

avec un appel modifié de la sorte

Code :

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

attachPolygonInfoWindow(map, oBatD, '0A0050'); // on passe en paramètre la map

D'autres optimisation serait à faire attendu de la taille du code et je pense notamment à la création de tes Polygon, style commun à mettre dans une variable plutôt que de tout déclarer à chaque fois, création dynamique de tes Path...

Un lien qui pourrait t’intéresser Tester si un point est dans un Polygone, va jeter un oeil dans le code

**Souleyre** · 03/02/2015, 17h30

La modification que tu me proposes fonctionne au poil (voir fichier modifié).
Je te remercie beaucoup.
Tu me propose une optimisation du code:

style commun à mettre dans une variable plutôt que de tout déclarer à chaque fois, création dynamique de tes Path...

voudrais-tu être plus explicite?

**NoSmoking** · 03/02/2015, 22h36

On va essayer de www.développez.net

Concernant le style de tes polygones on retrouve un nombre incalculable de fois les mêmes, j'en ais repéré au moins 4.
Ils pourraient s'écrire de la façon suivante

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
var colorMediumGreen = {
  strokeColor: "#CC0000",
  strokeOpacity: 1,
  strokeWeight: 1,
  fillColor: "#CC0000",
  fillOpacity: 0.3       // ATTENTION pas de , après la dernière propriété certains navigateur n'aime pas cela !
}
var colorMediumYellow = {
  strokeColor: "#BBBB00",
  strokeOpacity: 1.0,
  strokeWeight: 1,
  fillColor: "#FFFFFF",
  fillOpacity: 0
}
var colorMediumBlue = {
  strokeColor: "#0000CC",
  strokeOpacity: 1,
  strokeWeight: 1,
  fillColor: "#0000CC",
  fillOpacity: 0.3,
}
var colorMoutarde{
  strokeColor: "#FFBD06",
  strokeOpacity: 0.8,
  strokeWeight: 1
}

J'ai mis des noms de variables très perfectible

De la sorte cela te permettrait d’alléger ton code comme ceci

Code :

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

1
2
3
var oBatD = new google.maps.Polygon( colorMediumGreen);   // création avec options de design
oBatD.setMap( map);                                       // affectation de la MAP 
oBatD.setPath( cBatC);                                    // affectation du PATH

En créant une fonction de création de polygone, on peut aller un peu plus loin, soit la fonction suivante

Code :

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

1
2
3
4
5
6
7
8
9
function createPolygon( map, path, options){
  var oPoly = new google.maps.Polygon( options);
  oPoly.setMap( map);
  oPoly.setPath( cBatC);
  google.maps.event.addListener( oPoly, 'mousemove', function( data){
      google.maps.event.trigger( this.getMap(), 'mousemove', data);
    });  
  return oPoly;  
}

on voit facilement ce quelle va faire et on peut l’appeler de la sorte

Code :

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

1
2
var oPoly = createPolygon( map, cBatD, colorMediumGreen);  // par exemple
attachPolygonInfoWindow( oPoly, '0A0050');                 // pour l'infoWindow

on peut même ce passer de la variable oPoly qui ne sert somme toute à pas grand chose, donc on peut faire directement

Code :

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

attachPolygonInfoWindow( createPolygon( map, cBatD, colorMediumGreen), '0A0050');

Attention dans ce cas ta fonction attachPolygonInfoWindow est à corriger comme suit, retour en arrière

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
  function attachPolygonInfoWindow( polygon, html) {
    //polygon.setMap(map);   DEVIENT INUTILE car fait à la création du Polygone
 
    polygon.infoWindow = new google.maps.InfoWindow({
      content: html,
    });
    google.maps.event.addListener(polygon, 'mousemove', function(data) {
        google.maps.event.trigger( this.getMap(), 'mousemove', data);
      });      
 
    google.maps.event.addListener(polygon, 'click', function (e) {
      var latLng = e.latLng;
      this.setOptions({
        fillOpacity: 0.1
      });
      polygon.infoWindow.setPosition(latLng);
      polygon.infoWindow.open(map);
    });
  }

Une autre optimisation, pas du code mais de la taille du fichier, est de créer une variable qui pointera sur une méthode de l'API en écrivant

Code :

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

var gml = google.maps.LatLng;

3 caractères contre 18, l'API est verbeuse, tes déclarations de Path et création du Polygone ressemblerons à, par exemple

Code :

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

1
2
3
4
5
6
7
8
9
10
11
var cBatD = [
  new gml(43.527428, 5.501129),
  new gml(43.52738, 5.501116),
  new gml(43.52737, 5.501185),
  new gml(43.527429, 5.501201),
  new gml(43.527431, 5.501189),
  new gml(43.527421, 5.501187),
  new gml(43.527424, 5.501161),
  new gml(43.527428, 5.501129)
];
attachPolygonInfoWindow( createPolygon( map, cBatD, colorMediumGreen), '0A0050');

il y a encore moyen de faire mieux comme indiqué, entre autres, dans le lien que je t'ai fournis.

j'ose à peine te dire de combien va maigrir ton fichier de 5Mo. (en fait je n'en sais rien)

Voila à toi de jouer...

Plugins pour Google Maps [Google Maps]

APIs Google

Discussions similaires

Partager

Partager