API javascript map Google работает в VS 2017, но не работает при публикации в Azure - PullRequest
0 голосов
/ 08 января 2019

У меня есть веб-сайт ASP.NET Core 2.2, который создает карту по адресу, используя API геокодирования Google и API Java Map. Он работает в Visual Studio 2017, но когда я публикую его в Azure, он больше не работает. Карта не появляется. Консоль разработчика не показывает ошибок.

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

Веб-сайт http://americanhorseproperties.com

<div id="map">


</div>

<a asp-page="./Index">Back to Gallery</a>

<input type="hidden" id="address" value="@Model.house.address 
@Model.house.city" />

<script>

// Initialize and add the map
function initMap() {
var geocoder = new google.maps.Geocoder();

//gets address from the address hidden input element in body
var address = document.getElementById('address').value; 

//geocodes address and gets latlong 
geocoder.geocode({ 'address': address }, function (results, status) {

if (status == 'OK') {
            console.log('location: Longitude: ', 
            results[0].geometry.location.lng());
            console.log('location: Latitude: ', 
            results[0].geometry.location.lat());

var map = new google.maps.Map(document.getElementById('map'), { zoom: 14, 
center: results[0].geometry.location });   
var marker = new google.maps.Marker({ map: map, position: 
results[0].geometry.location }); //sets marker at new lat long

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

    });

}


</script>

<script async defer
    src="https://maps.googleapis.com/maps/api/js? 
    key=KEY_REMOVED&callback=initMap">

</script>

Ответы [ 2 ]

0 голосов
/ 08 января 2019

Кажется, вам нужно установить свойство "height" для <div id="map"> enter image description here

0 голосов
/ 08 января 2019

Проблема CSS.

API Карт Google автоматически добавляет свойства CSS "позиция: относительная; переполнение: скрытое;" в div, который используется для отображения карты. Когда я вручную удаляю любое из этих двух свойств в консоли разработчика браузера, карта становится видимой.

Убедитесь, что у div есть размер, который может заполнить карта.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...