Enregistrer la map au clic droit est-ce possible ?

**nolookpass8** · 02/12/2013, 16h59

Bonjour,

A l'aide de php et l'api google maps v3 je génère un itinéraire de points issus de ma bdd. J'aimerai savoir si cette map dynamique peut-elle lors d'un clic droit, être enregistrer sous le format jpeg ?

Code :

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

1
2
3
google.maps.event.addListener(map, 'rightclick', function() {
		...
	});

Avez-vous une idée de comment faire ?

Merci.

**NoSmoking** · 04/12/2013, 22h40

Bonjour,
deux sortes de réponse sont possibles,

- la brève : surement !!!! mais surement pas en direct il n'existe pas encore la méthode google.maps.copyToJpeg.

- l'autre : cela va dépendre de biens des choses.

Les maps sont intégrées dans le fichier HTML sous forme de canvas ou de svg pour les non canvas. Il y à donc toujours dans le cas de canvas possibilité de récupérer les data de ceux ci, je ne connaît pas le SVG

(je me rassures ce n'est pas la seule chose qui m'échappe)

La question qui se pose, c'est pour quoi faire car il existe également une API pour créer des image à partir d'une requête, voir Google Maps Image APIs avec la possibilité d'intégrer un tracé.
Si c'est pour enregistrer en base de données attention à comparer la taille par rapport à de simples références de centre, largeur, hauteur...

voilà quelques éléments de réponses.

**nolookpass8** · 06/12/2013, 17h49

Merci pour la réponse.

C'est simplement pour permettre à l'utilisateur d'enregistrer la carte google maps en jpeg ou autre png ...

Static Api ? C'est une carte généré dynamiquement via ma bdd et je laisse à l'utilisateur la possibilité de zoomer etc donc je ne peux me permettre d'utiliser static api qui me génèrera une image où je ne pourrai zoomer etc. Après j'ai peut-être pas compris votre remarque

Je vais m'orienter vers la conversion canvas vers image jpg alors.

Comment être sur que ma map est une canvas ?

Merci.

**NoSmoking** · 06/12/2013, 23h10

donc je ne peux me permettre d'utiliser static api qui me génèrera une image

rien ne t'empêche de faire la requête vers la static image au moment opportun, il te suffit de récupérer les informations pertinentes tel que centre de la carte, zoom et type de map par exemple pour composer ton url.

**nolookpass8** · 07/12/2013, 14h42

Je vais creuser ça

**nolookpass8** · 07/12/2013, 14h43

Par contre, c'est possible d'afficher l'itinéraire ? Car j'ai pas seulement des markers j'ai aussi un itinéraire.

**nolookpass8** · 07/12/2013, 18h40

J'ai fais un truc du genre :

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
function enregistrer() {
    downloadUrl("../...php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("activite");
        var idProduct = document.getElementById('id_product').value; //hidden
        for (var i = 0; i < markers.length; i++) {
            if (markers[i].getAttribute("id_product") === idProduct) {
                var pointCenter = new google.maps.LatLng(
                    parseFloat(markers[i].getAttribute("latSecteur")),
                    parseFloat(markers[i].getAttribute("lngSecteur"))
                    );
                var pointMarker = new google.maps.LatLng(
                    parseFloat(markers[i].getAttribute("lat")),
                    parseFloat(markers[i].getAttribute("lng"))
                    );
                var position = markers[i].getAttribute("position");
            }
        }
        document.location.href="http://maps.googleapis.com/maps/api/staticmap?center="+pointCenter+"&zoom=7&size=600x380&maptype=roadmap&markers=color:red%7Clabel:"+position+"%7C"+pointMarker+"&sensor=false";
    });
}

Ce qui me renvoit une carte bien centrée et avec un marker bien situé mais j'ai simplement un seul marker alors que j'aimerai les avoir tous. Pour le moment j'ai que le dernier marker de ma boucle ..

**NoSmoking** · 07/12/2013, 19h17

Il faut que tu construises ta chaine, concernant les markers, dans la boucle.

un bout de code qui me traine

Code :

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

1
2
3
4
  for( var i=0; i < tabMarkers.length; i++){
    sTmp.push( 'markers=' +tabMarkers[i].position.lat().toFixed(6) +',' +tabMarkers[i].position.lng().toFixed(6));
  }
  sTmp = sTmp.join('&'); // à ajouter à la chaine existante

il y aura surement un aménagement à faire

**nolookpass8** · 08/12/2013, 14h58

Merci NoSmoking pour ton aide et ton bout de code qui m'a bien aidé.

Voici le code qui affiche bien tout mes markers :

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
 
/**
 * Fonction enregistrer la map en image
 */
function enregistrer() {
    downloadUrl("../....php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("activite");
        var idProduct = document.getElementById('id_product').value;
        marker = new Array();
        for( var i=0; i < markers.length; i++){
            if (markers[i].getAttribute("id_product") === idProduct) {
                var pointCenter = new google.maps.LatLng(
                    parseFloat(markers[i].getAttribute("latSecteur")),
                    parseFloat(markers[i].getAttribute("lngSecteur"))
                    );
                var pointMarker = new google.maps.LatLng(
                    parseFloat(markers[i].getAttribute("lat")),
                    parseFloat(markers[i].getAttribute("lng"))
                    );
                var position = markers[i].getAttribute("position");
                var point = new google.maps.LatLng(
                    parseFloat(markers[i].getAttribute("lat")),
                    parseFloat(markers[i].getAttribute("lng")));
                marker.push( 'markers=' +point+'');
            }
        }
        marker = marker.join('&');
        document.location.href="http://maps.googleapis.com/maps/api/staticmap?center="+pointCenter+"&zoom=7&size=600x380&maptype=roadmap&"+marker+"&sensor=false";
    //document.location.href="http://maps.googleapis.com/maps/api/staticmap?center="+pointCenter+"&zoom=7&size=600x380&maptype=roadmap&markers=color:red%7Clabel:"+position+"%7C"+pointMarker+"&sensor=false";
    });
}

Maintenant je vais m'attaquer à l'itinéraire, peut-être avec Path !?
Et le zoom de la map ! pour le moment j'ai le même zoom .. Sauf que suivant la carte qui est générée, le zoom ne devrait pas être le même car j'ai par exemple un map avec des markers se situant à Lyon essentiellement, et d'autres se situant dans un plus large périmètre (exemple en PJ).

**nolookpass8** · 08/12/2013, 15h09

En enlevant le zoom et center de l'url, ça se gère automatiquement finalement.

**nolookpass8** · 08/12/2013, 16h40

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
 
/**
 * Fonction enregistrer la map en image
 */
function enregistrer() {
    downloadUrl("../....php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("activite");
        var lastPosition = document.getElementById('lastPosition').value;
        var idProduct = document.getElementById('id_product').value;
        marker = new Array();//marker
        path = new Array();//path : itinéraire polyline
        for( var i=0; i < markers.length; i++){
            if (markers[i].getAttribute("id_product") === idProduct) {
                var position = markers[i].getAttribute("position");
                if (position === '0') {
                    position = 'D';//D pour Départ
                }
                if (position === lastPosition) {
                    position = 'A';//A pour Arrivée
                }
                var pointMarker = new google.maps.LatLng(
                    parseFloat(markers[i].getAttribute("lat")),
                    parseFloat(markers[i].getAttribute("lng")));
                marker.push('markers=color:red%7Clabel:'+position+'%7C' +pointMarker+'');//ajout d'un marker
                path.push(pointMarker);//ajout d'un path
            }
        }
        marker = marker.join('&');//pour insérer plusieurs markers
        path = path.join('|');//pour insérer plusieurs path
        document.location.href="http://maps.googleapis.com/maps/api/staticmap?size=600x380&maptype=roadmap&"+marker+"&path=color:0x0000ff|weight:5|"+path+"&sensor=false";
    });
}

Pour ceux que ça intéresse ! NoSmoking, avec static map api il est possible de retracer l'itinéraire plutôt que des tracés d'un point à un autre comme dans ma pièce jointe ?

**NoSmoking** · 09/12/2013, 09h54

NoSmoking, avec static map api il est possible de retracer l'itinéraire plutôt que des tracés d'un point à un autre comme dans ma pièce jointe ?

pas sur de comprendre mais, je dirais que si tu calcules un itinéraire, dans la réponse tu retrouves le PolyLine encodé ce qui est très intéressant pour ne pas atteindre la taille limite de l'URL.

Voir routes[0].overview_polyline.points.

**nolookpass8** · 09/12/2013, 11h00

En fait, avoir un itinéraire comme dans ma 1ère pièce jointe, plutôt que dans ma 2ème pièce jointe ..

Je cherche des infos sur overview_polyline mais y'en a pas beaucoup !

**NoSmoking** · 09/12/2013, 11h16

Tiens, c'est vrai overview_polyline n'est pas documenté alors que overview_path l'est.
Il en parle quand même dans cette page https://developers.google.com/maps/d...on/directions/

**nolookpass8** · 12/12/2013, 13h46

Merci encore une fois pour tes réponses.

Je vois pas comment l'utiliser, ça prend un array de tous mes chemins et ensuite dans l'url ? &overview_path=monarray ?

**nolookpass8** · 12/12/2013, 14h20

J'ai tenté ça :

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
function enregistrer() {
    downloadUrl("../....php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("activite");
        var lastPosition = document.getElementById('lastPosition').value;
        var idProduct = document.getElementById('id_product').value;
        marker = new Array();//marker
        path = new Array();//path : itinéraire polyline
        for (var i = 0; i < markers.length; i++) {
            if (markers[i].getAttribute("id_product") === idProduct) {
                var position = markers[i].getAttribute("position");
                if (position === '0') {
                    position = 'D';//D pour Départ
                }
                if (position === lastPosition) {
                    position = 'A';//A pour Arrivée
                }
                var pointMarker = new google.maps.LatLng(
                        parseFloat(markers[i].getAttribute("lat")),
                        parseFloat(markers[i].getAttribute("lng")));
                marker.push('markers=color:red%7Clabel:' + position + '%7C' + pointMarker + '');//ajout d'un marker
                path.push(pointMarker);//ajout d'un path
            }
        }
        marker = marker.join('&');//pour insérer plusieurs markers
        path = google.maps.geometry.encoding.encodePath(path);
        document.location.href = "http://maps.googleapis.com/maps/api/staticmap?size=600x380&maptype=roadmap&" + marker + "&path=weight:4|color:red|enc:" + path + "&sensor=false";
    });
}

... sans succès ! J'ai toujours mes tracés mais linéaire, ça ne prend pas en compte une itinéraire. C'est de simple ligne à vol d'oiseau en gros ^^

**NoSmoking** · 12/12/2013, 22h12

IL faut reprendre l'ordre des choses
- tu récupéres/affiches les markers en provenance de ta BdD, l'affichage n'est pas forcément indispensable
- SURTOUT il te faut récupérer le trajet, il ne s'invente pas comme cela.

Le 2éme point se fait à travers une requête en utilisant un objet google.maps.DirectionsService(). C'est uniquement au retour serveur que tu pourras exploiter la réponse qui contient tous les éléments nécessaire (Directions Service).

Regarde cette exemple https://developers.google.com/maps/d...ections-simple

**nolookpass8** · 13/12/2013, 10h57

Oui j'ai déjà une fonction itineraire() dans mon fichier qui fait ça. Je sais comment tracé un itinéraire mais après c'est comment l'intégrer à static map api où je bloque, je dois pas être très loin j'imagine et j'espère.

Voici ma fonction itineraire() présente dans le même fichier que ma fonction enregistrer(). Je vais essayer de faire marcher tout ça aujourd'hui.

Merci.

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
function itineraire() {
    var idProduct = document.getElementById('id_product').value; 
    var start = document.getElementById('start').value;
    var end = document.getElementById('end').value; 
 
    wayPointArray = new Array();
 
    downloadUrl("../....php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("activite");
        for (var i = 1; i < (markers.length - 1); i++) {
            if (markers[i].getAttribute("id_product") === idProduct) {
                var point = new google.maps.LatLng(
                        parseFloat(markers[i].getAttribute("lat")),
                        parseFloat(markers[i].getAttribute("lng")));
                wayPointArray.push({
                    location: point,
                    stopover: true
                });
            }
        }
        var request = {
            origin: start,
            destination: end,
            waypoints: wayPointArray,
            travelMode: google.maps.TravelMode.DRIVING
 
 
        };
        directionsService.route(request, function(response, status) {
            if (status === google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
    });
}

**NoSmoking** · 15/12/2013, 07h30

Une fois ta requête aboutie, toutes les infos sont contenues dans directionsDisplay.directions.routes[0];.

Pour récupérer les valeurs nécessaires au tracé tu pourrais faire par exemple (*)

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
  function showImage(){
    // les données utiles sont contenues dans data.routes[0]
    var oRecup = directionsDisplay.directions.routes[0];
    if( oRecup){
      // récup données carte
      var centre  = oMap.getCenter(),
          zoom    = oMap.getZoom(),
          size    = oMap.getDiv(),
          maptype = oMap.getMapTypeId();
      // init URL de l'image
      var imageURL = ['http://maps.googleapis.com/maps/api/staticmap?'];
      imageURL.push( 'center=' +centre.toUrlValue());
      imageURL.push( 'zoom=' +zoom);
      imageURL.push( 'size=' +size.offsetWidth +'x' +size.offsetHeight);
      if( maptype !=='roadmap'){
        imageURL.push( 'maptype=' +maptype);
      }
      var i, nbLegs = oRecup.legs.length;
      // marker de debut
      imageURL.push('markers=label:A|' +oRecup.legs[0].start_location.toUrlValue());
      // marker de fin
      imageURL.push('markers=label:B|' +oRecup.legs[nbLegs -1].end_location.toUrlValue());
      // traitement des wayPoints
      for( i=1; i <nbLegs; i++){
        imageURL.push('markers=color:green|' +oRecup.legs[i].start_location.toUrlValue());
      }
      // l'itinéraire encryté
      imageURL.push('path=weight:5|color:0x0088ffa0|enc:' +oRecup.overview_polyline.points);
      // le reste
      imageURL.push('sensor=false');
      imageURL = imageURL.join('&');
      // affiche l'image
      oImage.src = imageURL;
    }
  }