CODEWITHSUNDEEP
javascripthtmlgoogle-maps
Mahmoud Wagdi Al-Awadi
Mahmoud Wagdi Al-Awadi

Reputation: 178

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

I'd appreciate some help, thanks.

Upvotes: 3

Views: 12625

Answers (1)

geocodezip
geocodezip

Reputation: 161404

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

Upvotes: 7

Related Questions