Plugins pour Google Maps

Version imprimable

10/01/2015, 15h28
Souleyre

Plugins pour Google Maps
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?
10/01/2015, 15h53
kevin254kl

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
10/01/2015, 23h05
Souleyre

Bonjour Kevin,
J'ai beau regarder les nouvelles librairies proposées par Google, je ne vois rien qui correspond à mes attentes.
11/01/2015, 14h35
NoSmoking

Bonjour,

Citation:

(...)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.
11/01/2015, 16h46
Souleyre

Bonjour NoSmoking,

Citation:

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
11/01/2015, 18h51
NoSmoking

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
12/01/2015, 11h34
Souleyre

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é.
12/01/2015, 20h29
NoSmoking

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

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:

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:

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:

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

Code:

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

24/01/2015, 09h38
NoSmoking

Citation:

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" :koi:
24/01/2015, 18h36
Souleyre

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.

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

Code:

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>

26/01/2015, 11h23
Souleyre

Bravo NoSmoking, un très bel exemple facilement adaptable aux besoins de chacun.
30/01/2015, 16h59
Souleyre

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é?
31/01/2015, 06h27
NoSmoking
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:

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

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

Code:

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é...

01/02/2015, 08h23
NoSmoking
Citation:

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

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

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

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

Citation:

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:

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:

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

et remplacement par

Code:

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:

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:

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 ;)

03/02/2015, 17h30
Souleyre

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

Citation:

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?

On va essayer de www.développez.net :ptdr:

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:

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:

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:

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:

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:

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

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

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:

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:

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...

03/02/2015, 22h51
Souleyre

Tes pistes d'optimisation sont plus qu'intéressantes.
Je vais m'y atteler dès demain.
Encore merci, NoSmoking, pour ton aide décisive.
Je te tiendrai informé du gain en poids du fichier.
04/02/2015, 18h25
Souleyre
Je tente d'appliquer tes améliorations.
J'ai commencé par la réduction de l'espace pris par les coordonnées:

Code:

var gml = google.maps.LatLng;

Ca fonctionne bien et le gain de place est de plus de 1Mo.
J'ai poursuivi par la définition du style des polygones:
Code:

1 2 3 4 5 6 7 var oRed = { strokeColor: "#CC0000", strokeOpacity: 1, strokeWeight: 1, fillColor: "#CC0000", fillOpacity: 0.3 } ...
Jusque là ça va.
J'en suis à l'affectation des styles lors de la création des polygones:
Code:

1 2 3 var oBatD = new google.maps.Polygon( oRed); oBatD.setMap( map); oBatD.setPath( cBatD);
et là ça coïnce, j'obtiens le message d'erreur suivant:
Uncaught InvalidValueError: at index 0: not a LatLng or LatLngLiteral: in property lat: not a number
Qu'en penses-tu?
(J'ai actualisé le fichier 108maps.html).
07/02/2015, 11h13
NoSmoking

Citation:

et là ça coïnce, j'obtiens le message d'erreur suivant:
Uncaught InvalidValueError: at index 0: not a LatLng or LatLngLiteral: in property lat: not a number

Difficile de dire, pas accès au fichier, mais vérifies l'ordre et la nature des paramètres que tu passes aux fonctions.
07/02/2015, 16h51
Souleyre

A première vue, pas d'anomalie dans l'ordre ni dans la nature des paramètres transmis.
Je t'envoie en MP un lien de téléchargement du fichier original et du fichier modifié.

Problème dans la déclaration/initialisation des tes Paths, voir ci dessous, et à partir de la ligne 12009 de ta source, il y en a un paquet

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var cBatD=[[                   // c'est quoi ce tableau de tableau
new gml(43.524524,5.481899),
new gml(43.524531,5.482046),
new gml(43.524636,5.482037),
new gml(43.524631,5.481917),
new gml(43.524665,5.48191),
new gml(43.524657,5.481805),
new gml(43.524621,5.48181),
new gml(43.524617,5.481674),
new gml(43.524525,5.481682),
new gml(43.524531,5.481814),
new gml(43.524556,5.481812),
new gml(43.52456,5.481895),
new gml(43.524524,5.481899)
],[                            // c'est quoi ce tableau de tableau
new gml(43.524627,5.481914),
new gml(43.524589,5.481918),
new gml(43.524586,5.481871),
new gml(43.524626,5.481867),
new gml(43.524627,5.481914)
]];                            // c'est quoi ce tableau de tableau

07/02/2015, 18h49
Souleyre

Il s'agit simplement de polygones à trou.
07/02/2015, 19h01
NoSmoking

Au temps pour moi j'étais resté sur de Polygone à 1 path, setPath(), dans ce cas il te faut utiliser la méthode setPaths(), avec un s.
07/02/2015, 20h55
Souleyre

C'était bien ça.
Maintenant tout fonctionne au poil et le gain de place est de presque 2Mo.
Le fichier rectifié est en ligne.
Je te remercie une nouvelle fois pour ton aide précieuse.