API карт Google / Геокодирование Uncaught ReferenceError: Google не определен

Question

Я пытаюсь использовать Google Gecoding API, чтобы я мог получить координаты с адреса улицы и использовать его с Google Maps.Когда я только использовал карту Google, у меня не было проблем с тем, чтобы заставить ее работать.Я следую руководству, так как не совсем понимаю JavaScript.Я получаю сообщение об ошибке

ReferenceError: Google не определен

при открытии консоли элемента контроля.

Я гуглю и думаю, чтопроблема в том, что карта не инициализируется, когда я запускаю первую часть моего JavaScript, так как я получаю ошибку только в части геокодирования.Но я не знаю, что делать или как это исправить.Был бы признателен за помощь.

Вот мой взгляд:

    <div class="full">
            <div class="saloon-main col-md-8">
                <h1 class="display-2">@Model.SaloonName</h1>
                <p class="saloon-adress">Andress 99 PostNr, Stad / TelNr: +46 21-123 45</p>
                <button type="button" class="btn-primary">Boka tid</button>
            </div>
            <div class="company-right-nav col-md-4">
                <div class="col-sm-12 saloon-info">
                    <ul class="list-unstyled">
                        <li>@Model.SaloonName</li>
                        <li>Email: @Model.Email</li>
                        <li>Telefon</li>
                        <li>Adress</li>
                    </ul>

                    <ul>
                        <li>ÖPPETTIDER</li>
                        <li>Måndag:</li>
                    </ul>
                </div>

                <div id="map">
                    <p>map</p>
                </div>
            </div>
            <div class="clear"></div>
        </div>




<script>
    geocoder = new google.maps.Geocoder();

    function getCoordinates (adress, callback) {
        var coordinates;
        geocoder.geocode({ adress: adress }, function (results, status) {
            coords_obj = results[0].geometry.location;
            coordinates = [coords_obj.nb,coords_obj.ob];
            callback(coordinates);
        })
    }

    var map;
    function initMap() {

        getCoordinates('4203 las palmas austin texas', function(coords) {
            var mapOptions = {
                zoom: 12,
                center: new google.maps.LatLng(coords[0], coords[1]),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map'),
                mapOptions);
        })
    }

    google.maps.event.AddDomListener(window, 'load', initMap);
</script>

<script async defer src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDfKu9XJ0jr19cj46HYSqQrNDU-oX0LKmY&callback=initMap"
        type="text/javascript"></script>

Answer 1

Попробуйте код ниже

Нет необходимости инициировать событие.initMap автоматически вызовет, когда библиотека закончит загрузку.

var map;
function initMap() {
    geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'address': '4203 las palmas austin texas' }, function (results, status) {
        if (status == 'OK') {
            coords_obj = results[0].geometry.location;
            var mapOptions = {
                zoom: 12,
                center: new google.maps.LatLng(coords_obj.lat(), coords_obj.lng()),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map'), mapOptions);
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}

<style>
    #map {
        position: unset !important;
    }
</style>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfKu9XJ0jr19cj46HYSqQrNDU-oX0LKmY&callback=initMap"></script>
<div id="map"></div>