使用SSMS数据库谷歌地图API

Question

我有我想显示来自美国各地的世博会即将推出的应用程序。我最初指向一个地方API的方向，然后我指出对地理编码API。到目前为止，没有奏效。我的代码将看起来波涛汹涌的代表这么多不同的来源，并试图网状的东西放在一起，以得到它的工作。

我使用的是SQL Server数据库和我有ExpoLocations一个表，我有地址，城市，州和邮编领域。我试图创建一个使用C＃插到我的API JavaScript数组。我没有得到任何控制台错误。在我的检查，当我看着来源，它返回我需要在阵列中的项目。地图我不是我的网页上显示的。

所有的代码是在我的观

DIV> ID =肺

    // #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. 确保初始化（），一旦您的文档呈现实际上是被调用。
2. 确保您的地图div有一个最小高度。

然后，您应该至少能看到您的网页上的地图。

然后，问题是，你的回调从geocoder.geocode响应变量命名为request，但使用的是results[0].geometry.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>