Discussion :

[ludovic44]

Bonjour,
je suis en train de suivre le tuto de Sébastien Germez http://paulund.developpez.com/tutori...cartes-gmapjs/ (merci à lui).
voici donc mon code :

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
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
        <script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
        <script async defer
			src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBJaDqUJhJgTSkmC5vIIt1s3eOsv8VBt4s&callback=initMap">
			</script>
 
<style>
  #map {
        height: 700px;
      }
  </style>
 
<div id = "map"></div>
 
<script src="..js/gmaps.js"></script>
	<script src="../js/test.js"></script>

mon javaScript :

Code :

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

1
2
3
4
5
6
7
$(document).ready(function(){
 var map = new GMaps({
    el: '#map',
    lat: 51.5073346,
    lng: -0.1276831,
  });
});

Quand j'exécute la page j'ai une erreur :

ReferenceError: GMaps is not defined

la console me donne l'explication :

Échec du chargement pour l’élément <script> dont la source est « http://localhost/Interim/web/app_dev.php/..js/gmaps.js ».

effectivement si la page ne charge pas gmaps.js, GMaps n'est pas définie (normal).

Ce qui me pose problème c'est que mon lien me parait être correct, par exemple si sur ma page je clique sur "voir le code source de la page"
et que dans le code source je clique sur le lien de gmaps.js, je charge bien le fichier gmaps.js

Le moindre début d'explication me conviendrait

[ludovic44]

J'ai fini par trouver la solution, je vous la donne

Code :

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

1
2
3
4
5
6
7
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
        <script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyBJaDqUJhJgTSkmC5vIIt1s3eOsv8VBt4s"></script>
		<script src="../js/gmaps.js"></script>

l'avantage c'est que l'on peut exécuter le code dans une fonction(event, ui)

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
$(function(){
 
	$('#fos_user_registration_form_ville').autocomplete({
		source : Routing.generate('l2_geo_town_ajax', {}),
		minLength : 3,
 
		response : function( event, ui ) {
				var map = new GMaps({
				el: '#map',
				lat: 48.866,
				lng: 2.333
				});
 
			},
 
		select : function(event, ui){
			$('#fos_user_registration_form_idville').val(ui.item.id);
		}
 
	});