Discussion :

[theo213]

Hello voici mon soucis, je dois afficher une carte contenant des adresse de restos.

Ma carte s'affiche bien et indique ma position mais je n'arrive pas a faire affcher d'autres adresses ..

map.js

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
97
98
99
100
101
102
103
104
105
class Map1
{
    constructor()
    {        
        var map1;
        var infoWindow1;
        var infoWindowResto;
 
 
        this.createMap();   
 
    }
 
    createMap()
    {                
        var infoWindow1 = new google.maps.InfoWindow;
 
        if ( navigator.geolocation )
        {                
            navigator.geolocation.getCurrentPosition(function (p)
            {
                var position = 
                {
                    lat: p.coords.latitude,
                    lng: p.coords.longitude
                };
 
                var options = 
                {
                    center: { lat : p.coords.latitude, lng: p.coords.longitude},
                    zoom : 8,
                };
 
                map1 = new google.maps.Map(document.getElementById('map'), options);
 
                infoWindow1.setPosition(position);
 
			    var marker = new google.maps.Marker(
                {
				    map: map1
			    });
                infoWindow1.setContent('your location !');
                infoWindow1.open(map1, marker);    
                console.log(map1);
 
            }, function ()
                {
                    this.handleLocationError('geolocation service failed', map1.center())
                })	
        }
        else
        {
            this.handleLocationError('no gleolocation available', map1.center())
        }      
        this.placeResto();
    }
 
 
    placeResto()
    {         
        var infoWindowResto = new google.maps.InfoWindow;
 
 
 
        ajaxGet("http://localhost/javascript-web-srv/data/resto.json", function (reponse) 
        {
            var rep = JSON.parse(reponse);
 
            for(let i = 0; i < rep.length; i++)
            {
                var y = rep[i];    
 
                var latRestos = y.lat;
                var lngResto = y.lng;
                var nom = y.restaurantName;
 
 
                var marqueurResto = { lat:latRestos, lng:lngResto};	
 
                infoWindowResto.setPosition(marqueurResto);
 
                var marker1 = new google.maps.Marker
                ({
                    position: marqueurResto,
                    map: map1    
                });    
 
                infoWindowResto.open(map1, marker1); 
 
                 console.log(nom,latRestos,lngResto);
 
            };
        });
 
    }
 
 
    handleLocationError ( content, position )
    {
        infoWindow.setPosition(position);
        infoWindow.setContent(content);
        infoWindow.open(map);
    }
 
}

Lorsque je lance dans le navigateur, la console affiche cette erreur :

InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama js:60:128
Bronco 48.8737815 2.3501649 map.js:90:26
InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama js:60:128
Babalou 48.8865035 2.3442197 map.js:90:26
TypeError: f is undefined

je récupère pourtant bien les coordonnées des point ...

Merci pour votre aide

[ProgElecT]

Salut, bienvenue sur DVP

Peut être tes lignes 84 et 85

Code :

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

1
2
3
4
5
                var marker1 = new google.maps.Marker
                ({
                    'position': marqueurResto,
                    'map': map1    
                });

[theo213]

merci a toi

J'ai essayer avec les '', ça ne change rien..
mais quand je fais un console.log('map1') a deux endroit différents j’obtiens :

InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama js:60:128
Object { }
map.js:87:25
Bronco 48.8737815 2.3501649 map.js:90:26
InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama js:60:128
Object { }
map.js:87:25
Babalou 48.8865035 2.3442197 map.js:90:26
Object { gm_bindings_: {…}, __gm: {…}, gm_accessors_: {…}, center: {…}, zoom: 8, mapTypeId: "roadmap", j: undefined, mapTypes: {}, features: {}, streetView: {…}, … }

On dirais qu'elle est vide dans la boucle

[NoSmoking]

Bonjour,
ta « classe » et les méthodes associées requirent plus de rigueur comme par exemple les déclarations

Code :

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

1
2
3
4
5
6
7
class Map1 {
  constructor() {
    this.map1 = null;           // ou directement = new google.maps.Map(...)
    this.infoWindow1 = null;
    this.infoWindowResto = null;
    this.createMap();
  }

ensuite dans ta classe tu peux utiliser this.map1.

Code :

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

1
2
3
let marker = new google.maps.Marker({
  map: this.map1
});