• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Unexpected token fehler

S

simon321

New member
Hallo zusammen.
Ich habe folgende Probleme.
Ich benutze google chrome und im Entwickler tool habe ich gesehen, dass ich zwei Fehlermeldungen habe.

einmal:Uncaught SyntaxError: Unexpected token <

und :Uncaught TypeError: window.initMap is not a function

Ich will eine google maps api in meine wordpress Seite einbetten.
Aber leider funktioniert es nicht.
Woran kann es liegen?
Danke im voraus.


Gruss Simon
 
die beiden Fehler sind eigentlich sehr sprechend. wie sehen denn die beiden code zeilen dazu aus?
 
Hi .
Danke für die schnelle Antwort.
Ich bin leider kein Programmierer.
Ich bin so naiv und habe gedacht das ich denn code von google einfach kopieren und in meine wordpress Seite einfügen kann.

Hier der code:

HTML: 
<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"style="height:100%"></div>
    <script>

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap"
        async defer></script>
  </body>
</html>

Danke schon mal im voraus.
 
Zuletzt bearbeitet von einem Moderator:
  • Ganz unten hat es den Link zur Google Maps API zerschossen
  • Das laden der API muss VOR deren Nutzung erfolgen, nicht danach
  • Die Deklaration der Variable map sollte nicht global erfolgen, darauf sollte man immer verzichten
  • Die function initMap() muss nicht nur definiert sondern auch aufgerufen werden
  • Bitte nutze zukünftig Code Tags wenn du Code postest

Versuch mal das hier:

HTML: 
<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map" style="height:100%"></div>
    <script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
    <script>

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}
initMap();

    </script>
  </body>
</html>

Wenn das Ganze allerdings in eine WP Seite kommt, brauchst du nicht das ganze HTML Gerüst drum herum sondern nur das hier:
Code: 
    <style type="text/css" scoped>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
    <div id="map" style="height:100%"></div>
    <script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
    <script>

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}
initMap();

    </script>
Und in WP vorsicht mit dem CSS, dass du nicht damit quer schießt, denn das Attribut scoped schützt davor nicht.
 
@mikdoe: durch den callback-Parameter kann man die Funktion aufrufen lassen, wenn die API geladen ist. Deswegen muss die Funktion auch vorher definiert sein.

@simon: wenn ich in das JS noch einen valide API-Key einfüge, funktioniert bei mir dein Code wunderbar...
 
kkapsner schrieb:
@mikdoe: durch den callback-Parameter kann man die Funktion aufrufen lassen, wenn die API geladen ist. Deswegen muss die Funktion auch vorher definiert sein.
Zum Vergrößern anklicken....
Achso, dann ruft die API die Funktion auf. OK, wusste ich nicht. Aber das ist ja dann eh schon fortgeschritten und damit m.E. ohnehin noch nicht Level des Fragestellers.
 
Schon - aber ich kann einfach das Problem nicht reproduzieren...

@simon: zeig' doch den wirklichen Code.
 
Hi kkapsner.
Vielen dank für die Antwort.
Ich bin am verzweifeln.
Ich versuche es schon seit zwei Wochen die google map api in meine wordpress Seite einzufügen.
Trots meinem api keys von google will es einfach nicht funktionieren.
Ich bin schon dabei es auf fiverr von einem Programmierer machen zu lassen.
Welchen wirklichen code meinst du?
Meinst du denn google code mit meinem api code?
Schon mal danke im voraus.
Gruß Simon
 
Hast du aus #4 den unteren Code eingefügt? Was passiert dann? Gib uns mal einen Link zu der Seite, wo du das eingefügt hast. Kannste mir oder kkapsner auch per PN schicken.
 
Hi mikdoe.
Vielen dank für die Antwort.
Ja. Ich habe denn code eingefügt. Leider passiert nichts. es zeigt nichts auf. karte | #mykaffee hier ein link. Ich habe aber meine api code von google nicht eingefügt, weil ich nicht weis wo.

vielen dank im voraus.
Gruß Simon

- - - Aktualisiert - - -

Hi.

Hier ein link zu meiner seite mykaffee.net/karte

Gruß Simon
 
HTML: 
<p>    <script src="https://maps.googleapis.com/maps/api/js?v=3"></script><br />
    <script></p>
<p>function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}
initMap();</p>
<p>    </script></p>
du musst im wp editor auf code umschalten damit wp keine p's benutzt.
 
Vielen dank für eure Geduld.
Ich bin leider kein erfahrener Programmierer.
An der stelle noch mal vielen dank für eure Geduld.
Ich habe mal ein ausschnitt von meiner wordpress Seite gemacht.
Leider funktioniert es immer noch nicht.
Habe ich etwas bei der Einstellung falsch gemacht?
Habe auch denn Fehler Code angegeben.

Danke im voraus.
Gruß Simon
 

Anhänge

  • Javascript.png
    Javascript.png
    60,6 KB · Aufrufe: 3
  • Fehler.png
    Fehler.png
    40,6 KB · Aufrufe: 3
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben