trigger('click') google maps api fullscreen error

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Daniel van Seggelen

Daniel van Seggelen

25/03/2017 20:26:39
Quote Anchor link
Het probleem is als volgt.

Ik heb een functie dat de google maps op 100% zet en zoom + resize functies uitvoert.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
$(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 }  //?>
    
}
});


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)
PHP script in nieuw venster Selecteer het PHP script
1
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)


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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
            setTimeout(function() {
                  
                    
                $('#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)
PHP script in nieuw venster Selecteer het PHP script
1
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');
});
    
});


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
 
PHP hulp

PHP hulp

29/03/2024 06:41:37
 
Ben van Velzen

Ben van Velzen

26/03/2017 03:03:17
Quote Anchor link
Staat de code die je noemt wel netjes binnen de load structuur? Zoals je het nu neerzet is dat namelijk niet het geval. Zou je je code zoals je deze hebt eens kunnen posten? Uiteraard dit keer wel netjes binnen code tags zodat het leesbaar is?
 
Daniel van Seggelen

Daniel van Seggelen

26/03/2017 08:15:19
Quote Anchor link
Ik heb alle code zowel in php in 1 file gedaan. <PHP >< maar achter slashes want anders toont hij ze hier niet in 1 codevlak.

Wat bedoel je precies binnen de load structuur? Bedoel je daar de document ready function in de <head></head> waar hij dus staat ?
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.