2
J'essaie d'utiliser Google API et tout allait bien sauf quand j'ai essayé de l'utiliser avec AJAX. Alors, laissez-moi vous expliquer mes problèmes. J'utilise CMS Bitrix, et j'ai une tâche d'utiliser Google Maps et bien sûr, ils doivent être téléchargés avec AJAX. Ainsi, lorsque l'utilisateur entre sur mon site et clique sur le bouton pour afficher les cartes, tout va bien. Mais quand il entre dans la deuxième page d'offres (qui est téléchargé avec AJAX), Google Maps ne montre rien. Et je ne peux pas comprendre pourquoi? Voici mes scripts avec du code PHP. J'espère que vous me aider =)Google Maps API ne fonctionne pas avec AJAX sur Bitrix
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);
});
});
Dans mon bloc de tête, je suis juste compris ceci:
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCXFNLY_Nozy_x9nRw4QRBPMNzHY2Pzepc&sensor=false"></script>
Et voici mon code PHP CMS Bitrix
<?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>