Multipe Google Maps met Mootools
ik ben bezig met een applicatie waarin in meerdere Google Maps wil laden met Mootools 1.2. Zoals jullie weten moet je normatliter netjes het id van de div opgeven waarin je de maps wil laden. Nu ziet mijn html er zo uit:
Code (php)
1
2
3
2
3
<div class="easymap_prev" id="easymaps[1]"></div>
<div class="easymap_prev" id="easymaps[2]"></div>
<div class="easymap_prev" id="easymaps[3]"></div>
<div class="easymap_prev" id="easymaps[2]"></div>
<div class="easymap_prev" id="easymaps[3]"></div>
Wat Moools betreft heb ik het volgende:
Code (php)
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
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
var TrackReader = new Class({
Implements: [Chain, Options],
options: {
map_width: 300,
map_height: 200,
map_type: 'G_SATELLITE_MAP'
},
initialize: function(options){
if(!GBrowserIsCompatible()){
alert('browser not compatible');
}
this.maps = [];
this.prepareMaps();
if(this.maps.length == 0){
alert('Geen maps');
//return false;
}
this.initEasyMaps();
},
initEasyMaps: function(){
this.maps.each(function(map){
this.loadMap(map);
},this);
},
loadMap: function(div){
var map = new GMap2(div);
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
},
prepareMaps: function(rEl){
var maps_div = [];
var div_maps = (rEl) ? rEl : $$('div.easymap_prev');
div_maps.each(function(div){
//test 'milkbox' and link extension, and collect all milkbox links
if(div.id && div.id.test(/^easymaps/i)){
if(div.id.length > 7 && !this.maps.contains(div.id)){
//alert(div.id);
this.maps.push(div.id);
}
maps_div.push(div);
}
},this);
}
});
window.addEvent('domready', function() {
var tr = new TrackReader({
/*map_width: 300,
map_height: 200*/
});
});
Implements: [Chain, Options],
options: {
map_width: 300,
map_height: 200,
map_type: 'G_SATELLITE_MAP'
},
initialize: function(options){
if(!GBrowserIsCompatible()){
alert('browser not compatible');
}
this.maps = [];
this.prepareMaps();
if(this.maps.length == 0){
alert('Geen maps');
//return false;
}
this.initEasyMaps();
},
initEasyMaps: function(){
this.maps.each(function(map){
this.loadMap(map);
},this);
},
loadMap: function(div){
var map = new GMap2(div);
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
},
prepareMaps: function(rEl){
var maps_div = [];
var div_maps = (rEl) ? rEl : $$('div.easymap_prev');
div_maps.each(function(div){
//test 'milkbox' and link extension, and collect all milkbox links
if(div.id && div.id.test(/^easymaps/i)){
if(div.id.length > 7 && !this.maps.contains(div.id)){
//alert(div.id);
this.maps.push(div.id);
}
maps_div.push(div);
}
},this);
}
});
window.addEvent('domready', function() {
var tr = new TrackReader({
/*map_width: 300,
map_height: 200*/
});
});
Nu krijg ik de volgende melding in Firebug welke komt uit de main.js die je voor googlemaps nodig hebt:
Quote:
[Exception... "Could not convert JavaScript argument arg 0 [nsIDOMViewCSS.getComputedStyle]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: http://maps.google.com/intl/nl_ALL/mapfiles/140g/maps2.api/main.js :: ad :: line 53" data: no]
Heeft iemand ervaring met het laden van meerdere googlemaps zonder dag je specifiek elk id in de api propt? Ik wil dit namelijk mooi dynamisch oplossen...
Ik ben benieuwd,
Crispijn
PS, het selecteren en filteren heb ik flink afgekeken van Milkbox, een lightbox voor Mootools 1.2...
edit:
verschillende id's in de html gezet en comment meuk die niet nodig is uit de class gehaald
Gewijzigd op 01/01/1970 01:00:00 door Crispijn -
Gesponsorde koppelingen:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
$$('div.maps').each(function(div){
var id = false;
while(!id || $(id)){
id = $random()+'maps';
}
div.set('id',id);
});
var id = false;
while(!id || $(id)){
id = $random()+'maps';
}
div.set('id',id);
});
var map = new GMap2('gmaps');
dat dan 'gmaps' het id is van het element waar je je map in wilt hebben. de class GMap2 gaat dan later met behulp van document.getElementById() ofzo het element ophalen... of je moet die class GMap2 zo ombouwen dat hij niet perse een string, het id van je element, maar ook een object accepteert..
Of is dat gewoon $(div) bij het laden van die map?
Je bent al zo lang lid, en dan nog drie keer bumpen.
Dat zegt echt wel wat over je.
Crispijn schreef op 17.02.2009 17:32:
Nou nou nou, die derde is indd verkeerd geplaatst maar die tweede was alleen een melding over hoe het op te lossen. Zo erg is dat toch niet? Alleen handig voor de mensen die er naar zoeken!
Waarom zouden die dat dan niet vinden, als je dat bij je bericht inedit of als je over 24 uur weer een bericht post?
