StreetView Google dans un onglet d'une infobulle d'un marker

**informer** · 31/10/2013, 20h54

Bonjour à tous !!!

Voilà, je me suis donné comme objectif d'afficher sur une carte GoogleMaps, des markers (bon rien de passionnant) et dans l'info-bulles associée à chaque marker , 2 tabulations avec dans la 1ère , des données sur le lieu et dans la 2ème le StreetView correspondant à l'adresse.

J'ai bien une info bulles avec 2 onglets , des infos dans la 1ère et le streetView dans le 2ème.

Mais c'est là que ça disjoncte, car c'est toujours la dernière adresse qui est affichée.

Bon j'ai lu des trucs sur comment éviter ce problème notamment en appelant infowindow.open(map, marker) par une fonction externe mais là ça dépasse mes compétences car je ne sais plus où appeler la création des onglet et le domready de l'infowindow.

Cà c'est le blabla, maintenant mon code et merci de votre aide à tous (Mon incrémentation peut dérouter les pros du codage, désolé) :

Code html :

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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps JavaScript API v3 Example: Common Loader</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="utils.js"></script> 
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
 
<script type="text/javascript"> 
 
        
        // Set the Map variable
        var map;
        var all = 
        [       ["Location 1", "Summerdale Rd", "Elon", "NC", "27253", "36.150491", "-79.5470544"], 
                ["Location 2", "7205 Olmstead Dr", "Burlington", "NC", "27215", "36.069974", "-79.548101"],
                ["Location 3", "W Market St", "Graham", "NC", "27253", "36.0722225", "-79.4016207"],
                ["Location 4", "Mt Hermon Rock Creek Rd", "Graham", "NC", "27253", "35.9826328", "-79.4165216"],
                ["Location 5", "415 Spring Garden St", "Greensboro", "NC", "27401", "36.06761", "-79.794984"]
        ];                              
                
        function initialize()
        {       
            var myOptions = 
                        {       zoom: 9,
                                mapTypeId: google.maps.MapTypeId.ROADMAP
                        };
                                
        var infoWindow = new google.maps.InfoWindow;
        map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
        
                // Set the center of the map
        var pos = new google.maps.LatLng(36.0621881, -79.5101063);
        map.setCenter(pos);
                setMarkers(map, all)            
        
   };
   
   function setMarkers(map, all)
   {    
                for (var i in all) 
                {       var name        = all[i][0];
            var address = all[i][1];
            var city    = all[i][2];
            var state   = all[i][3];
            var zip     = all[i][4];
            var lat     = all[i][5];
            var lng     = all[i][6];
            
            var latlngset = new google.maps.LatLng(lat, lng);
            var marker = new google.maps.Marker({map: map,title: city,position: latlngset });
                        
                        
                        var contentInfoWindow =
                        [       '<div id="InfoText">',
                                '<div class ="tabs">',
                                '<ul>',
                                  '<li><a href="#tab1">General</a></li>',
                                  '<li><a href="#tab2" id="SV">Street View</a></li>',
                                '</ul>',
                                '<div id="tab1">',
                                '<h3><b>' + name + '</h3></b>',
                                '<p>' + city + '<BR>' + state  + '<BR>' + zip + '</p>',
                                '</div>',
                                '<div id="tab2">',
                                '<div id="pano"><div>', 
                                '</div>',
                                '</div>'
                        ].join('');
                        
                        
                        var infoWindowOptions = 
                        {       content  : contentInfoWindow,   // Ici passe le content dans le constructeur
                                position : latlngset
                        };
                        
                        infowindow = new google.maps.InfoWindow(infoWindowOptions);
                        google.maps.event.addListener(marker, "click", function()
                        {       infowindow = new google.maps.InfoWindow(infoWindowOptions);
                                infowindow.open(map, marker);
                                var panoramaOptions = {position: marker.position};
                                google.maps.event.addListener(infowindow, 'domready', function()
                                {       $(".tabs").tabs();
                                        $('#SV').click(function()
                                        {       var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions);  
                                                map.setStreetView(panorama);
                                        });
                                });
                        });// Click marker
                }// For
        };
        
        
        function infoWinBack(marker, infowindow)
        {       return function(){ infowindow.open(map, marker);};
        };
    
    
      // Initializes the Google Map
        google.maps.event.addDomListener(window, 'load', initialize);
        
 
  </script> 
 
<style>
#infotext {
font-size: 12px;
width:480px;
height: 380px;
}
.tabs {
width:450px;
height: 350px;
 
}
#pano {
width:350px;
height: 250px;
 
 
}
</style>
</head> 
<body> 
  <div id="map_canvas" style="width:700px; height:600px"></div>
  <!-- <div id='pano' style='position: absolute: top: 40px; left: 2px; width: 380px; height:290px;'></div> --> 
</body> 
</html>

**NoSmoking** · 01/11/2013, 15h26

Bonjour,

Pourquoi l'InfoWindow n'affiche pas le bon contenu ?

**informer** · 02/11/2013, 13h19

Bonjour NoSmoking,

Un grand merci pour ton lien qui m'a permis de finaliser le code!

(Le copier/coller => problème d'indentation)

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps JavaScript API v3 Example: Common Loader</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="utils.js"></script> 
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
 
<script type="text/javascript">

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
// Set the Map variable
var map;
var tMarker = [{
    'locNr': "Location 1",
    'lat': 45.767299,
    'lon': 4.834329,
    'city': 'Lyon',
    'zip': 69,
    'land': "Fance",
    'info': '<b>Lyon<\/b><br>la suite du texte...'
},
{
    'locNr': "Location 2",
    'lat': 48.856667,
    'lon': 2.350987,
    'city': 'Paris',
    'zip': 75,
    'land': "Fance",
    'info': '<b>Paris<\/b><br>la suite du texte...'
},
{
    'locNr': "Location 3",
    'lat': 44.837368,
    'lon': -0.576144,
    'city': 'Bordeaux',
    'zip': 33,
    'land': "Fance",
    'info': '<b>Bordeaux<\/b><br>la suite du texte...'
},
{
    'locNr': "Location 4",
    'lat': 43.297612,
    'lon': 5.381042,
    'city': 'Marseille',
    'zip': 13,
    'land': "Fance",
    'info': '<b>Marseille<\/b><br>la suite du texte...'
}];
function initialize() {
    var myOptions = {
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var infoWindow = new google.maps.InfoWindow;
    map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
    // Set the center of the map
    var pos = new google.maps.LatLng(46.80, 1.75);
    map.setCenter(pos);
    setMarkers(map, tMarker)
};
function setMarkers(map, tMarker) {
    for (var i in tMarker) {
        var lat = tMarker[i].lat;
        var lng = tMarker[i].lon;
        var locNr = tMarker[i].locNr;
        var city = tMarker[i].city;
        var zip = tMarker[i].zip;
        var land = tMarker[i].land;
        var info = tMarker[i].info;
        var latlngset = new google.maps.LatLng(lat, lng);
        var oMarkOpt = {
            position: latlngset,
            map: map,
            title: city
        };
        var marker = new google.maps.Marker(oMarkOpt);
        var contentInfoWindow = ['<div id="InfoText">', '<div class ="tabs">', '<ul>', '<li><a href="#tab1">General</a></li>', '<li><a href="#tab2" id="SV">Street View</a></li>', '</ul>', '<div id="tab1">', '<h3><b>' + locNr + '</h3></b>', '<p>' + city + '<BR>' + land + '<BR>' + zip + '<BR>' + info + '</p>', '</div>', '<div id="tab2">', '<div id="pano"></div>', '</div>'].join('');
        var infoWindowOptions = {
            content: contentInfoWindow,
            position: latlngset
        };
        var infowindow = new google.maps.InfoWindow(infoWindowOptions);
        setEventMarker(marker, infowindow);
    } // For
};
function setEventMarker(marker, infowindow) {
    google.maps.event.addListener(marker, "click", function () {
        infowindow.open(this.getMap(), this);
    });
    var panoramaOptions = {
        position: marker.position
    };
    google.maps.event.addListener(infowindow, 'domready', function () {
        $(".tabs").tabs();
        $('#SV').click(function () {
            var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);
            map.setStreetView(panorama);
        });
    });
};
// Initializes the Google Map
google.maps.event.addDomListener(window, 'load', initialize);

Code html :

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
</script> 
<style>
#infotext {
  font-size:12px;
  width:480px;
  height:380px;
}
.tabs {
  width:450px;
  height:350px;
}
#pano {
  width:350px;
  height: 250px;
}
</style>
</head> 
<body> 
  <div id="map_canvas" style="width:100%; height:100%"></div>
  <!-- <div id='pano' style='position: absolute: top: 40px; left: 2px; width: 380px; height:290px;'></div> --> 
</body> 
</html>

StreetView Google dans un onglet d'une infobulle d'un marker [Google Maps]

APIs Google

Discussions similaires

Partager

Partager