Google Maps / Kłopot z wyświetlaniem kontrolek

0

Witam,
Piszę od pewnego czasu portal internetowy. Napotkałem dość nietypowy problem, a mianowicie:
W dialogu, który jest ładowany przez AJAX znajduje się mapa googla ( wymiary 400x500 ). Mapa wyświetla się prawidłowo, można przemieszczać widok, przybliżać, oddalać, dodawać znaczniki ( dzięki odpowiedniej funkcji ). Nagłówek do API Google Maps v3 jest ładowany statycznie w linkowanym do każdej strony headerze. Funkcja odpowiadająca za inicjalizację mapy znajduje się w pliku ładowanym przez AJAX na innej stronie. Wszystko wyświetla się prawidłowo, mapa, formularz. Problem polega w tym że czasami kontrolki mapy( zoom, pan, i te podpisy pod mapą) są, a czasami ich nie ma. Przeprowadziłem wiele testów, w których zmieniałem najróżniejsze ustawienia. Począwszy od położęnia <script scr=""> do API Google Maps, po zmianę najróżniejszych ustawień w funkcji inicjalizującej. Na Stackoverflow tego typu błąd nie występuje, jedyne co znalazłem to złe wyświetlanie grafiki zoomControl.
Nie mam pojęcia o co chodzi. Jeśli ktoś ma jakiekolwiek pomysły to proszę o udzielenie mi wskazówki, bądź odpowiedzi. Krok ten bowiem jest niezbędny do kontynuowania prac nad projektem.

Kod źródłowy:

Plik ładowany przez AJAX:

 <script type='text/javascript'> 
 
function mapaStart()   
{   
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
		zoomControl: true,
  zoomControlOptions: {
    style: google.maps.ZoomControlStyle.SMALL
  }
        };
        var map = new google.maps.Map(document.getElementById("mapka"),
            mapOptions);
}   
</script>  

<script>
$(document).ready(function(e) {
    mapaStart();
});
</script>

<div class="dialog_base_notification"></div>
<div class="dialog_base" id="modal_base">
  <div class="info_section_header_darker"> Szczegóły wymiany </div>
  <div style="overflow:hidden; padding:10px;">
    <form action="#" method="post" #id="new_mail">
      <input name="to" id="to" type="text" style="width:calc(100% - 6px); margin-bottom:10px; padding-top:3px; padding-bottom:3px; text-indent:3px;" placeholder="Kiedy :"/>
      <br />
      <input name="title" id="title" type="text" style="width:calc(100% - 6px); margin-bottom:10px; padding-top:3px; padding-bottom:3px; text-indent:3px;" placeholder="Miejsce:"/>
      <br />
      
      <div id="mapka" style="width:410px; height: 400px; background: gray;">
      </div>
      
      <textarea name="message" id="message" cols="" rows="3" style="width:calc(100% - 8px); margin-bottom:10px; font-family:inherit !important; padding-top:3px; padding-bottom:3px; text-indent:3px;"  placeholder="Uwagi dodatkowe..."></textarea>
      <br />
      <div class="button" id="submit_mail" style="float:right;" title="Kliknij by wysłać!">Wyślij</div>
    </form>
  </div>
</div>

Kod w którym jest wywoływana funkcja AJAX i linkowane jest API:

 <?php
setlocale(LC_ALL, 'pl_PL', 'pl', 'Polish_Poland.28592');
?>


<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://viralpatel.net/blogs/demo/jquery/jquery.shorten.1.0.js"></script>
<script type="text/javascript" src="/thext/resources/jRating.jquery.js"></script>
<script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAoetYYr6riSz5uemOPPhthFTLzJJlFfZg&sensor=false">
</script>  **Tutaj jest linkowane API**

<link href="/thext/css/gui.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="/thext/css/jRating.jquery.css" media="screen" />
<link href="/thext/css/header_style.css" rel="stylesheet" type="text/css" />


<script>
    (function (jQuery) {
        jQuery.fn.clickoutside = function (callback) {
            var outside = 1,
                self = $(this);
            self.cb = callback;
            this.click(function () {
                outside = 0;
            });
            $(document).click(function () {
                outside && self.cb();
                outside = 1;
            });
            return $(this);
        }
    })(jQuery);
</script>
<script type="text/javascript">
    $(document).ready(function (e) {

        function show_bar() {
            $("#setting_header").fadeIn(150);
            $('#setting_button').html('<img src="/thext/images/elements/arrow_up.png" width="17" height="17"/>');
            $("#setting_button").css("display", "block");
            is_open = true;
        }

        function hide_bar() {
            $("#setting_header").fadeOut(150);
            $('#setting_button').html('<img src="/thext/images/elements/arrow_down.png" width="17" height="17"/>');
            $("#setting_button").css("display", "block");
            is_open = false;
        }


        var isMobile = false;
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Opera Mobile|Kindle|Windows Phone|PSP|AvantGo|Atomic Web Browser|Blazer|Chrome Mobile|Dolphin|Dolfin|Doris|GO Browser|Jasmine|MicroB|Mobile Firefox|Mobile Safari|Mobile Silk|Motorola Internet Browser|NetFront|NineSky|Nokia Web Browser|Obigo|Openwave Mobile Browser|Palm Pre web browser|Polaris|PS Vita browser|Puffin|QQbrowser|SEMC Browser|Skyfire|Tear|TeaShark|UC Browser|uZard Web|wOSBrowser|Yandex.Browser mobile/i.test(navigator.userAgent)) isMobile = true;

        if (isMobile) {
            scroll_edge = 0;
            $("#logo").html("Thext mobile");
        }

        var scroll_edge = 50;
        var is_open = false;
        var block = false;
        var click_open = false;

        $("#right_column").css("height", "+=10");

        $.get('mail.php', {
            action: "c"
        }, function (data) {
            if (data != "0") {
                $("#mail").fadeIn(150);
            } else {
                $("#mail").css("display", "none");
            }
        }, 'text');

        if (window.scrollY > scroll_edge) { /*Sprawdzanie czy w momencie otwarcia strony scroll > 50 czy nie [JEDNOKROTNE SPRAWDZENIE]*/
            hide_bar();
            $("#status_bar").css("margin-top", 30);
        } else if (window.scrollY < scroll_edge) {
            show_bar();
            $("#setting_button").css("display", "none");
            $(".con").css("margin-top", 80);
        }

        $(window).scroll(function () { /*Obsługa zdarzenia scroll*/
            if (window.scrollY > scroll_edge) { /*Jeżeli scroll jest większy od 50, domyśle ZAMKNIĘCIE*/
                if (click_open) {
                    show_bar();
                } else {
                    hide_bar();
                    $('#setting_button').html('<img src="/thext/images/elements/arrow_down.png" width="17" height="17"/>');
                }
            } else {
                show_bar();
                $("#setting_button").css("display", "none");
                click_open = false;
            }
        });



        $("#setting_button").click(function () { /*Obsługa kliknięcia w przycisk wysunięcia menu*/
            if (window.scrollY > scroll_edge) {
                if (is_open == false) {
                    show_bar();
                    click_open = true;
                } else if (is_open == true) {
                    hide_bar();
                    click_open = false;
                }
            } else {

            }
        }); /*Scroll i obsługa wyświetlania paska */

        var open_i = false;
        var open_m = false;
        var open_s = false;

        /* ----------------------------------------------------------------------------------------- */

        $("#interaction").click(function () {
            if (open_i == false) {
                if (open_m) {
                    $("#mail_box").hide();
                    open_m = false;
                }
                if (open_s) {
                    $("#suggest_box").hide();
                    open_s = false;
					$("#search").val("");
                }
                $("#interaction_box").show();
                open_i = true;
				$.get('interactions.php',{action:"da"},function(data){
                              $("#interaction_box").html(data);
                         },'text');
            } else {
                $("#interaction_box").hide();
				open_i=false;
            }
        });

        var pi = 0;
        var w = function () {
            if (open_i) {
                if (pi > 0) {
                    open_i == false
                    $("#interaction_box").hide()
                    pi = 0;
                } else {
                    pi++;
                }
            } else {
                pi = 0;
            }
        };
        $('#interaction_box').clickoutside(w);

        /* ----------------------------------------------------------------------------------------- */

        $("#mail").click(function () {
            if (open_m == false) {
                if (open_i) {
                    $("#interaction_box").hide();
                    open_i = false;
                }
                if (open_s) {
                    $("#suggest_box").hide();
					$("#search").val("");
                    open_s = false;
                }
                $("#mail_box").show();
				 $.get('mail.php',{action:"da"},function(data){
                              $("#mail_box").html(data);
                         },'text');
                open_m = true;
            } else {
                $("#mail_box").hide();
				open_m = false;
            }
        });
		
		var pm = 0;
        var w = function () {
            if (open_m) {
                if (pm > 0) {
                    open_m == false
                    $("#mail_box").hide()
                    pm = 0;
                } else {
                    pm++;
                }
            } else {
                pm = 0;
            }
        };
        $('#mail_box').clickoutside(w);

        /* ----------------------------------------------------------------------------------------- */

        if ($("#search").val() == '') {
            $('#suggest_box').hide();
        }
        $("#search").on('keyup', function () {
            if (this.value != '') {
                open_s = true;
				
				if (open_i) {
                    $("#interaction_box").hide();
                    open_i = false;
                }
                if (open_m) {
                    $("#mail_box").hide();
                    open_m = false;
                }
				
                $("#suggest_box").show();
                var input_source = $("#search").val();
                $.post('asearch.php', {
                    source: input_source
                }, function (data) {
                    $("#suggest_box").html(data);
                }, 'text');
            } else if (!open_s) {} else {
                $("#suggest_box").hide();
				$("#search").val("");
                open_s = false;
            }
        });
		
		var ps = 0;
        var w = function () {
            if (open_s) {
                if (ps > 0) {
                    open_s == false
                    $("#suggest_box").hide()
                    ps = 0;
                } else {
                    ps++;
                }
            } else {
                ps = 0;
            }
        };
        $('#suggest_box').clickoutside(w);

        /* ----------------------------------------------------------------------------------------- */
		
		

    });
</script>
<script>
    function settings_button_click_event() {
        document.getElementById('welcomeDiv').style.display = "block";
    }

    function submit() {
        document.forms["search_form"].submit();
    }

    $('#search_form').keydown(function (e) {
        if (e.keyCode == 13) {
            $('#form').submit();
        }
    });
</script>
0

A po co wklejasz kod niezwiązany z tematem? Jakies wyszukiwanie, maile, scrollowanie?
Tobie się nie chciało to i mnie się nie chce w to zaglądać - upewnij się tylko, że nie inicjalizujesz mapy, kiedy ona jest ukryta (bądź jej kontener itd).

Aha, i używaj tagów <code class="javascript"></code> itd.

1 użytkowników online, w tym zalogowanych: 0, gości: 1