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.