Conflit API Google Maps & SkelJS
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:
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 !
