-
Karte wird nicht geladen
Hallo zusammen,
ich habe die Betreuung einer Website übernommen und nachdem Google nun (ggf. kostenpflichtig) einen API-Key für die Einbindung von Maps erzwingt, habe ich dem Kunden vorgeschlagen doch OSM zu nehmen. Soweit so gut.
Ich schaffe es aber nicht, dass die Karte auf der Seite geladen wird. Das DIV bleibt einfach leer.
Firefox meldet in der Konsole folgendes:
Code:
Source-Map-Fehler: Error: request failed with status 404
Ressourcen-Adresse: https://www.rechtsanwaelte-buergel.de/assets/js/leaflet-src.…let-providers.min.js,leaflet-omnivore.min.js,...-f285ad87.js
Source-Map-Adresse: leaflet-src.js.map
Klicke ich die URL in der Konsole ab, kommt Javascript zurück. Aber irgendwie scheint sie beim Aufruf der Seite nicht zu funktionieren.
Die Seite hat eine Contao-Argentur erstellt. Dabei haben die zu Fuß Bootstrap eingebaut und so gut wie jedes Contao Template umgedreht. Ich vermute, dass dabei irgendwas verloren gegangen ist, was die Erweiterung jetzt eigentlich bräuchte. Auch die alte Google-Map war nicht über eine Erweiterung eingebunden, sondern zu Fuß.
Bin für jeden Tipp dankbar.
Ein frohes neues Jahr,
Neelix
-
Hallo zusammen,
so, jetzt bin ich schon mal einen Schritt weiter.
Ich habe die fe_page.html5 wieder so zurecht gerückt, dass Erweiterungen wieder StyleSheets und Javascript einbinden können. Damit ist die Fehlermeldung in der Konsole jetzt weg. Die Karte erscheint aber trotzdem nicht.
Was fehlt da noch, damit die Erweiterung funktioniert? Und wie bekomme ich das raus?
Danke & Gruß
Neelix
-
Im Quellcode deiner Seite wird nicht das Javascript der Erweiterung ausgegeben (es werden sehr wohl die Bibliotheken geladen, aber nicht die Initialisierung der Karte). Die Initialisierung der Karte wird standardmäßig im Body ausgegeben, siehe: https://github.com/netzmacht/contao-..._map.html5#L12
Bringe deine Installation in Ordnung, dann sollte es funktionieren (soweit alles korrekt konfiguriert wurde).
-
Das versuche ich ja. Die Agentur hat aber keinen Stein auf dem anderen gelassen.
So sieht die fe_page.html5 aktuell aus:
Code:
<!DOCTYPE html>
<html lang="<?= $this->language ?>"<?php if ($this->isRTL): ?> dir="rtl"<?php endif; ?>>
<head>
<?php $this->block('head'); ?>
<meta charset="<?= $this->charset ?>">
<title><?= $this->title ?></title>
<base href="<?= $this->base ?>">
<?= $this->viewport ?>
<?= $this->framework ?>
<?php $this->endblock(); ?>
<?php $this->block('meta'); ?>
<meta name="robots" content="<?= $this->robots ?>">
<meta name="description" content="<?= $this->description ?>">
<meta name="generator" content="Contao Open Source CMS">
<?php $this->endblock(); ?>
<link rel="icon" href="files/buergel/images/favicon.ico" typ="image/ico" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<?= $this->stylesheets ?>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<?php echo $this->head; ?>
</head>
<body id="top"<?php if ($this->class): ?> class="<?= $this->class ?>"<?php endif; ?><?php if ($this->onload): ?> onload="<?= $this->onload ?>"<?php endif; ?> itemscope itemtype="http://schema.org/WebPage">
<div class="container" id="wrapper">
<div id="logo">
<a href="<?php echo $this->base; ?>">
<img src="files/buergel/img/logo.png" alt="" width="356" height="108">
</a>
</div>
<div id="nav">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<?php echo $this->sections['mainnav']; ?>
</div>
</div>
</nav>
</div>
<div id="headerimage">
<?php echo $this->sections['headerimage']; ?>
</div>
<div class="row" id="content">
<div id="breadcrumbs">
<?php echo $this->sections['breadcrumbs']; ?>
</div>
<div class="phone">
<?php echo $this->sections['phone']; ?>
</div>
<div class="col-md-9" id="left">
<?php echo $this->main; ?>
</div>
<div class="col-md-3" id="right">
<?php echo $this->right; ?>
</div>
</div>
<div id="footer">
<?php echo $this->footer; ?>
<div class="footer-nav">
<?php echo $this->sections['footernav']; ?>
</div>
<div class="social-media">
<?php echo $this->sections['socialmedia']; ?>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="files/buergel/components/slick/slick.min.js"></script>
<script>
$(document).ready(function(){
$('.slickSlider').slick({
dots: true,
arrows: false,
infinite: true,
autoplay: true,
autoplaySpeed: 5000,
speed: 800,
fade: true,
cssEase: 'linear'
});
});
</script>
</body>
</html>
Einen Teil habe ich durch vergleichen der default-fe_page rekonstruieren können ohne die Seite zu zerschießen. Aber was fehlt mir da jetzt noch, damit die Karte geladen wird?
-
Ah, ich hab's. Das JavaScript kommt über
Code:
<?= $this->mootools ?>
