Google Maps Геокодирование не работает

Question

Я пытаюсь геокодировать следующий адрес -> Noguera 429 San Antonio de Padua с API Карт Google. Адрес поступает из базы данных и хранится в адресе переменной. Это мой код:

var address = '<?php echo $cerrajero["direccion"]?>'+' '+'<?php echo $cerrajero["ciudad"]?>'; 
var myCenter; 

function initialize(){ 

    var geocoder = new google.maps.Geocoder(); 

    geocoder.geocode({ 
     "address": address 
    },function(results){ 
     myCenter = results[0].geometry.location; 
    }); 

    var mapProp = { 
     center:myCenter, 
     zoom: 15, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map=new google.maps.Map(document.getElementById("googleMap"), mapProp); 

    var marker=new google.maps.Marker({ 
     position:myCenter, 
     icon:'css/images/pin.png' 
    }); 

    marker.setMap(map); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

, а затем:

<div id="googleMap" class="map" style="height:250px;"></div> 

и, наконец:

.map{ 
    margin: 0 0 18px 0; 
    width: 100%; 
} 

Но моя карта не отображается. Он просто показывает серый блок, что-то не так с javascript?

PS: Адрес переменной в порядке, я проверил его с помощью консоли.

Answer 1

Геокодер является асинхронным, вы должны использовать результаты в функции обратного вызова, когда/где они доступны.

фрагмент кода:

var address = 'Noguera 429 San Antonio de Padua'; 
 
var myCenter; 
 

 
function initialize() { 
 

 
    var geocoder = new google.maps.Geocoder(); 
 

 
    geocoder.geocode({ 
 
    "address": address 
 
    }, function(results, status) { 
 
    if (status === google.maps.GeocoderStatus.OK) { 
 
     myCenter = results[0].geometry.location; 
 
     var mapProp = { 
 
     center: myCenter, 
 
     zoom: 15, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
     }; 
 

 
     var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 
 

 
     var marker = new google.maps.Marker({ 
 
     position: myCenter, 
 
     // icon:'css/images/pin.png' 
 
     }); 
 

 
     marker.setMap(map); 
 
    } else { 
 
     alert('Geocode was not successful for the following reason: ' + status); 
 
    } 
 
    }); 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#googleMap { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="googleMap"></div>