Combiner deux codes javascript

**guns65** · 28/09/2013, 23h49

salut !! j'essaie de faire une application de géolocalisation pour les café autour de ma position !! j'ai réussi a faire les deux chose séparément mais quand je les met dans al même page rien ne marche !!

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!Doctype html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&language=fr"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 <script type="text/javascript" src="jquery-1.9.0.js" ></script>
 <!--<script type="text/javascript" src="geoloc.js" ></script>-->
 
 <script>
 $(document).ready( function () {
 
      var sucess = function(pos){
      var lat= pos.coords.latitude,
      lng = pos.coords.longitude,
      coords = lat + ', ' +lng;
      document.getElementById('carte').setAttribute(google.maps.LatLng(coords))
          }
 
  document.getElementById('location').onclick=function(){
     alert("you are here");
      navigator.geolocation.getCurrentPosition(sucess);
 
      }
 
    // Paramétrage des marqueurs
    var pinColor = "29aec3";// couleur des épingles google MAP
    var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34));
    var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
        new google.maps.Size(40, 37),
        new google.maps.Point(0, 0),
        new google.maps.Point(12, 35));
 
  function initialiser() {
    // Récupération de la latitude et longitude pour centrer notre carte
    var latlng = new google.maps.LatLng(35.829479,10.587815);
 
    //Objet contenant des les propriétés d'affichage de la carte Google MAP
    var options = {
          center    : latlng,
          zoom      : 16,
          mapTypeId : google.maps.MapTypeId.ROADMAP
                  }
 
    //Constructeur de la carte
    var carte = new google.maps.Map(document.getElementById("carte"), options);
 
    // Récupération en AJAX des données des lieux à épingler sur la carte Google map
    $.ajax({
       url   : 'index-map-ajax.php',
       error : function(request, error) { // Info Debuggage si erreur        
                 alert("Erreur sous genre - responseText: "+request.responseText);
                },               
    dataType : "json", 
    success  : function(data){
                  $("#carte").fadeIn('slow');
                  var infowindow = new google.maps.InfoWindow();   
                  var marker, i;  
                  // Parcours des données reçus depuis le fichier index-map-ajax.php
                  // Récupération de LatLng, Hint et Legende de chaque lieu et création d'un marqueur
                  $.each(data.items, function(i,item){
                     if (item) {
                        if (item.LatLng_lieu!=''){
                           // On sépare la latitude et la longitude
                           var strLatLng = item.LatLng_lieu.split(',');
                           marker = new google.maps.Marker({
                             position : new google.maps.LatLng(strLatLng[0], strLatLng[1]),
                             map      : carte,
                             icon     : pinImage,
                             shadow   : pinShadow,
                             title    : item.Titre_lieu
                            });         
                  google.maps.event.addListener(marker, 'click', (function(marker, i) {
                   return function() {
                   // Affichage de la légende de chaque lieu
                   infowindow.setContent('<a target="_blank" href="'+item.Url_lieu+'"><br/>'+item.Titre_lieu+' </a> ');
                   infowindow.open(carte, marker);
                  }
                })(marker, i));                              }        
                //alert('Vérification données reçues '+item.Titre_lieu+' -- '+item.Url_lieu+ ' -- '+item.LatLng_lieu);
              }
            });                       
          }
        });
      }initialiser();
  })
 
</script>
</head>
<body>
    <a href="#" id="location" >geolocalisation</a>
    <div id="carte" style="width:700px; height:400px"></div>
</body>
</html>

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!Doctype html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&language=fr"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 <script type="text/javascript" src="jquery-1.9.0.js" ></script>
 <!--<script type="text/javascript" src="geoloc.js" ></script>-->
 
 <script>
 
 
 $(function() {
                        if(navigator.geolocation) {
                                //initialise la map
                                googleMap = new google.maps.Map($("#carte").get(0), {
                                        zoom: 17,
                                        center: new google.maps.LatLng(35.829479,10.587815),
                                        mapTypeId: google.maps.MapTypeId.ROADMAP
                                });
 
                                startLocalisation();  
                        } else {
                                alert('Votre navigateur ne supporte pas la géolocalisation HTML5');
                        }
                });
 
                function startLocalisation() {
                        //active le GPS
                        var userPosition = navigator.geolocation.watchPosition(callbackSuccess, callbackError, {enableHighAccuracy: true});
                }
 
                function callbackSuccess(position) {
                        //récupère la latitude et la longitude
                        var latitude = position.coords.latitude;
                        var longitude = position.coords.longitude;
 
                        //trace un marqueur
                        var marker = new google.maps.Marker({
                                position: new google.maps.LatLng(latitude, longitude),
                                map: googleMap
                        });
 
                        //centre la map aux coordonnées voulue
                                googleMap.panTo(new google.maps.LatLng(latitude, longitude));
 
                        //trace une ligne entre lancienne position et la nouvelle
                        if(oldLat) {
 
                                var lines = [
                                                new google.maps.LatLng(oldLat, oldLng),
                                                new google.maps.LatLng(latitude, longitude)
                                ];
 
                                //dessine les lignes
                                var line = new google.maps.Polyline({
                                                path: lines,
                                                strokeColor: "red",
                                                strokeOpacity: 1.0,
                                                strokeWeight: 3,
                                                map: googleMap
                                });
                        }
 
                        //actualise les anciennes positions
                        oldLat = latitude;
                        oldLng = longitude;
                }
 
                function callbackError(error) {
                        switch(error.code) {
                                case error.UNKNOWN_ERROR:
                                                alert("La géolocalisation a rencontré une erreur.");
                                break;
                                case error.PERMISSION_DENIED:
                                                alert("L'utilisateur n'a pas voulu donner sa position.");
                                break;
                                case error.POSITION_UNAVAILABLE:
                                                alert("Les coordonnées de l'utilisateur n'ont pas pu être trouvées.");
                                break;
                                case error.TIMEOUT:
                                                alert("La géolocalisation prend trop de temps.");
                                break;
                        }
                }
 
 
 
</script>
</head>
<body>
    <a href="#" id="location" >geolocalisation</a>
    <div id="carte" style="width:700px; height:400px"></div>
</body>
</html>

**NoSmoking** · 30/09/2013, 11h26

Bonjour,

...quand je les met dans al même page rien ne marche !!

cela ne nous aide pas beaucoup à savoir ce qu'est ton problème.

Juste au passage

Code html :

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

1
2
3
4
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&language=fr"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery-1.9.0.js" ></script>

tu n'as pas l'imppression de charger plusieurs fois la même chose ?

Combiner deux codes javascript

APIs Google

Discussions similaires

Partager

Partager