Google Maps APIを使用して「Uncaught ReferenceError：googleが定義されていません」というエラーが表示される

マップ上のマーカーをカスタマイズしようとしていますが、「googleは定義されていません。私は別のものを試しましたが、それでも動作していません。 APIキーを使用し、マップを初期化する前にmapsスクリプトも含めました。これは私のhtmlです：Google Maps APIを使用して「Uncaught ReferenceError：googleが定義されていません」というエラーが表示される

<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>

私はいくつかの助け、おかげでいただければと思います。

出典

2016-11-03 Mahmoud Wagdi Al-Awadi

あなたは（async、defer、&callback=initMapで）非同期APIをロードしている場合は、コールバック関数（またはそれがされるまで実行されません、少なくともどこかの内部でAPIに依存すべてコードを配置する必要がありますAPIがロードされました）。今すぐあなたのmyCenter変数は、コールバック関数の外で定義されています。

変更：

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

へ：

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

proof of concept fiddle

コードスニペット：

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>

出典

2016-11-03 14:25:20 geocodezip

ありがとうございます！ :) –

Google Maps APIを使用して「Uncaught ReferenceError：googleが定義されていません」というエラーが表示される

答えて

関連する問題