API Карт Google с использованием базы данных SSMS

Question

У меня есть приложение, которое я хотел бы показать на предстоящих выставках со всего США.Сначала я указывал в сторону API Адресов, затем был направлен в сторону API Геокодирования.Пока ничего не получилось.Мой код будет казаться нестабильным из-за большого количества различных источников и попыток объединить все вместе, чтобы заставить его работать.

Я использую базу данных SQL Server, и у меня есть таблица с ExpoLocations, у меня есть поля для адреса, города, штата и почтового индекса.Я пытаюсь создать массив JavaScript, используя C # для подключения к моему API.Я не получаю никаких ошибок консоли.В моем инспекторе, когда я смотрю на источники, он возвращает нужные мне элементы в массиве.Карта я вообще не отображаю на своей странице.

Весь код у меня на виду

div> id = mapAPI

    // #region MAP API       
    var expos = [];
    @foreach (var item in Model.ToList())
    {
        @:var request = { types: 'street_address', formatted_address: '@item.Address' + '@item.City' + ',' + '@item.State', address_components:{types: 'street_address'}, partial_match: true}
            @:expos.push(request);
            }



    var geocoder;
    var map;
    function initialize() {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(37.09024, -95.712891);
        var mapOptions = {
            zoom: 4,
            center: latlng
        }
        map = new google.maps.Map(document.getElementById('mapAPI'), mapOptions);
    }

    function codeAddress() {
        var address = document.getElementById('address').value;
        geocoder.geocode( { 'address': address}, function(request, status) {
            if (status == 'OK') {
                map.setCenter(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);
            }
        });
    }
    // #endregion

Я использую этот API в своих скриптах

https://maps.googleapis.com/maps/api/js?key=MYAPIKEY

Answer 1

1. Убедитесь, что initialize () действительно вызывается после рендеринга вашего документа.
2. Убедитесь, что у div карты есть минимальная высота.

Тогда вы должны хотя быиметь возможность видеть карту на своей странице.

Тогда проблема в том, что переменная ответа для вашего обратного вызова из geocoder.geocode называется request, но вы используете results[0].geometry.location для фактической установки картыlocation.

Измените имя в вашем обратном вызове на results, и при вызове codeAddress вы должны увидеть маркер для вашего геокодированного местоположения.

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

Вы сможете запустить приведенный ниже фрагмент с вашим ключом API.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOURKEYHERE"></script>
<script>
  var geocoder;
  var map;

  function initialize() {
    console.log("initialize called");
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(37.09024, -95.712891);
    var mapOptions = {
      zoom: 4,
      center: latlng
    }
    map = new google.maps.Map(document.getElementById('mapAPI'), mapOptions);
  }

  function codeAddress() {
    console.log("codeAddress called!");
    var address = document.getElementById('address').value;
    geocoder.geocode({
      'address': address
    }, function(results, status) {
      if (status == 'OK') {
        map.setCenter(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);
      }
    });
  }
  $(document).ready(function() {
    console.log("ready!");
    initialize();
  });
</script>
<div id="mapAPI" style="min-width:100px;min-height:100px"></div>
<input id="address" />
<button onClick="codeAddress()">Geocode Me!</button>