Discussion :

[Kevfou]

Bonjour,

Je suis entrain de développer une application avec Symfony 2.8 et le bundle IvoryGoogleMapBundle.
Il permet d'afficher une carte Google Map avec des markers, des routes...

Le problème c'est que ce bundle ne permet pas d'ajouter un écouteur sur la carte.
Je m'explique, je souhaite pouvoir cliquer n'importe où sur la carte et récupérer les coordonnées polaires (longitude, latitude).

Le bundle m'affiche une carte en html et me fournit le code js adéquate.
Voici ce que je récupère en html :

Code :

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

<div id="map_canvas" style="width:1200px;height:700px;"></div>

Ce que je souhaite donc faire, c'est récupérer ma carte et y ajouter un écouteur (comme indiqué sur la documentation de google map API :https://developers.google.com/maps/d...EventsOverview )
Comment faire cela ? Sachant que je si je récupère la carte par son id en jquery, je ne récupère pas vraiment l'objet google map.

Bref, si vous avez la solution, des idées =)
Merci !

[dukoid]

c'est pas vraiment une question Symfony2 mais plutot javascript et API googles maps

mais voici je crois ce qu'on peut faire

Code :

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

1
2
3
4
5
6
 
google.maps.event.addListener(map, "click", function(event) {
    var lat = event.latLng.lat();
    var lng = event.latLng.lng();
    alert("Lat=" + lat + "; Lng=" + lng);
});

Code :

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

1
2
3
4
5
6
 
google.maps.event.addListener(map, 'click', function(event) {
 
    marker = new google.maps.Marker({position: event.latLng, map: map});
 
});

[Kevfou]

En effet c'est bien la méthode pour ajouter un événement click sur la map.
Mais mon soucis, c'est que ma carte est générée en PHP à l'aide du bundle IvoryGoogleMapBundle :
https://github.com/egeloen/IvoryGoogleMapBundle

Je crée ma carte dans mon controller FicheController.php que j'envoie à ma vue :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$map = new Map();
        $map->setPrefixJavascriptVariable('map_');
        $map->setHtmlContainerId('map_canvas');
        $map->setAsync(false);
        $map->setAutoZoom(true);
        $map->setCenter(-0.3483401, 49.1755575, true);
        $map->setMapOption('zoom', 13);
        $map->setBound(-2.1, -3.9, 2.6, 1.4, true, true);
        $map->setMapOption('mapTypeId', 'roadmap');
        $map->setMapOption('disableDefaultUI', false);
        $map->setMapOption('disableDoubleClickZoom', true);
        $map->setStylesheetOption('width', '1200px');
        $map->setStylesheetOption('height', '700px');
        $map->setLanguage('fr');

J'envoie ensuite cet objet à ma vue :

Code :

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

1
2
3
return $this->render(
    'ProjetAppBundle:Map:index.html.twig', array('map' => $map)
);

L'affichage dans la vue :

Code :

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

{{ google_map(map) }}

Voilà ce que ça me donne dans la code source ma page :

Code :

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

<div id="map_canvas" style="width:1200px;height:700px;"></div>

Le problème que je rencontre c'est comment faire en Jquery pour récupérer la carte google map et non pas uniquement la div générée par le bundle ?
Je souhaite récupérer la carte en elle-même afin de lui ajouter un événement click comme tu l'as indiqué dans ta réponse.

Merci =)

[dukoid]

j'ai un peu regardé cela demande quelque peu de se plancher sur la doc du bundle :



dans la doc, on peut lire ça :

un service event est déclaré :

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
 
# app/config/config.yml
 
ivory_google_map:
    event:
        # You own event class
        class: "My\Fucking\Event"
 
        # Your own event helper class
        helper_class: "My\Fucking\EventHelper"
 
        # Prefix used for the generation of the event javascript variable
        prefix_javascript_variable: "event_"
 
    event_manager:
        # You own event manager class
        class: "My\Fucking\EventManager"
 
        # Your own event manager helper class
        helper_class: "My\Fucking\EventManagerHelper"

et tu fais appel à ce service comme ça :

Code :

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

1
2
3
4
5
 
<?php
 
// Requests the ivory google map event service
$event = $this->get('ivory_google_map.event');

un exemple d'utilisation :
https://github.com/egeloen/ivory-goo...sage/events.md

après je n'ai pas le temps de tout éplucher pour ce que tu veux faire.





Après tu n'es pas obligé de passer par un bundle. je ne connais pas tes contraintes, ton projet etc....
donc tu peux utiliser google.maps.api de façon normal comme une simple page PHP en javascript ....

[dukoid]

une piste avec la gestion d'un marker

https://github.com/egeloen/IvoryGoog...lays/marker.md

[Kevfou]

Déjà fait, ma carte comprend des markers avec des lignes pour représenter les routes qui sont trouvées entre les markers.
Ce qu'il me faut, c'est réussir à comprendre cette ligne dans la documentation : https://github.com/egeloen/ivory-goo...sage/events.md

Code :

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

1
2
Event name
Each object has his own event name which are described in the google map documentation.

Je n'arrive pas à récupérer "l'event name" de ma carte. La doc est très brève sur cette information.

[dukoid]

https://github.com/egeloen/ivory-goo...sage/events.md dans config.yml tu configures une clases Event.

dans cette classe pour tester tu peux faire :

Code :

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

1
2
 
$handle = 'function(){alert("The event has been triggered");}'

donc à chaque événement, une alerte sera lancé en javascript.

sur le site de google les EVENT UI sont les suivants :

Code :

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

1
2
3
4
5
6
7
 
'click'
'dblclick'
'mouseup'
'mousedown'
'mouseover'
'mouseout'

parceque lors du clique c'est un événement javascript qui est lancé donc...... on est proche ça doit être un truc tout con

[dukoid]

et en faisant ça :

Code :

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

1
2
 
$handle = 'function(){alert( event.latLng.lat() }';

[Kevfou]

Comme indiqué sur la doc, j'ai écris le code suivant :

Code :

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

1
2
3
4
5
6
7
8
$event = new Event();
        $event->setInstance($map->getJavascriptVariable());
        $event->setEventName("click");
        $handle = 'function(){alert("/!\ OK CLIQUE OK /!\");}';
        $event->setHandle($handle);
        $event->setCapture(true);
 
        $map->getEventManager()->addDomEventOnce($event);

Sauf que la map ne s'affiche plus, j'obtiens un message d'erreur dans la console: (sous Chrome)

Uncaught SyntaxError: Unexpected token ILLEGAL

Et sous Firefox :

SyntaxError: unterminated string literal

Si je commente la dernière ligne $map->getEventManager()->addDomEventOnce($event); , la carte s'affiche.
Donc on peut en conclure que l'erreur survient lors de l'ajour de l'événement sur la map.

Si je fais:

Code :

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

var_dump($map->getEventManager());die;

Résultat :

object(Ivory\GoogleMap\Events\EventManager)#442 (4) { ["domEvents":protected]=> array(0) { } ["domEventsOnce":protected]=> array(0) { } ["events":protected]=> array(0) { } ["eventsOnce":protected]=> array(0) { } }

Je récupère bien l'EventManager de ma carte, les tableaux sont bien vides. Donc c'est lors du Add
Pourquoi ? Là est le mystère....

[Kevfou]

J'ai résolu une partie de mon problème.
L'ajout d'un événement click sur la carte fonctionne.
L'erreur venait du $handle, le \ dans le alert engendrait une erreur...
Maintenant, je fais un

Code :

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

1
2
3
4
5
6
7
8
$handle = 'function(e){
            var map = document.getElementById("map_canvas");
            var marker = new google.maps.Marker({
            position: e.latLng,
            map: map
            });
            marker.setMap(map);
            }';

Il me dit :
InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama

J'ai pourtant suivi cette page qui ajoute un marker sur la map :
https://developers.google.com/maps/d...pt/markers#add

Le soucis vient de la variable map en js.
Je reviens au problème de base, comment faire pour récupérer l'objet google map et non pas uniquement la balise qui contient la map ? =)

[dukoid]

Code :

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

1
2
3
4
5
6
$handle = 'function(e){
            // ICI tu es déjà dans l'instance !
        var map = document.getElementById("map_canvas");           //  alors pourquoi essayes tu de récuperer l'instance  ????
        
}

et en faisant ça :

Code :

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

1
2
 
$handle = 'function(){alert( event.latLng.lat()) }';

[Kevfou]

Eh bien image que, maintenant que tu peux cliquer sur la carte et récupérer les coordonnées polaires du clique souris, tu veux ajouter un marker à l'endroit du clique.
Je fais donc cela :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
$handle = 'function(e){
            var pos = e.latLng;
 
            var marker = new google.maps.Marker({
            position: pos,
            map: this
            });
 
        }';

Hors comme tu peux le voir, dans les options d'ajout d'un Market, il faut indiquer la carte pour l'option map.
Il faut donc que je récupère l'instance de la carte en question et c'est là que vient le soucis. J'ai trouvé la solution, il fallait faire this (le fait que tu me dises qu'on était déjà dans l'instance m'a aidé, Merci!)

Le but final consiste à pouvoir cliquer la carte, ajouter un marker à l'endroit précis et effectuer un trajet en utilisant le service Direction du bundle IvoryGoogleMapBundle qui m'indiquera la route a prendre pour aller du point cliquer sur la carte à un ensemble d'adresses stockées dans la base de données.
Il faut donc :
1/ cliquer sur la map
2/ créer un marker à l'endroit cliquer
3/ envoyer l'objet market au php (là je coince aussi, voir ajax peut-être)
4/ une fonction php qui tourne en boucle sur toutes les adresses enregistrées dans la BDD. Pour chacune des fiches, trouve le trajet entre le Marker récupéré du JS et l'adresse
5/ transmettre les résultats au JS
6/ afficher sur le marker créé en JS, une infoWindows (de google map API) avec les informations récupéré lors de la recherche de trajet en php.

J'en suis maintenant à l'étape 3, le plus dur reste à venir. Pas évident comme projet =)

[dukoid]

bien vu pour le this

un petit tuto qui pourra t'aider un peu, peut être :
http://www.shatimes.com/tuto-calcule...e-maps-api-v3/

sinon pour le reste je donne ma langue au chat

[Kevfou]

Merci. C'est bien si je veux faire les trajets avec javascript.
Mais quid du fait de les faire en php avec le bundle et donc d'envoyer les infos du js -> php et php -> js
Remarque, je suis entrain de me dire que je n'ai pas besoin de persister les informations dans la bdd donc je vais peut-être le faire en js du coup.

Pour ajouter une infoBulle au market que je viens de créer, il faut faire ceci :

Code :

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

1
2
3
4
 
 marker.addListener("click", function() {
                infowindow.open(map, marker);
            });

A la place de map (dans la fonction open), je mets donc this, eh bien non pas de chance ça ne fonctionne pas ^^

[dukoid]

ça devrait le faire comme ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
    <script type="text/javascript">
        google.maps.event.addListener(
            {{map.javascriptVariable}}, 
            'click',
            setValue
        );
        function setValue(event) {
            alert(event.latLng);
        }
    </script>

ainsi tu récupère la map défini du bundle php et tu pourras en javascript faire les traitements que tu veux et communiquer avec le controler par exemple via ajax

[Kevfou]

Tu veux faire ça directement dans la vue twig ?
Pourquoi pas en effet mais du coup, question idiote du jour, comment je vais faire pour passer mes variables du JS à mon controller php ?
Ok pour Ajax, il faut que je regarde comment il fonctionne avec Symfony 2.8.

Pour ajouter un écouteur avec

Code :

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

google.maps.event.addListener()

Il faut envoyer une instance de la carte.
Hors dans le bundle que j'utilise, la méthode getJavascriptVariable me renvoie juste le préfix js de la carte (à savoir ici map_)
J'ai essaté de faire

Code :

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

google.maps.event.addListener({{map}}, 'click', setValue);

Mais rien ne se passe, j'ai réutilisé ton code pour la fonction setValue(event) histoire de tester, mais nada.

[dukoid]

C'est pas normal ça doit fonctionner !!! il n'y a pas d'autres moyens. le "map.javascriptVariable " te permet de récupérer l'instance javascript et ainsi tu peux l'utiliser dans ta vue..

fait un test dans la vue :

Code :

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

1
2
3
4
 
{{ dump(map) }}
<br>-----------------------<br>
{{ dump(map.javascriptVariable  ) }}

les 2 donnent quoi ?


ensuite dans le code précédent c'est : map.javascriptVariable pas map

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
 <script type="text/javascript">
        google.maps.event.addListener(
            {{map.javascriptVariable}}, 
            'click',
            setValue
        );
        function setValue(event) {
            alert(event.latLng);
        }
    </script>

ça donne quoi ?





pour les requête AJAX , rien de plus simple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
                    lat = 39.1321231;
                    ...
                    $.ajax({
                        type:"POST",
                        data: "lat="+lat,
                        url:"{{ url('url_vers_action_controller') }}",
                        cache: false,
                        success: function( msg ){
                           alert(msg);  // affiche "ok"
 
                        }
                    });

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
    /**
     * @Route("/url-ajax", name="url_vers_action_controller")
     */
    public function xxxxxxxxxAction(Request $request) {
            if ($request->isXmlHttpRequest()) {
                $session = $request->getSession();
                $latitude = json_decode( $session->get('lat') );
                ...
 
                $response = new Response( "ok" );                 
                $response->headers->set('Content-Type', 'application/json');
                return $response;

[Kevfou]

C'est pas normal ça doit fonctionner !!! il n'y a pas d'autres moyens. le "map.javascriptVariable " te permet de récupérer l'instance javascript et ainsi tu peux l'utiliser dans ta vue..

fait un test dans la vue :

Code :

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

1
2
3
4
 
{{ dump(map) }}
<br>-----------------------<br>
{{ dump(map.javascriptVariable  ) }}

les 2 donnent quoi ?

Le {{dump(map)}}:

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
Map {#442 ▼
  #htmlContainerId: "map_canvas"
  #async: false
  #autoZoom: true
  #center: Coordinate {#450 ▶}
  #bound: Bound {#451 ▶}
  #mapOptions: array:4 [▶]
  #stylesheetOptions: array:2 [▶]
  #mapTypeControl: null
  #overviewMapControl: null
  #panControl: null
  #rotateControl: null
  #scaleControl: null
  #streetViewControl: null
  #zoomControl: null
  #eventManager: EventManager {#440 ▶}
  #markerCluster: MarkerCluster {#452 ▶}
  #infoWindows: []
  #polylines: []
  #encodedPolylines: array:12 [▶]
  #polygons: []
  #rectangles: []
  #circles: []
  #groundOverlays: []
  #kmlLayers: []
  #libraries: []
  #language: "fr"
  #javascriptVariable: "map_56efad1a21685128298022"
}

Le {{ dump(map.javascriptVariable ) }} :

Code :

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

"map_56efad1a21685128298022"

On récupère bien la variable JS donc c'est parfait.

ensuite dans le code précédent c'est : map.javascriptVariable pas map

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
 <script type="text/javascript">
        google.maps.event.addListener(
            {{map.javascriptVariable}}, 
            'click',
            setValue
        );
        function setValue(event) {
            alert(event.latLng);
        }
    </script>

ça donne quoi ?

ça fonctionne correctement, le clique me donne bien l'alert.
Maintenant je vais essayer de faire le traitement que je veux, placer des markers, trouver des routes et envoyer avec Ajax.
See you on next step =)

[Kevfou]

Bonjour dukoid =)

Je viens de faire ma requête Ajax, mais je suis confronté à deux soucis:

1/ Lors du clique de la souris sur la carte, je crée un market avec la position récupérée et j'envoie la position en latitude et longittude en ajax
Voici mon code ajax

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
$.ajax({
                    type: "POST",
                    data: "lat=" + lat + "&lng=" + lng,
                    url: "{{ url('projet_app_map_ajax') }}",
                    dataType : 'json',
                    success: function (response, statut) {
                        console.log("SUCCESS " + response); 
                    },
                    error: function (resultat, statut, erreur) {
                        console.log("ERREUR " + erreur + resultat);
                    }
                });

Quand je fais un console.log(lat) ou (lng), j'ai bien les bonnes coordonnées polaires donc c'est parfait.

Le code php :

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
 
public function ajaxAction(Request $request)
    {
        if ($request->isXmlHttpRequest()) {
            // ICI JE RECUPERE LA DATA LAT ET LGT ENVOYEES EN AJAX
            $session = $request->getSession();
            $latitude = $session->get('lat');
            $longitude =$session->get('lng');
 
            $em = $this->getDoctrine()->getManager();
            $fiches = $em->getRepository('ProjetAppBundle:Fiche')->findBy(array('status' => '1','user' => $this->getUser()));
            $res = array();
            foreach($fiches as $fiche) {
 
                $request = new DirectionsRequest();
                $request->setOrigin($latitude ,$longitude , true);
                $request->setDestination($fiche->addressString(), true);
                $request->setAvoidHighways(true);
                $request->setAvoidTolls(true);
                $request->setTravelMode(TravelMode::DRIVING);
                $request->setUnitSystem(UnitSystem::METRIC);
                $directions = new Directions(new CurlHttpAdapter());
                $response = $directions->route($request);
 
                $routes = $response->getRoutes();
                foreach ($routes as $route) {
                    $res = $route;
                }
            }
 
            return new JsonResponse($res);
        }
    }

Pour info, j'ai également essayé avec ceci :

Code :

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

1
2
$latitude = $request->request->get('lat');
            $longitude =$request->request->get('lng');

Même résultat qu'au dessus.

Apparemment j'ai une erreur lors de l'appel de la méthode setOrigin(). Pourtant elle prend bien en entrée une latitude et une longitude avec true ou false à la fin.
Le message qui s'affiche dans la console est celui de la méthode success() de ajax. J'ai SUCCESS , rien de plus alors que normalement je dois avoir le response qui doit s'afficher.
J'en conclu donc que c'est lors de la récupération des données envoyées en ajax qu'il y a un soucis ou lors de la recherche de route.
Si j'indique une adresse en dur dans setOrigin("blablabla",true), j'ai dans la console :

Code :

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

SUCCESS [object Object]

Merci

[dukoid]

ho laaaa !!!!!!!!!!!

* déjà tu indiques 2 soucis et tu expliques qu'un seul

* tu ne suis pas mes indications :
$latitude = json_decode( $session->get('lat') );


dump($latitude); exit;
Utilise des dump pour savoir si les choses fonctionnent bien avant d'avancer.....


pour répondre à ta requete AJAX, j'ai indiqué que c'était ainsi :

Code :

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

1
2
3
4
 
                $response = new Response( "ici tu mets ta réponse , un objet, un tableau, un texte    CE QUE TU VEUX " );                 
                $response->headers->set('Content-Type', 'application/json');
                return $response;

ATTENTION: avec un message en objet ou tableau il y a une histoire de sérialisation et déserialisation me semble t'il ?


* ensuite tu utilises le $request de ajaxAction(Request $request)
pour le redefenir en autres choses $request = new DirectionsRequest(); ===> PAS BON