Symfony 2 : Goolge map apiV3 et Ajax
Bonjour,
Je travaille sous Symfony2 et je souhaiterai intégré l'api google mapV3.
N'ayant pas trop d'expérience avec l'api google mapV3 et ajax, je souhaiterai dans un premier temps établir ma logique de développement.
Pour le moment, je voudrais récupérer des positions (Latitude et longitude) depuis une base de données et afficher les marqueurs sur la google map.
Pour cela, je dispose d'un contrôleur qui récupère et renvoie les données de ma base au template.
Puis d'un template initialisant ma map avec les données envoyées depuis le controleur.
J'ai effectué des recherches sur le net et j'ai trouvé une logique qui me parait correct.
Premièrement, je génère un fichier JSON avec les données récupérées en base de données.
Puis, je lis le fichier et instancie les positions de la google map.
Voici ma première version de développement sans utilisation ajax.
Contrôleur
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| class testController extends Controller{
public function evenementAction(){
$repository = $this->getDoctrine()->getManager()
->getRepository('SeoDiscoBundle:Geolocalisation');
$Geo_pos = $repository->findBy(array('statut' => '1'));
//var_dump($Geo_pos);
/* RECUPERATION DE TOUT LES MARQUEURS EN BDD */
$points = array();
foreach ($Geo_pos as $geo):
$points[] = "['".$geo->getLatitude().",".$geo->getLongitude().",".$geo->getId()."]";
endforeach;
$data_points = implode(',',$points); //CONCATENATION TABLEAU SEPAREE PAR DES VIRGULES
//var_dump($data_points); // ['46.8477075,-0.4846669999999449,1],['46.8411734,-0.48937019999993936,3] == [latitude, longitude, id]
return $this->render('SeoDiscoBundle:Disco:evenement.html.twig',array('marqueurs' => $data_points));
} |
Template twig
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
| {% block page %}
<h1>Test</h1> </br>
{# =============== FORMULAIRE ================ #}
<form name="post" method="post" action="">
<label class="labelEve">Adresse : </label>
<input class="adrEve" name="address" type="textbox" value=""/>
<input type="submit" name = "clic" value="Rechercher" onclick="FindMap(address.value);return false;"/>
</form><br/>
{{ marqueurs }}
{# =============== RECUPERATION DES MARQUEURS DU CONTROLEUR =============== '{{ marqueurs }}' #}
{{ marqueurs }} // ['46.8477075,-0.4846669999999449,1],['46.8411734,-0.48937019999993936,3]
{# =============== INITIALISATION DE LA MAP ================ #}
<script>
function initialise() {
var locations = [
'{{ marqueurs }}' // ['46.8477075,-0.4846669999999449,1],
// ['46.8411734,-0.48937019999993936,3]
// Ici, je ne comprend pas pourquoi j'ai le caractère '
]
alert(locations);
{# =============== PARAMETRAGE DE LA CARTE =============== #}
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(46.5802240, 0.3403750);
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
{# =============== AJOUT DES MARQUEURS =============== #}
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
// locations[i][1], locations[i][2] ne récupère que & et # au lieu des latitudes et longitude
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
title: locations[i][0]
});
//addListener(marker,locations[i][3]);
}
}
google.maps.event.addDomListener(window, 'load', initialise);
</script>
{# =============== CARTE ================ #}
<div id="map-canvas"></div>
{% endblock %} |
Pour le moment j'ai intégré les fonctions map directement dans mon template, car lorsque je souhaite effectué une fonction paramétrable "initialise(location)", cela ne marche pas.
J'arrive tout de même à afficher ma google map.
Pouvez-vous m'aider à intégrer ce dispositif avec la notion d'ajax .
Cordialement
