javascript - Getting "Uncaught ReferenceError: google is not defined" error using Google Maps API

I'm trying to customize a marker on the map but I keep getting 'google is not defined'. I've tried different things but it's still not working. I have used an API key and also included the maps script before initializing the map. This is my html:

 <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' />
    <link rel='dns-prefetch' href='//s.w' />
    <script type='text/javascript' src='//ajax.googleapis/ajax/libs/jquery/2.1.0/jquery.min.js?ver=2.1.0'></script>
    <link rel='/' 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=";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>

I'd appreciate some help, thanks.

 <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.' />
    <link rel='dns-prefetch' href='//s.w' />
    <script type='text/javascript' src='//ajax.googleapis./ajax/libs/jquery/2.1.0/jquery.min.js?ver=2.1.0'></script>
    <link rel='https://api.w/' 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./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>

I'd appreciate some help, thanks.

Share Improve this question asked Nov 3, 2016 at 13:50 Mahmoud Wagdi Al-Awadi 1781 gold badge3 silver badges14 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 7

If you are loading the API asynchronously (with async, defer, &callback=initMap), you need to put all code that depends on the API inside the callback function (or at least somewhere where it won't execute until the API has loaded). Right now your myCenter variable is defined outside the callback function.

Change:

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

To:

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

proof of concept fiddle

code snippet:

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./maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk" type="text/javascript"></script>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Getting "Uncaught ReferenceError: google is not defined" error using Google Maps API - Stack Over

1 Answer 1

与本文相关的文章

评论列表(0)