First of all, the problem was loading the scripts as async, remove it..
try that jsfiddle with your API KEY
(function(){ let mapElement = 'map'; let address = 'SPAIN'; geocoder = new google.maps.Geocoder(); geocoder.geocode({ 'address': address }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { var mapOptions = { zoom: 17, center: results[0].geometry.location, disableDefaultUI: true }; var map = new google.maps.Map(document.getElementById(mapElement), 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); } }); })();
#map { width: 100%; height: 350px; }
<script src="https://maps.googleapis.com/maps/api/js?key=APIKEY" type="text/javascript"></script> <div id="map"></div>