Fehler "Uncaught ReferenceError: Google ist nicht definiert" mit Google Maps API

Ich versuche, eine Markierung auf der Karte anzupassen, aber ich bekomme immer "Google ist nicht definiert". Ich habe verschiedene Dinge ausprobiert, aber es funktioniert immer noch nicht. Ich habe einen API-Schlüssel verwendet und auch das Karten-Skript vor der Initialisierung der Karte eingefügt. Das ist mein html:Fehler "Uncaught ReferenceError: Google ist nicht definiert" mit Google Maps API

<html class="no-js" lang="en-US" > 
     <head> 
      <meta charset="UTF-8" /> 
      <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
      <title>Home &#8211; Algebra</title> 
    <link rel='dns-prefetch' href='//ajax.googleapis.com' /> 
    <link rel='dns-prefetch' href='//s.w.org' /> 
    <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js?ver=2.1.0'></script> 
    <link rel='https://api.w.org/' href='http://localhost/algebra/wp-json/' /> 
    <link rel="alternate" type="application/json+oembed" href="http://localhost/algebra/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%2Falgebra%2Fhome%2F" /> 
    <link rel="alternate" type="text/xml+oembed" href="http://localhost/algebra/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%2Falgebra%2Fhome%2F&#038;format=xml" /> 
     </head> 
     <body class="page page-id-4 page-template page-template-page-templates page-template-page-home page-template-page-templatespage-home-php logged-in offcanvas"> 



    <header id="masthead" class="site-header" role="banner"> 
     <div class="top-strip"></div> 
     <div class="top-nav"></div> 
    </header> 

    <section class="container"> 
<section class="map"> 
    <div id="map-container"></div> 
    <div class="contact-container"> 
    <div class="contact"> 
     <img src="" alt="mail-icon"> 
     <span>You can contact us at [email protected]</span> 
    </div> 
    </div> 
</section> 
     </section> 
     <div id="footer-container"> 
      <footer id="footer"> 
      </footer> 
     </div> 
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAKX-BAa2bSAiC89C38o8ir29Q7iOWdQ94&callback=initMap" 
    type="text/javascript"></script> 
<script type='text/javascript''> 
var myCenter = new google.maps.LatLng(29.714954,32.368546); 
    function initMap() { 
    var mapProp = { 
    center:myCenter, 
    zoom:13, 
    mapTypeId:google.maps.MapTypeId.ROADMAP 
    }; 
    var map=new google.maps.Map(document.getElementById("map-container"),mapProp); 
    var marker=new google.maps.Marker({ 
    position:myCenter, 
    title: "AZHA" 
    }); 
    marker.setMap(map); 
    var infowindow = new google.maps.InfoWindow({ 
    content:"AZHA" 
    }); 
    infowindow.open(map,marker); 
} 
// google.maps.event.addDomListener(window, 'load', initMap); 
</script> 
<script type='text/javascript' src='http://localhost/algebra/wp-includes/js/wp-embed.min.js?ver=4.6.1'></script> 
</body> 
</html>

ich etwas Hilfe schätzen würde, danke.

Quelle

2016-11-03 Mahmoud Wagdi Al-Awadi

Wenn Sie das API asynchron geladen werden (mit async, defer, &callback=initMap), benötigen Sie alle Code zu setzen, die innerhalb der Callback-Funktion (oder zumindest irgendwo auf der API abhängt, in dem es nicht, bis die ausgeführt wird API hat geladen). Ihre myCenter Variable ist jetzt außerhalb der Callback-Funktion definiert.

Wechsel:

<script type='text/javascript''> 
var myCenter = new google.maps.LatLng(29.714954,32.368546); 
function initMap() {

An:

<script type='text/javascript''> 
function initMap() { 
    var myCenter = new google.maps.LatLng(29.714954,32.368546);

proof of concept fiddle

Code-Schnipsel:

html, 
 
body, 
 
#map-container, 
 
.map, 
 
.container { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<header id="masthead" class="site-header" role="banner"> 
 
    <div class="top-strip"></div> 
 
    <div class="top-nav"></div> 
 
</header> 
 

 
<section class="container"> 
 
    <section class="map"> 
 
    <div id="map-container"></div> 
 
    <div class="contact-container"> 
 
     <div class="contact"> 
 
     <img src="" alt="mail-icon"> 
 
     <span>You can contact us at [email protected]</span> 
 
     </div> 
 
    </div> 
 
    </section> 
 
</section> 
 
<div id="footer-container"> 
 
    <footer id="footer"> 
 
    </footer> 
 
</div> 
 
<script type='text/javascript'> 
 
    function initMap() { 
 
     var myCenter = new google.maps.LatLng(29.714954, 32.368546); 
 
     var mapProp = { 
 
     center: myCenter, 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
     }; 
 
     var map = new google.maps.Map(document.getElementById("map-container"), mapProp); 
 
     var marker = new google.maps.Marker({ 
 
     position: myCenter, 
 
     title: "AZHA" 
 
     }); 
 
     marker.setMap(map); 
 
     var infowindow = new google.maps.InfoWindow({ 
 
     content: "AZHA" 
 
     }); 
 
     infowindow.open(map, marker); 
 
    } 
 
    // google.maps.event.addDomListener(window, 'load', initMap); 
 
</script> 
 
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap" type="text/javascript"></script>

Quelle

2016-11-03 14:25:20 geocodezip

Vielen Dank! :) –

Fehler "Uncaught ReferenceError: Google ist nicht definiert" mit Google Maps API

Antwort

Verwandte Themen