Discussion :

[Maxou73]

Bonjour à tous,

Je viens de mettre en place un code pour afficher une carte Google Maps + géolocalisation permettant le calcul d'itinéraire et cela fonctionne très bien. Cependant, dès que j'insère le script sur la page où ce dernier doit se trouver, la géolocalisation fonctionne mais la carte ne s'affiche plus. A noter que la dite page est "gérée" par SkelJS. Après quelques recherches, je me rends compte que le code Google Maps entre en conflit avec la fonction "skel.init()", car dès lors que je la supprime, la carte Google Maps s'affiche de nouveau.

Code API Google Maps :

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
 
function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var mapOptions = {
    zoom: 7,
    center: new google.maps.LatLng(48.9021450, 2.46992090)
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById('directions-panel'));
 
  var control = document.getElementById('control');
  control.style.display = 'block';
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);
}
 
function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
 
window.onload = function() {
	function currentPosition(position) {
		var coords = position.coords;
		var xmlhttp = new XMLHttpRequest();
		xmlhttp.onload = function () {
			var response = JSON.parse(this.responseText);
			var infos = "";
			infos += ""+ response.city.name;
			infos += ","+ response.city.country;
			document.getElementById('infos').innerHTML = infos;	
			document.getElementById('start').value = infos;	
		};
		xmlhttp.open('GET', 'http://api.openweathermap.org/data/2.5/forecast?lat='+ coords.latitude +'&lon='+coords.longitude+'', true);
		xmlhttp.send(null);
	}
 
	function erreurPosition(error) {
		var info = "Erreur lors de la géolocalisation : ";
		switch(error.code) {
		case error.TIMEOUT:
			info += "Timeout !";
		break;
		case error.PERMISSION_DENIED:
			info += "Vous n’avez pas donné la permission";
		break;
		case error.POSITION_UNAVAILABLE:
			info += "La position n’a pu être déterminée";
		break;
		case error.UNKNOWN_ERROR:
			info += "Erreur inconnue";
		break;
		}
		document.getElementById("erreur").innerHTML = info;	
	}
 
	if (navigator.geolocation) {
		var navAPI = navigator.geolocation;
		navAPI.getCurrentPosition(currentPosition, erreurPosition);
	}
	else {alert('La géolocalisation est indisponible sur votre navigateur');}
};

Faut-il ajouter une condition dans le skel.init() afin que le code Google Maps puisse fonctionner ? Si oui, comment ? Il y a-t-il une autre solution ?

Merci d'avance pour votre aide, toute piste est la bienvenue !

[NoSmoking]

Bonjour,
je ne connais pas SkelJS, pourrais tu mettre une page en ligne que l'on y jette un oeil...

[Maxou73]

Merci pour ta réponse rapide !

Je viens d'uploader une version "light" avec l'essentiel ;

- Page principale où se trouve normalement la carte : http://s335436213.onlinehome.fr/googlemaps/
- Fichier JS où se trouve la fonction skel.init() : http://s335436213.onlinehome.fr/googlemaps/js/init.js

[NoSmoking]

Désolé mais la seule chose que je vois c'est un conteneur de carte (id="map-canvas") qui, déclaré en height:100%, a une hauteur de 0 au moment de sa création, attendu que son parent fait 0.
Il te serais plus avantageux de déclarer une hauteur fixe.

[Maxou73]

En effet, c'était bien ça, simple erreur de CSS au final

Merci beaucoup !