Google Maps API problemen bij Refresh pagina
Ik ben vandaag bezig geweest met een contact pagina op mijn portfolio(http://geertvansoest.nl/contact.php), met daarop ook een div met daarin de API van Google Maps.
Alleen word af en toe niet de kaart juist getoond (zie afbeelding).
Dit probleem lijkt zich onder andere voor te doen omdat de overkoepelende div waarin de map staat op het begin niet zichtbaar is en pas later via masonry wordt getoond.
Echter, in eerste instantie heb ik dit weten te tackelen door de volgende code toe te voegen:
Code (js)
1
2
3
4
5
6
2
3
4
5
6
function center()
{
lastCenter=map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(lastCenter);
}
{
lastCenter=map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(lastCenter);
}
Daardoor wordt de kaart meestal de eerste keer goed getoond.
Dus de kaart 'beeldvullend' en de marker in het midden (zie afbeelding).
Echter, als je met een bepaalde browsers (bij mij doet alleen Firefox het bijna steeds goed) de pagina ververst of later terug gaat naar de pagina doet het probleem (eerste plaatje) zich opnieuw voor.
Als je dan met je muis de kaart verschuift (dus de "Center" veranderd), werkt het weer goed. Hetzelfde is het geval als je de browser sluit en opnieuw opent.
Dit is mijn code:
Code (js)
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
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
var thuis = new google.maps.LatLng(51.323988, 6.004325);
var image = 'portfolio/images/pointer.png';
var marker;
var map;
function initialize()
{
var mapOptions =
{
zoom: 10,
center: thuis
};
map = new google.maps.Map(document.getElementById('contactMapInner'),mapOptions);
marker = new google.maps.Marker(
{
map:map,
position: thuis,
icon: image
//animation: google.maps.Animation.DROP
});
google.maps.event.addListener(map, "idle", center);
google.maps.event.addListener(marker, 'click', toggleBounce);
}
function center()
{
lastCenter=map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(lastCenter);
}
function toggleBounce()
{
if (marker.getAnimation() != null)
{
marker.setAnimation(null);
}
else
{
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
var image = 'portfolio/images/pointer.png';
var marker;
var map;
function initialize()
{
var mapOptions =
{
zoom: 10,
center: thuis
};
map = new google.maps.Map(document.getElementById('contactMapInner'),mapOptions);
marker = new google.maps.Marker(
{
map:map,
position: thuis,
icon: image
//animation: google.maps.Animation.DROP
});
google.maps.event.addListener(map, "idle", center);
google.maps.event.addListener(marker, 'click', toggleBounce);
}
function center()
{
lastCenter=map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(lastCenter);
}
function toggleBounce()
{
if (marker.getAnimation() != null)
{
marker.setAnimation(null);
}
else
{
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
Ik zelf heb al van alles geprobeerd om steeds als je de pagina opent de center() functie opnieuw aan te roepen, maar zonder succes.
Ik hoop dat het duidelijk is.
Wie kan me helpen?
Alvast bedankt!
Even je code tussen de code-tags gezet ipv de quote-tags[/modedit]
Gewijzigd op 12/09/2013 12:14:36 door Geert van Soest
- Je moet ingelogd zijn op dat forum om die afbeelding te zien.
Quote:
U bent niet ingelogd, of u hebt niet de rechten om deze pagina in te zien.
Dit kan één van de volgende redenen hebben:
Dit kan één van de volgende redenen hebben:
Ik heb de symptomen van jouw probleem dus niet kunnen zien.
Kan je die afbeelding elders zetten? (Edit: ik denk wel dat ik snap waar het over gaat)
- Al je blokken code; kan je die tussen [code][/code] zetten?
------
Wat is die masonry?
Want het lijkt me inderdaad een slecht idee dat je Google Maps al activeert vooraleer die div er staat.
Ik zou zelfs aanraden dat die div eerst een maximale grootte krijgt; dat je dan Google Maps activeert, en dan pas die div kan verkleinen.
----
EDIT2:
Dit? http://masonry.desandro.com/
[strike]Waar activeer je die masonry? Ik vind het niet direct terug in je code.[/strike]
Never mind; gevonden
Gewijzigd op 12/09/2013 12:25:56 door Kris Peeters
De masonry die jij hebt gevonden is inderdaad de goede. Hij wordt in de head aangeroepen na $(document).ready.
Die code ziet er als volgt uit:
Code (js)
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
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
// breedte items berekenen -> contact paginan
function setWidthContact()
{
var $container = $('#contact .content');
var containerWidth = $container.outerWidth(true);
$container.imagesLoaded( function ()
{
$container.masonry(
{
itemSelector: '.contactData',
isAnimated: true,
columnWidth: function( containerWidth )
{
// klein scherm -> projecten onder elkaar
if(containerWidth <= 320)
{
$('.contactData').css('width','98%');
return containerWidth / 1;
}
// middelgroot scherm -> 2 projecten langs elkaar
else if(containerWidth > 320)
{
$('.contactData').css('width','47.9%');
return containerWidth / 2;
}
}
});
});
}
function setWidthContact()
{
var $container = $('#contact .content');
var containerWidth = $container.outerWidth(true);
$container.imagesLoaded( function ()
{
$container.masonry(
{
itemSelector: '.contactData',
isAnimated: true,
columnWidth: function( containerWidth )
{
// klein scherm -> projecten onder elkaar
if(containerWidth <= 320)
{
$('.contactData').css('width','98%');
return containerWidth / 1;
}
// middelgroot scherm -> 2 projecten langs elkaar
else if(containerWidth > 320)
{
$('.contactData').css('width','47.9%');
return containerWidth / 2;
}
}
});
});
}
En dit om de div's te tonen. Na $(window).load, zodat eerst de afmetingen bekend zijn voordat met name afbeeldingen (vooral op de homepage) over de volle breedte getoond worden.
Code (js)
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
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
$(window).load(function()
{
showDiv();
// items 1 voor 1 laten verschijnen bij laden pagina
// pas als alles is geladen
function showDiv()
{
// homepage
// If there are hidden divs left
if($('.item:hidden').length)
{
// Fade the first of them in
$('.item:hidden:first').fadeIn(300);
// And wait one second before fading in the next one
setTimeout(showDiv, 200);
}
// about pagina / project pagina / contact pagina
else if($('.aboutData:hidden').length || $('.projectData:hidden').length || $('.contactData:hidden').length)
{
$('.aboutData:hidden:first').fadeIn(1000);
$('.projectData:hidden:first').fadeIn(1000);
$('.contactData:hidden:first').fadeIn(1000);
setTimeout(showDiv, 500);
}
}
})
{
showDiv();
// items 1 voor 1 laten verschijnen bij laden pagina
// pas als alles is geladen
function showDiv()
{
// homepage
// If there are hidden divs left
if($('.item:hidden').length)
{
// Fade the first of them in
$('.item:hidden:first').fadeIn(300);
// And wait one second before fading in the next one
setTimeout(showDiv, 200);
}
// about pagina / project pagina / contact pagina
else if($('.aboutData:hidden').length || $('.projectData:hidden').length || $('.contactData:hidden').length)
{
$('.aboutData:hidden:first').fadeIn(1000);
$('.projectData:hidden:first').fadeIn(1000);
$('.contactData:hidden:first').fadeIn(1000);
setTimeout(showDiv, 500);
}
}
})
Na aanleiding van je reactie heb ik gekeken of het werkt om de Google Maps pas te activeren als alles is geleaden (dus na $(window).load), maar dan zie ik hem helemaal niet meer.
Overigens, als de map niet werkt en ik verklein/vergroot het venster (en daarmee ook het frame waarin de maps staat) dan werkt ie weer. En zoals ik al zei altijd de eerste keer dat ik met een browser de pagina open, maar als ik er vervolgens opnieuw heen ga (vaak) niet.
Edit: Volgens mij is het nu opgelost! Ik heb nu in eerste instantie alleen de linker div laten 'showen' (nog bij $(document).ready):
Code (js)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
function showDivContact()
{
// contact
// linker div tonen
if($('.contactData:hidden').length)
{
$('.contactData:hidden:first').fadeIn(1000);
}
}
{
// contact
// linker div tonen
if($('.contactData:hidden').length)
{
$('.contactData:hidden:first').fadeIn(1000);
}
}
En veel later (na $(window).load) wordt ook de kaart getoond (via de showDiv()) functie, zie eerder in deze post. Ik denk dat de 'tijd' die er nu tussen zit nodig was/genoeg is om de kaart te 'maken' en alles op zijn plaats te zetten. Ik heb nu met verschillende browsers een aantal keren geprobeerd en het heeft in ieder geval nog geen problemen opgeleverd.
Edit 2: Ik ben er inmiddels achter gekomen dat het vooral mis gaat als er een 'timeout' tussen het tonen van de eerste en tweede div zit. Of het nu gebeurd met een Timeout of Delay maakt verder geen verschil. Iemand een alternatief?
Gewijzigd op 12/09/2013 13:32:30 door Geert van Soest
Versie 3 heeft speciaal onComplete functies toegevoegd, voor de animate.
Zie je het zitten om je code aan te passen naar v3? (je zal wat dingen moeten aanpassen).
Anders moet ik wat "vuile" truukjes gebruiken om die onComplete zelf te maken.
Zeker aangezien ik het probleem al zo ongeveer getackeld heb en het enige 'probleem' is dat de div met contactgegevens en de kaart nu tegelijk verschijnen. En dat lijkt me geen onoverkomelijk probleem. Al zou het fijn zijn als ook dat opgelost kan worden. :)
Heb trouwens nog één probleempje wat ik laatst tegen kwam, maar wat zich alleen voordoet bij Safari en alleen op de homepage. Heb er op een ander forum nog geen reactie op gehad. Misschien weet jij ook hoe ik dat kan voorkomen?
Gewijzigd op 12/09/2013 14:37:05 door Geert van Soest
Dit:
Code (js)
1
google.maps.event.addDomListener(window, 'load', initialize);
Heb ik vervangen door:
Code (js)
1
2
3
4
5
6
2
3
4
5
6
google.maps.event.addDomListener(window, 'load', initializeWait);
function initializeWait()
{
setTimeout(initialize, 500);
}
function initializeWait()
{
setTimeout(initialize, 500);
}
Topic kan dicht. :-)
Gewijzigd op 12/09/2013 19:18:29 door Geert van Soest