trigger('click') google maps api fullscreen error
Ik heb een functie dat de google maps op 100% zet en zoom + resize functies uitvoert.
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
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
$(document).ready(function()
{
jQuery(document).on("click","#map_toggler,#showmap", function(t) // shopmap is voor mobiel, // maptoffler is fuillscreen dekstop
{
var id = $(this).attr('id');
id = $(this).attr('id');
//sessie aanmaken
waarde = 1;
$.post('<?=HTML_ROOT?>inc/fs_sessie.php', { fs: waarde });
if ( $(window).width() > 734 ) // DESKTOP
{
$('#close_full_desk').show();
$('#close_full').hide();
$("#map").css("top", 70);
} else {
$('#close_full_desk').hide();
$('#close_full').show();
$("#map").css("top", 96);
}
if ($(".loading-div").show(), $(".tabnavig").addClass("fullscreen"), $(".dashicons-before").css("margin-top",
"5px"), height = $(window).height() - 68, $(".parentMap").show(), $("#map").css("position", "fixed").css("zIndex", 999).css("left", 0).css("width", "100%").css("height", height + "px"), $(
window).width() < 734) $("#showmap").hide(), $("body").css("position", "fixed"), $(
".radius.mob").attr("style", "display:block!important"),
$(".fa.fa-map-marker.klik").attr("style", "display:inline-block!important"), $(
".tabnavig .fa.fa-map-marker.small").attr("style", "top: 0px;display:block!important");
else {
var ftop = $(window).height() / 2 - 207,
fleft = $(window).width() / 2 - 325;
$(".filter_parent").attr("style", "overflow: hidden;top: " + ftop + "px!important;left:" + fleft + "px;z-index: 99999;width: 680px;margin: 0px auto;position: fixed;"), $("body").css("overflow", "hidden")
}
map.setZoom(map.getZoom()-1),
google.maps.event.trigger(map,"resize"),
$(".gmap").children(".notice").first().addClass("fullscreen"),
$(".gmap").children(".notice").first().css("left","50%").css("left","-=338px");
// MET PHP DE SESSSIE BEKIJKEN
//<?php
if ($_SESSION['fs']==1)
{
//?>
jQuery(function(){
$('#showmap').trigger('click');
})
//<?php } //?>
}
});
{
jQuery(document).on("click","#map_toggler,#showmap", function(t) // shopmap is voor mobiel, // maptoffler is fuillscreen dekstop
{
var id = $(this).attr('id');
id = $(this).attr('id');
//sessie aanmaken
waarde = 1;
$.post('<?=HTML_ROOT?>inc/fs_sessie.php', { fs: waarde });
if ( $(window).width() > 734 ) // DESKTOP
{
$('#close_full_desk').show();
$('#close_full').hide();
$("#map").css("top", 70);
} else {
$('#close_full_desk').hide();
$('#close_full').show();
$("#map").css("top", 96);
}
if ($(".loading-div").show(), $(".tabnavig").addClass("fullscreen"), $(".dashicons-before").css("margin-top",
"5px"), height = $(window).height() - 68, $(".parentMap").show(), $("#map").css("position", "fixed").css("zIndex", 999).css("left", 0).css("width", "100%").css("height", height + "px"), $(
window).width() < 734) $("#showmap").hide(), $("body").css("position", "fixed"), $(
".radius.mob").attr("style", "display:block!important"),
$(".fa.fa-map-marker.klik").attr("style", "display:inline-block!important"), $(
".tabnavig .fa.fa-map-marker.small").attr("style", "top: 0px;display:block!important");
else {
var ftop = $(window).height() / 2 - 207,
fleft = $(window).width() / 2 - 325;
$(".filter_parent").attr("style", "overflow: hidden;top: " + ftop + "px!important;left:" + fleft + "px;z-index: 99999;width: 680px;margin: 0px auto;position: fixed;"), $("body").css("overflow", "hidden")
}
map.setZoom(map.getZoom()-1),
google.maps.event.trigger(map,"resize"),
$(".gmap").children(".notice").first().addClass("fullscreen"),
$(".gmap").children(".notice").first().css("left","50%").css("left","-=338px");
// MET PHP DE SESSSIE BEKIJKEN
//<?php
if ($_SESSION['fs']==1)
{
//?>
jQuery(function(){
$('#showmap').trigger('click');
})
//<?php } //?>
}
});
Als ik op de knop met id='showmap' klik werkt alles naar behoren perfect.
Maar ik maar een sessie aan bij een click event. Omdat men namelijk IN FULLSCREEN op een bepaalde links kunnen klikken die naar een andere pagina verwijzen. Eenmaal aangekomen op die andere pagina, wil ik aan de hand van deze sessie duidelijk maken dat fullscreen nog actief is. Als dit zo is dan wil ik een click triggeren. Als ik dit doe krijg werk het niet goed:
Dit staat in de head tag.
Ik zie dan in de console het volgende:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
Uncaught TypeError: Cannot read property 'setZoom' of null
at HTMLSpanElement.<anonymous> (afghanistan:471)
at HTMLDocument.dispatch (jquery-1.10.2.min.js:5)
at HTMLDocument.v.handle (jquery-1.10.2.min.js:5)
at Object.trigger (jquery-1.10.2.min.js:5)
at Object.e.event.trigger (jquery-migrate-1.2.1.min.js:2)
at HTMLSpanElement.<anonymous> (jquery-1.10.2.min.js:5)
at Function.each (jquery-1.10.2.min.js:4)
at e.fn.init.each (jquery-1.10.2.min.js:4)
at e.fn.init.trigger (jquery-1.10.2.min.js:5)
at HTMLDocument.<anonymous> (afghanistan:1429)
at HTMLSpanElement.<anonymous> (afghanistan:471)
at HTMLDocument.dispatch (jquery-1.10.2.min.js:5)
at HTMLDocument.v.handle (jquery-1.10.2.min.js:5)
at Object.trigger (jquery-1.10.2.min.js:5)
at Object.e.event.trigger (jquery-migrate-1.2.1.min.js:2)
at HTMLSpanElement.<anonymous> (jquery-1.10.2.min.js:5)
at Function.each (jquery-1.10.2.min.js:4)
at e.fn.init.each (jquery-1.10.2.min.js:4)
at e.fn.init.trigger (jquery-1.10.2.min.js:5)
at HTMLDocument.<anonymous> (afghanistan:1429)
Maps is dus null, maar dat is vreemd, want hij is al aangemaakt. Ook al zet ik deze in de footer, krijg ik hetzelfde.
Hoe kan ik zodanig een click trigger uitvoeren, zodat ik hetzelfde effect krijg als wanneer ik met de muis op het element klik?
Toevoeging op 25/03/2017 20:33:12:
EEN UPDATE:
als ik dit doe
Code (php)
1
2
3
4
5
2
3
4
5
setTimeout(function() {
$('#showmap').trigger('click');
}, 1500);
$('#showmap').trigger('click');
}, 1500);
Dan werkt hij wel. Dus hij is nog niet helemaal geladen, wat vreemd is, want ik zet de trigger in de
Als ik wil kijken of de map geladen is met
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
jQuery(function(){
google.maps.event.addListener(map, 'tilesloaded', function() {
googleMapsLoaded = true;
alert('fg');
google.maps.event.clearListeners(map, 'tilesloaded');
});
});
google.maps.event.addListener(map, 'tilesloaded', function() {
googleMapsLoaded = true;
alert('fg');
google.maps.event.clearListeners(map, 'tilesloaded');
});
});
in de footer, dan krijg ik deze foutmelding:
Uncaught TypeError: Cannot read property '__e3_' of null
Hoe is dit dan te verhelpen?
Gewijzigd op 26/03/2017 08:13:19 door Daniel van Seggelen
Wat bedoel je precies binnen de load structuur? Bedoel je daar de document ready function in de <head></head> waar hij dus staat ?