2015-11-29 4 views
0

По какой-то причине карты google не отображаются, когда я запускаю свой файл в браузере. Он просто дает пустое пространство. Это мой код:Google map from API не отображается

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

ответ

1

У вас есть синтаксические ошибки в коде (некорректный ")"). Рабочий фрагмент кода:

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