Google maps API не работает с AJAX на Битриксе

Google maps API не работает с AJAX на Битриксе

18.03.2017 08:00:39 Просмотров 65 Источник

Я пытаюсь использовать Google API, и все было хорошо, за исключением того, когда я пытался использовать его с AJAX. Итак, позвольте мне объяснить мою проблему. Я использую CMS Bitrix, и у меня есть задача использовать Google maps, и, конечно же, они должны быть загружены с помощью AJAX. Поэтому, когда пользователь входит на мой сайт и нажимает кнопку, чтобы показать карты, все в порядке. Но когда он заходит на вторую страницу предложений (которая загружается с AJAX), Карты Google ничего не показывают. И я не могу понять, почему? Вот мои скрипты с PHP кодом. Надеюсь, вы мне поможете =)

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);
};



$(document).ready(function() {
    //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);
    });
});

В моем мозговом блоке я просто включаю это:

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCXFNLY_Nozy_x9nRw4QRBPMNzHY2Pzepc&sensor=false"></script>

А вот мой PHP код на CMS Битрикс

<?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>
У вопроса есть решение - Посмотреть?

Ответы - Google maps API не работает с AJAX на Битриксе / Google maps API not working with AJAX on Bitrix

Закрыть X