Javascript 按地址排列的谷歌地图未显示

我有两个脚本。当一个州/县下拉列表被更改时，它将被激活，它将执行地址查找并转到该特定县。我使用的第二个脚本在表单中填充经度和纬度文本框。我正试图将两者结合起来。后一个脚本使用静态经度/纬度，我需要它使用一个地址，就像我在第一个脚本中使用的那样。在尝试将两者结合时，我的代码中的某个地方出现了错误。地图甚至不会出现

function selectState(state_id){
     if(state_id!="-1"){
      loadData('city',state_id);
var e = document.getElementById("state");
var stateloc = e.options[e.selectedIndex].value;

   var sAddress = state_id + stateloc;

    var $latitude = document.getElementById('latitude');
    var $longitude = document.getElementById('longitude');
    //var latitude = 33.00636021320537
   // var longitude = -93.46687316894531;
    var zoom = 12;
    var geocoder;

    //var LatLng = new google.maps.LatLng(latitude, longitude);
geocoder = new google.maps.Geocoder();

geocoder.geocode( { 'address': sAddress}, function(results, status)
{
    if (status == google.maps.GeocoderStatus.OK)
    {


    map.setCenter(results[0].geometry.location);



var mapOptions = {
  zoom: zoom,
  //center: LatLng,
  panControl: false,
  zoomControl: true,
  scaleControl: true,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}  

var map = new google.maps.Map(document.getElementById('map'),mapOptions);

var marker = new google.maps.Marker({
 // position: LatLng,
 position: results[0].geometry.location,
  map: map,
  title: 'Drag Me!',
  draggable: true
});

google.maps.event.addListener(marker, 'dragend', function(marker){
  var latLng = marker.latLng;
  $latitude.value = latLng.lat();
  $longitude.value = latLng.lng();
});




//end geocoder check
        }
    else
    {
            alert("Geocode was not successful: " + status);
    }

    });




     }else{
       $("#city_dropdown").html("<option value='-1'>Select city</option>");
     }
   }

功能选择状态（状态标识）{
如果（状态id！=“-1”）{
loadData（“城市”，州标识）；
var e=document.getElementById（“状态”）；
var stateloc=e.options[e.selectedIndex].value；
var sAddress=状态id+状态LOC；
var$latitude=document.getElementById（'latitude'）；
var$longitude=document.getElementById（'longitude'）；
//变量纬度=33.00636021320537
//变量经度=-93.46687316894531；
var=12；
var地理编码器；
//var LatLng=新的google.maps.LatLng（纬度、经度）；
geocoder=新的google.maps.geocoder（）；
geocoder.geocode（{'address'：sAddress}，函数（结果，状态）
{
if（status==google.maps.GeocoderStatus.OK）
{
map.setCenter（结果[0].geometry.location）；
变量映射选项={
缩放：缩放，
//中心：拉特林，
泛控制：错误，
动物控制：对，
scaleControl：对，
mapTypeId:google.maps.mapTypeId.ROADMAP
}  
var map=new google.maps.map（document.getElementById（'map'），mapOptions）；
var marker=new google.maps.marker({
//位置：LatLng，
位置：结果[0]。geometry.location，
地图：地图，
标题：“拖我！”，
德拉格布尔：是的
});
google.maps.event.addListener（标记，'dragend'，函数（标记）{
var latLng=marker.latLng；
$latitude.value=latLng.lat（）；
$longitude.value=latLng.lng（）；
});
//结束地理编码器检查
}
其他的
{
警报（“地理代码未成功：+状态）；
}
});
}否则{
$（“#城市下拉列表”）.html（“选择城市”）；
}
}

html

纬度：


经度：

您可以设置未定义地图的中心。因此，如果其他一切正常，您必须更改此部分：

       ...
       if (status == google.maps.GeocoderStatus.OK) {
            // map is undefined here
            // map.setCenter(results[0].geometry.location);

            var mapOptions = {
                zoom: zoom,
                // center could be set here
                center: results[0].geometry.location,
                panControl: false,
                zoomControl: true,
                scaleControl: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }  

            // map is created here
            var map = new google.maps.Map(document.getElementById('map'),mapOptions);
            ...

---

我注释掉了map.setCenter（结果[0].geometry.location）；现在我得到了一个空白的灰色方块来代替地图显示的地方。我是否在代码中的错误位置定义了地图？我是否朝着正确的方向前进？我需要做什么？我应该定义地图还是已经定义了地图？谢谢。如果你没有设置地图存在时的中心和缩放，你的地图将是“灰色”（未初始化）。您可以在创建地图时（在用于创建地图的mapOptions中）或稍后（在创建地图后）使用setCenter和setZoom执行此操作。HTML中没有地图。

       ...
       if (status == google.maps.GeocoderStatus.OK) {
            // map is undefined here
            // map.setCenter(results[0].geometry.location);

            var mapOptions = {
                zoom: zoom,
                // center could be set here
                center: results[0].geometry.location,
                panControl: false,
                zoomControl: true,
                scaleControl: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }  

            // map is created here
            var map = new google.maps.Map(document.getElementById('map'),mapOptions);
            ...