CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
yitzih
yitzih

Reputation: 3118

Google map from API not showing

For some reason the google maps isn't showing when I run my file in the browser It just gives a blank space. This is my code:

$(document).ready(function() {

  //google map 
  var map, geocoder;

  function initializeMap() {
    google.maps.event.addDomListener(window, 'load', function() {
      codeAddress('33 W 23rd St, New York, NY');
    });
  }

  function codeAddress(address) {
    geocoder = new google.maps.Geocoder();
    geocoder.geocode({
        'address': address
      }, function(results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
          var mapOptions = {
            zoom: 8,
            center: results[0].geometry.location,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };

          map = new google.maps.Map($("#map").get(0), mapOptions);

          var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location,
          });
        } else {
          alert('Geocode was not successful for the following reason: ' + status);
        }
      )
    };
  }

  initializeMap();

});
#map {
  height: 300px;
  width: 800px;
  border: 1px solid black;
}
<html>

<head>
  <title>Title</title>

  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

  <script src="test.js"></script>
</head>

<body>

  <div id="map"></div>

</body>

</html>

Upvotes: 0

Views: 57

Answers (1)

geocodezip
geocodezip

Reputation: 161404

You have a syntax error in your code (a misplaced ")"). Working code snippet:

$(document).ready(function() {

  //google map 
  var map, geocoder;

  function initializeMap() {
    google.maps.event.addDomListener(window, 'load', function() {
      codeAddress('33 W 23rd St, New York, NY');
    });
  }

  function codeAddress(address) {
    geocoder = new google.maps.Geocoder();
    geocoder.geocode({
      'address': address
    }, function(results, status) {
      if (status === google.maps.GeocoderStatus.OK) {
        var mapOptions = {
          zoom: 8,
          center: results[0].geometry.location,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map($("#map").get(0), mapOptions);

        var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location,
        });
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }

  initializeMap();

});
#map {
  height: 300px;
  width: 800px;
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<div id="map"></div>

Upvotes: 1

Related Questions