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>
HTML 
CSS 
JavaScript 