Php Google maps API在Bitrix上不使用AJAX_Php_Jquery_Ajax_Google Maps_Bitrix

Php Google maps API在Bitrix上不使用AJAX

php jquery ajax google-maps

Php Google maps API在Bitrix上不使用AJAX,php,jquery,ajax,google-maps,bitrix,Php,Jquery,Ajax,Google Maps,Bitrix,我正在尝试使用GoogleAPI，一切都很好，除了我尝试使用AJAX时。所以，让我解释一下我的烦恼。我使用的是CMS Bitrix，我的任务是使用谷歌地图，当然，它们必须通过AJAX下载。所以当用户进入我的网站并点击按钮显示地图时，一切都正常。但是当他进入第二页时（用AJAX下载），谷歌地图什么也没有显示。我不明白为什么？下面是我的PHP代码脚本。我希望你能帮助我 var映射，信息窗口； //将标记添加到地图，并提供其他信息功能添加标记（myLatlng、街道、侧面）{ var marker=

我正在尝试使用GoogleAPI，一切都很好，除了我尝试使用AJAX时。所以，让我解释一下我的烦恼。我使用的是CMS Bitrix，我的任务是使用谷歌地图，当然，它们必须通过AJAX下载。所以当用户进入我的网站并点击按钮显示地图时，一切都正常。但是当他进入第二页时（用AJAX下载），谷歌地图什么也没有显示。我不明白为什么？下面是我的PHP代码脚本。我希望你能帮助我

var映射，信息窗口；
//将标记添加到地图，并提供其他信息
功能添加标记（myLatlng、街道、侧面）{
var marker=new google.maps.marker({
职位：myLatlng，
地图：地图
});
google.maps.event.addListener（标记“单击”，函数（）{
var contentString=“”+街道+“”+侧面+“”；
setContent（contentString）；
信息窗口。打开（地图、标记）；
});
};
//地图的初始化
函数initMap（结果）{
var arr=result[0]['coord'].split（'，'）；
var mylatng=new google.maps.LatLng（arr[0]，arr[1]）；
变量映射选项={
中心：myLatlng，
缩放：18，
};
map=new google.maps.map（document.getElementById（'map'），mapOptions）；
infoWindow=new google.maps.infoWindow（）；
//触按地图可关闭信息
google.maps.event.addListener（映射，“单击”，函数（）{
infoWindow.close（）；
});
//如果我们只想看到地图上的一个标记
如果（result.length==1）{
arr=结果[0]['coord'].split（'，'）；
myLatlng=new google.maps.LatLng（arr[0]，arr[1]）；
addMarker（myLatlng，结果[0]['street'，结果[0]['side']）；
}否则{
//地图上有许多标记
var markersBounds=new google.maps.LatLngBounds（）；
对于（变量i=0；i


在我的头脑中，我只是包括以下内容：
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCXFNLY_Nozy_x9nRw4QRBPMNzHY2Pzepc&sensor=false"></script>



这是我在CMS Bitrix上的PHP代码
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
/** @var array $arParams */
/** @var array $arResult */
/** @global CMain $APPLICATION */
/** @global CUser $USER */
/** @global CDatabase $DB */
/** @var CBitrixComponentTemplate $this */
/** @var string $templateName */
/** @var string $templateFile */
/** @var string $templateFolder */
/** @var string $componentPath */
/** @var CBitrixComponent $component */

$this->setFrameMode(true);
?>
<a href="/citylights.xlsx">Download all citylights in .xlsx</a><br>
<a href="javascript:" class="allMarkers" data-fancybox data-src="#map">All citylights on a map</a>
<div class="clb"></div>
<?if($arParams["DISPLAY_TOP_PAGER"]):?>
    <?=$arResult["NAV_STRING"]?><br />
<?endif;?>
<?foreach($arResult["ITEMS"] as $arItem):?>
    <?
    $this->AddEditAction($arItem['ID'], $arItem['EDIT_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_EDIT"));
    $this->AddDeleteAction($arItem['ID'], $arItem['DELETE_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_DELETE"), array("CONFIRM" => GetMessage('CT_BNL_ELEMENT_DELETE_CONFIRM')));
    ?>
    <div class="citylight" id="<?=$this->GetEditAreaId($arItem['ID']);?>">
        <?if($street = $arItem["DISPLAY_PROPERTIES"]["ATT_STREET"]):?>
            <?if(!$arParams["HIDE_LINK_WHEN_NO_DETAIL"] || ($arItem["DETAIL_TEXT"] && $arResult["USER_HAVE_ACCESS"])):?>
                <a href="<?echo $arItem["DETAIL_PAGE_URL"]?>"><b><?=$street["VALUE"]?></b></a><br />
            <?endif;?>
        <?endif;?>

        <?if($side = $arItem["DISPLAY_PROPERTIES"]["ATT_SIDE"]):?>
            <span id="side"><?=$side["VALUE"]?></span><br>
        <?endif?>
        <?if($city = $arItem["DISPLAY_PROPERTIES"]["ATT_CITY"]):?>
            <i id="city"><?=$city["VALUE"]?></i><br><br>
        <?endif?>

        <a href="javascript:" class="maphref" data-fancybox data-src="#map" data-side="<?=$arItem["DISPLAY_PROPERTIES"]["ATT_SIDE"]["VALUE"]?>" data-street="<?=$arItem["DISPLAY_PROPERTIES"]["ATT_STREET"]["VALUE"]?>" id="<?=$arItem["DISPLAY_PROPERTIES"]["ATT_MAP"]["VALUE"]?>" name="<?=$arItem["NAME"]?>">Show n map</a><br><br>
        <?if($arParams["DISPLAY_PICTURE"]!="N" && is_array($arItem["PREVIEW_PICTURE"])):?>
            <?if(!$arParams["HIDE_LINK_WHEN_NO_DETAIL"] || ($arItem["DETAIL_TEXT"] && $arResult["USER_HAVE_ACCESS"])):?>
                <a href="<?=$arItem["DETAIL_PAGE_URL"]?>" title="<?=$arItem["PREVIEW_PICTURE"]["TITLE"]?>"><img id="preview"
                        src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>"
                        height="166"
                        width="200"
                        alt="<?=$arItem["PREVIEW_PICTURE"]["ALT"]?>"/></a>
            <?else:?>
                <img id="preview" src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>"  width="200" alt="<?=$arItem["PREVIEW_PICTURE"]["ALT"]?>"/>
            <?endif;?>
        <?endif?>
        <?if($arParams["DISPLAY_PICTURE"]!="N" && is_array($arItem["PREVIEW_PICTURE"])):?>
            <div style="clear:both"></div>
        <?endif?>
        <?if($date = $arItem["DISPLAY_PROPERTIES"]["ATT_DATE"]["DISPLAY_VALUE"]):?>
            <div class="reserved"><p class="if"><span class="busy"></span><?=$arItem["DISPLAY_PROPERTIES"]["ATT_STATUS"]["DISPLAY_VALUE"]?></p>
            <i class="to">до <?=$date?></i></div><br>
        <?else:?>
            <a href="javascript:" data-name="<?=$arItem["DISPLAY_PROPERTIES"]["ATT_STREET"]["VALUE"]?>" data-ref="<?=$arItem["DETAIL_PAGE_URL"]?>" class="buy" id="<?=$arItem['ID']?>" data-fancybox data-src="#hidden-form">Buy</a><br>
        <?endif?>
        <?if($adv = $arItem["DISPLAY_PROPERTIES"]["ATT_ADVANTAGE"]):?>
            <b><?=$adv["NAME"]?></b><br>
            <p class="advantage">
                <?foreach($adv["VALUE"] as $value):
                echo ($value.", ");
                endforeach?>
            </p>
        <?endif?>
    </div>
<?endforeach;?>
<div class="clb"></div>
<?if($arParams["DISPLAY_BOTTOM_PAGER"]):?>
    <br /><?=$arResult["NAV_STRING"]?>
<?endif;?>

<!-- Offers form -->
<form class="form-2" method="POST" action="" id="hidden-form">
    <div class="dop-info">
        <div class="dop-info-photo">
            <a href=""><img src="" width="100"></a>
        </div>
        <div class="dop-info-info">
            <h4></h4>
            <p></p>
        </div>
    </div>
    <span id="notice"></span><br>
    <input type="text" placeholder="Your name" name="name" id="name"><br>
    <input type="text" placeholder="Your e-mail" name="email" id="email"><br>
    <input type="text" placeholder="Your telephone" name="telephone" id="telephone"><br>
    <textarea placeholder="Your text" name="text" id="text"></textarea><br>
    <input type="button" value="Send" id="send">
    <input type="button" value="Close" class="close">
    <input type="hidden" name="city_id" value="<?=$arResult["ID"]?>" id="city_id">
    <input type="hidden" name="city_name" value="<?=$arResult["NAME"]?>" id="city_name">
    <input type="hidden" name="city_ref" value="<?=$arResult["DETAIL_PAGE_URL"]?>" id="city_ref">
</form>

<!-- Here would be our maps  -->
<div id="map"></div>






和往常一样，答案很简单。所以，问题出在我的脚本中，我需要添加$（document）.ajaxComplete（..）。现在，我的脚本如下所示：
var map, infoWindow;

//Add marker to the map, with additional info
function addMarker(myLatlng, street, side) {
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map
    });

    google.maps.event.addListener(marker, "click", function() {
            var contentString = "<h3>" + street + "</h3><i>" + side + "</i>";
            infoWindow.setContent(contentString);
            infoWindow.open(map, marker);
    });
};

//Initialization of the map
function initMap(result) {
    var arr = result[0]['coord'].split(',');
    var myLatlng = new google.maps.LatLng(arr[0], arr[1]);
    var mapOptions = {
        center: myLatlng,
        zoom: 18,
    };

    map = new google.maps.Map(document.getElementById('map'), mapOptions);
    infoWindow = new google.maps.InfoWindow();


    //touch the map to close the info
    google.maps.event.addListener(map, "click", function() {
            infoWindow.close();
    });

    //if we want just to see single marker on the map
    if(result.length == 1) {
        arr = result[0]['coord'].split(',');
        myLatlng = new google.maps.LatLng(arr[0], arr[1]);

        addMarker(myLatlng, result[0]['street'], result[0]['side']);
    } else {
        //Many markers on the map
        var markersBounds = new google.maps.LatLngBounds();

        for(var i = 0; i < result.length; i++) {
            arr = result[i]['coord'].split(',');
            myLatlng = new google.maps.LatLng(arr[0], arr[1]);

            //for centralizing map
            markersBounds.extend(myLatlng);
            addMarker(myLatlng, result[i]['street'], result[i]['side']);
        }
        //set center of the map
        map.setCenter(markersBounds.getCenter(), map.fitBounds(markersBounds));
    }

    setTimeout(function() {google.maps.event.trigger(map, "resize");}, 600);
};

function onLoadFunction() {
    //Removing additional effects of fancybox
    $(".maphref").fancybox({
        touch: false
    });

    $(".allMarkers").fancybox({
        touch: false
    });


    //all citylights on the map
    $(".allMarkers").bind("click", function() {
        $.ajax ({
            url: "/citylights/getAllCoord.php",
            type: "POST",
            success: function(data) {
                var result = JSON.parse(data);
                initMap(result);
            }
        });
    });

    //single citylight on the map
    $(".maphref").bind("click", function() {
        var data = {'street': $(this).attr("data-street"), 'side': $(this).attr("data-side"), 'coord': $(this).attr("id")};
        var result = [data];
        initMap(result);
    });
};


$(document).ajaxComplete(function() {
    onLoadFunction();
});

$(document).ready(function() {
    onLoadFunction();
});

var映射，信息窗口；
//将标记添加到地图，并提供其他信息
功能添加标记（myLatlng、街道、侧面）{
var marker=new google.maps.marker({
职位：myLatlng，
地图：地图
});
google.maps.event.addListener（标记“单击”，函数（）{
var contentString=“”+街道+“”+侧面+“”；
setContent（contentString）；
信息窗口。打开（地图、标记）；
});
};
//地图的初始化
函数initMap（结果）{
var arr=result[0]['coord'].split（'，'）；
var mylatng=new google.maps.LatLng（arr[0]，arr[1]）；
变量映射选项={
中心：myLatlng，
缩放：18，
};
map=new google.maps.map（document.getElementById（'map'），mapOptions）；
infoWindow=new google.maps.infoWindow（）；
//触按地图可关闭信息
google.maps.event.addListener（映射，“单击”，函数（）{
infoWindow.close（）；
});
//如果我们只想看到地图上的一个标记
如果（result.length==1）{
arr=结果[0]['coord'].split（'，'）；
myLatlng=new google.maps.LatLng（arr[0]，arr[1]）；
addMarker（myLatlng，结果[0]['street'，结果[0]['side']）；
}否则{
//地图上有许多标记
var markersBounds=new google.maps.LatLngBounds（）；
对于（变量i=0；ivar map, infoWindow;

//Add marker to the map, with additional info
function addMarker(myLatlng, street, side) {
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map
    });

    google.maps.event.addListener(marker, "click", function() {
            var contentString = "<h3>" + street + "</h3><i>" + side + "</i>";
            infoWindow.setContent(contentString);
            infoWindow.open(map, marker);
    });
};

//Initialization of the map
function initMap(result) {
    var arr = result[0]['coord'].split(',');
    var myLatlng = new google.maps.LatLng(arr[0], arr[1]);
    var mapOptions = {
        center: myLatlng,
        zoom: 18,
    };

    map = new google.maps.Map(document.getElementById('map'), mapOptions);
    infoWindow = new google.maps.InfoWindow();


    //touch the map to close the info
    google.maps.event.addListener(map, "click", function() {
            infoWindow.close();
    });

    //if we want just to see single marker on the map
    if(result.length == 1) {
        arr = result[0]['coord'].split(',');
        myLatlng = new google.maps.LatLng(arr[0], arr[1]);

        addMarker(myLatlng, result[0]['street'], result[0]['side']);
    } else {
        //Many markers on the map
        var markersBounds = new google.maps.LatLngBounds();

        for(var i = 0; i < result.length; i++) {
            arr = result[i]['coord'].split(',');
            myLatlng = new google.maps.LatLng(arr[0], arr[1]);

            //for centralizing map
            markersBounds.extend(myLatlng);
            addMarker(myLatlng, result[i]['street'], result[i]['side']);
        }
        //set center of the map
        map.setCenter(markersBounds.getCenter(), map.fitBounds(markersBounds));
    }

    setTimeout(function() {google.maps.event.trigger(map, "resize");}, 600);
};

function onLoadFunction() {
    //Removing additional effects of fancybox
    $(".maphref").fancybox({
        touch: false
    });

    $(".allMarkers").fancybox({
        touch: false
    });


    //all citylights on the map
    $(".allMarkers").bind("click", function() {
        $.ajax ({
            url: "/citylights/getAllCoord.php",
            type: "POST",
            success: function(data) {
                var result = JSON.parse(data);
                initMap(result);
            }
        });
    });

    //single citylight on the map
    $(".maphref").bind("click", function() {
        var data = {'street': $(this).attr("data-street"), 'side': $(this).attr("data-side"), 'coord': $(this).attr("id")};
        var result = [data];
        initMap(result);
    });
};


$(document).ajaxComplete(function() {
    onLoadFunction();
});

$(document).ready(function() {
    onLoadFunction();
});