Карта Google не отображается в частичном представлении?

Я пытаюсь реализовать карту Google в частичном представлении и пытаюсь вызвать частичное представление на странице, вот мой скрипт карты Google, который я разместил в основном виде.

 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDLhntIiMFhAoHu5XtrxDuh4EeNbm2ZuH0&libraries=places&callback=initAutocomplete" async defer></script>
    <script type="text/javascript">
        function initAutocomplete()
        {

            var map = new google.maps.Map(document.getElementById('map'), 
                {
                center: { lat: -33.8688, lng: 151.2195 },
                zoom: 13,
                mapTypeId: 'roadmap'
            });
            console.log('map', map);
            // Create the search box and link it to the UI element.
            var input = document.getElementById('pac-input');
            var searchBox = new google.maps.places.SearchBox(input);
            map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

            // Bias the SearchBox results towards current map's viewport.
            map.addListener('bounds_changed', function () {
                searchBox.setBounds(map.getBounds());
            });

            var markers = [];
            // Listen for the event fired when the user selects a prediction and retrieve
            // more details for that place.
            searchBox.addListener('places_changed', function () {
                var places = searchBox.getPlaces();

                if (places.length == 0) {
                    return;
                }

                // Clear out the old markers.
                markers.forEach(function (marker) {
                    marker.setMap(null);
                });
                markers = [];

                // For each place, get the icon, name and location.
                var bounds = new google.maps.LatLngBounds();
                places.forEach(function (place) {
                    if (!place.geometry) {
                        console.log("Returned place contains no geometry");
                        return;
                    }
                    var icon = {
                        url: place.icon,
                        size: new google.maps.Size(71, 71),
                        origin: new google.maps.Point(0, 0),
                        anchor: new google.maps.Point(17, 34),
                        scaledSize: new google.maps.Size(25, 25)
                    };
                    // Create a marker for each place.
                    markers.push(new google.maps.Marker({
                        map: map,
                        icon: icon,
                        title: place.name,
                        position: place.geometry.location
                    }));

                    if (place.geometry.viewport) {
                        // Only geocodes have viewport.
                        bounds.union(place.geometry.viewport);
                    } else {
                        bounds.extend(place.geometry.location);
                    }
                    var address = $('#pac-input').val();
                    //document.getElementById('pac-input');
                    $.ajax({
                        url: "http://maps.googleapis.com/maps/api/geocode/json?address=" + address + "&sensor=false",
                        type: "POST",
                        success: function (res) {
                            latitude = res.results[0].geometry.location.lat;
                            longitude = res.results[0].geometry.location.lng;
                        }
                    });
                });
                map.fitBounds(bounds);
            });
        }

И вот мой HTML, который размещен в частичном представлении

 <div class="form-group">
            <label>Type a location to Search on Map</label>
            <input type="text" id="pac-input" class="form-control" ng-model="MyLocations.Location" required>
            <div class="selectlocatinonmap" id="map">
            </div>
    </div>

Я поместил этот скрипт на страницу, где мне нужно вызвать частичное представление, но карта Google не работает с частичным представлением. Я также прикрепляю изображение, пожалуйста, посмотрите введите здесь описание изображения

однако консоль не показывает никаких ошибок.


person Gaurav_0093    schedule 08.06.2017    source источник
comment
Можете ли вы передать такое значение центра один раз и дайте мне знать, центр: новый google.maps.LatLng(-33.8688, 151.2195),   -  person Basanta Matia    schedule 08.06.2017
comment
я уже разместил центральное значение там, пожалуйста, посмотрите мой код в функции initAutocomplete   -  person Gaurav_0093    schedule 08.06.2017
comment
Я сказал изменить эту строку с этой, center: {lat: -33.8688, lng: 151.2195}, на новую google.maps.LatLng(-33.8688, 151.2195) и проверить один раз.   -  person Basanta Matia    schedule 08.06.2017
comment
не работает, я сделал это var map = new google.maps(document.getElementById('map'), {center: {lat: -33.8688, lng: 151.2195}, zoom: 13, mapTypeId: 'roadmap'});   -  person Gaurav_0093    schedule 08.06.2017
comment
Братан! Вы не понимаете, что я пытаюсь вам сказать. Пожалуйста, измените строку в вашем кодовом центре: { lat: -33.8688, lng: 151.2195} на новый google.maps.LatLng(-33.8688, 151.2195), вот и все. Остальной код будет таким, какой он есть. И проверьте один раз и дайте мне знать.   -  person Basanta Matia    schedule 08.06.2017
comment
сэр, все еще не работает и не показывает никаких ошибок в консоли.   -  person Gaurav_0093    schedule 08.06.2017


Ответы (2)


Возможно, это связано с тем, что при вызове функции обратного вызова, генерирующей карты, контейнер карты скрыт. Вы можете вызвать обратный вызов карты инициализации, нажав кнопку, которая показывает вашу форму, после того, как эффекты затухания или скольжения выполнены.

ИЗМЕНИТЬ

$('#my_button_wich_show_form').click(initAutocomplete);

Не забудьте удалить параметр обратного вызова из URL-адреса карты. Если вы используете некоторые эффекты перед показом модального окна, вызовите функцию initAutocomplete после того, как эффекты будут выполнены.

В вашей функции initAutocomplete вы должны проверить, пуста ли #map, чтобы вы могли выполнить свой скрипт или просто вызвать событие изменения размера карты:

<script type="text/javascript">

    function initAutocomplete()
    {
        if( !$('#map').is(':empty') ){
            google.maps.event.trigger(this.map, 'resize');
            return false;
        }
        this.map = new google.maps.Map(document.getElementById('map'), 
            {
            center: { lat: -33.8688, lng: 151.2195 },
            zoom: 13,
            mapTypeId: 'roadmap'
        });
        var map = this.map;
        console.log('map', map);
        // Create the search box and link it to the UI element.
        var input = document.getElementById('pac-input');
        var searchBox = new google.maps.places.SearchBox(input);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

        // Bias the SearchBox results towards current map's viewport.
        map.addListener('bounds_changed', function () {
            searchBox.setBounds(map.getBounds());
        });

        var markers = [];
        // Listen for the event fired when the user selects a prediction and retrieve
        // more details for that place.
        searchBox.addListener('places_changed', function () {
            var places = searchBox.getPlaces();

            if (places.length == 0) {
                return;
            }

            // Clear out the old markers.
            markers.forEach(function (marker) {
                marker.setMap(null);
            });
            markers = [];

            // For each place, get the icon, name and location.
            var bounds = new google.maps.LatLngBounds();
            places.forEach(function (place) {
                if (!place.geometry) {
                    console.log("Returned place contains no geometry");
                    return;
                }
                var icon = {
                    url: place.icon,
                    size: new google.maps.Size(71, 71),
                    origin: new google.maps.Point(0, 0),
                    anchor: new google.maps.Point(17, 34),
                    scaledSize: new google.maps.Size(25, 25)
                };
                // Create a marker for each place.
                markers.push(new google.maps.Marker({
                    map: map,
                    icon: icon,
                    title: place.name,
                    position: place.geometry.location
                }));

                if (place.geometry.viewport) {
                    // Only geocodes have viewport.
                    bounds.union(place.geometry.viewport);
                } else {
                    bounds.extend(place.geometry.location);
                }
                var address = $('#pac-input').val();
                //document.getElementById('pac-input');
                $.ajax({
                    url: "http://maps.googleapis.com/maps/api/geocode/json?address=" + address + "&sensor=false",
                    type: "POST",
                    success: function (res) {
                        latitude = res.results[0].geometry.location.lat;
                        longitude = res.results[0].geometry.location.lng;
                    }
                });
            });
            map.fitBounds(bounds);
        });
    }
person ggirodda    schedule 08.06.2017
comment
функция обратного вызова вызывается во время загрузки страницы - person Gaurav_0093; 08.06.2017
comment
вы также можете вызвать только функцию изменения размера карты, когда форма полностью загружена, это перезагрузит карту. - person ggirodda; 08.06.2017
comment
да, это была проблема. Вы можете вызвать функцию по клику и удалить callback=initAutocomplete в параметрах URL-адреса. - person ggirodda; 08.06.2017
comment
пожалуйста, напишите свой ответ, я был бы очень благодарен вам, если это сработает - person Gaurav_0093; 08.06.2017
comment
лучшее решение - загружать карты одним щелчком мыши, используя getScript. Это позволит избежать ожидания карт Google при загрузке страницы. - person ggirodda; 08.06.2017
comment
$('#my_button_wich_show_form').click(function(){ initAutocomplete(); }) - person ggirodda; 08.06.2017
comment
это будет работать только в том случае, если у вас нет эффектов затухания или скольжения в вашей форме. Если у вас есть эффекты, вам нужно дождаться полного отображения формы, используя обратные вызовы на вашей анимации затухания / скольжения или тайм-аут. - person ggirodda; 08.06.2017

Запустите Fiddler бесплатно и посмотрите, попадает ли ваш запрос в Google. Судя по вашему снимку экрана, я не вижу никакого API-интерфейса xhr для сопоставления Google. Я думаю, тебя где-то заблокировали.

person Bill Moore    schedule 08.06.2017
comment
я думаю, у вас может не получиться добавить файл css ang google api - person Arvind Audacious; 08.06.2017
comment
Будет ли css препятствовать загрузке карты или просто сделает ее смешной? - person Bill Moore; 08.06.2017