Здравствуйте.
Есть такой код:
<div class="contacts col-xs-12">
<div class="contact-block row">
<div class="maps col-lg-9" data-addr="<?= $address['address'] ?>"></div>
</div>
<div class="contact-block row">
<div class="maps col-lg-9" data-addr="<?= $address['address'] ?>"></div>
</div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap" async defer></script>
<script type="text/javascript">
var map;
function initMap() {
var element = $('.contact-block');
element.each(function () {
var self = $(this);
var container = self.find('.maps');
var addr = container.data('addr');
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'address': addr}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
console.info(results);
var map = new google.maps.Map(container, {
zoom: 17,
center: results[0].geometry.location
});
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
});
}
</script>
Понимаю, что код совсем не из лучших, но несколько суток не спал, нет уже сил переписать по другому. Мне надо, что бы хоть работало.
В общем, когда запускаю код, то мне пишет в консоли, что
Uncaught TypeError: Cannot set property 'position' of undefined
Помогите, пожалуйста, поправить, что бы в оба блока выводилась карта.
P.S. В $address['address'] содержится адрес строкой, типо "Минск, ул. Ленина, дом 666", поэтому и использую ещё геокодер, который должен это переводить. console.info(results); Возвращает норм объект.
