Google is not defined (api maps error)
Question
After being reading some time... I wanted to start use the Google Maps API for Javascript. I got the key on their website, I tried many ways to create maps but now, I want to create a map by a previous "location" so first, I use the Geocoder.geocode() and then I create the map, last night it was working okey.
So, I decided to start use overlays (Markers) in these maps but I don't know I'm getting the Uncaught error: google is not defined.
I read a bit about it and i know most of times is about asynchronous problem but, I still don't know how fix it, here is the code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#map { height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAeaWLxSHFEdwWEVVYajslt7R9eP0ZpLXQ&callback=initMap"></script>
<script type="text/javascript">
var sLocation = "Castillejos 265 Barcelona";
var sLocationToSearch =sLocation.split(' ').join('+');
$.ajax({
type: 'GET',
url: 'https://maps.googleapis.com/maps/api/geocode/json?address='+ sLocationToSearch +'&key=AIzaSyAeaWLxSHFEdwWEVVYajslt7R9eP0ZpLXQ',
success: function(res){
// ParseFloat the <latitud> and <longitud>
//var myLatlng = new google.maps.LatLng(parseFloat(trader.geo.lat),parseFloat(trader.geo.lon));
initMap(res.results[0].geometry.location);
},
error: function(error){
console.log(error);
}
});
function initMap(oLatlng){
var map = new google.maps.Map(document.getElementById('map'), {
center: oLatlng,
zoom: 15
});
}
</script>
</body>
</html>
thanks a lot for your help
1 answers
solution1
0 ACCPTED 2016-04-22 13:03:04
call javascript after page is loaded by using window.onload
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body
{
height: 100%;
margin: 0;
padding: 0;
}
#map
{
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAeaWLxSHFEdwWEVVYajslt7R9eP0ZpLXQ&callback=initMap"></script>
<script type="text/javascript">
window.onload = function()
{
var sLocation = "Castillejos 265 Barcelona";
var sLocationToSearch = sLocation.split(' ').join('+');
$.ajax({
type : 'GET',
url : 'https://maps.googleapis.com/maps/api/geocode/json?address=' + sLocationToSearch + '&key=AIzaSyAeaWLxSHFEdwWEVVYajslt7R9eP0ZpLXQ',
success : function(res)
{
// ParseFloat the <latitud> and <longitud>
//var myLatlng = new google.maps.LatLng(parseFloat(trader.geo.lat),parseFloat(trader.geo.lon));
initMap(res.results[0].geometry.location);
},
error : function(error)
{
console.log(error);
}
});
function initMap(oLatlng)
{
var map = new google.maps.Map(document.getElementById('map'), {
center : oLatlng,
zoom : 15
});
}
}
</script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.